interface-design

9 개의 포스트

toss원문

쓰기 쉬운 Toss Front SDK (새 탭에서 열림)

좋은 SDK는 단순히 기능을 제공하는 것을 넘어, 사용자가 올바른 방법으로만 사용하도록 유도하고 휴먼 에러를 구조적으로 방지해야 합니다. 이를 위해 복잡한 내부 로직을 사용자의 ‘의도’를 중심으로 추상화하는 퍼사드(Facade) 패턴을 적용하여, 사용자가 최소한의 코드로도 안정적인 결과물을 만들 수 있는 환경을 구축해야 합니다. 고수준 인터페이스를 통해 대다수의 유즈케이스를 해결하면서도, 특수한 상황을 위한 저수준 인터페이스라는 ‘탈출구’를 마련하는 것이 설계의 핵심입니다. ### 의도 기반의 퍼사드(Facade) 패턴 재정의 - 퍼사드 패턴의 본질은 단순히 복잡한 기능을 숨기는 것이 아니라, 내부 구현을 ‘사용자의 의도(Intent)’를 기준으로 재구성하는 데 있습니다. - "서버를 열고, 핸들러를 등록하고, 에러를 처리한다"는 개별적인 절차를 "서버를 시작한다"는 하나의 자연스러운 목적으로 통합합니다. - 인증, 재시도 로직, 상태 관리, 클린업(Cleanup) 등 인지 부하를 일으키는 요소들을 SDK 내부로 은닉하여 사용자 측의 실수를 원천 차단합니다. ### AWS CDK 사례를 통한 추상화 계층의 이해 - AWS CDK의 L1 구문은 리소스의 모든 속성을 제어하는 저수준(low-level) 인터페이스인 반면, L2 구문은 직관적인 의도 기반의 고수준(high-level) 추상화를 제공합니다. - S3 버킷 생성 시 L1은 모든 세부 설정을 직접 챙겨야 하지만, L2는 자주 쓰이는 옵션을 간단한 프로퍼티로 제공하고 내부적인 변환은 SDK가 담당합니다. - SDK 설계 시에도 이와 같이 복잡한 주변 구성을 자연스러운 API 흐름으로 이어 붙일 수 있도록 설계해야 합니다. ### 파레토 법칙을 적용한 인터페이스 설계 - 전체 사용 사례의 80%에 해당하는 공통 유즈케이스는 고수준 인터페이스(Facade)를 통해 워크플로우를 자동화하여 제공합니다. - 나머지 20%의 특수한 요구사항이나 세밀한 제어가 필요한 상황을 위해 저수준 API인 ‘탈출구(Escape Hatch)’를 함께 유지합니다. - 이러한 이중 구조는 단기적인 개발자 경험(DX) 향상뿐만 아니라, SDK의 장기적인 호환성과 확장성을 보장하는 핵심 전략이 됩니다. ### 편의성과 유연성 사이의 트레이드오프 관리 - 추상화 수준이 높아지면 사용자는 편리해지지만, SDK 내부에서는 더 정교한 오케스트레이션 로직을 관리해야 하는 유지보수 비용이 발생합니다. - 세밀한 제어가 차단될 경우 특정 상황에서 제약이 될 수 있으므로, 고수준 인터페이스에만 의존하지 않고 저수준 조작이 가능한 균형점을 찾는 것이 중요합니다. - 결과적으로 잘 설계된 인터페이스는 사용자가 별도의 가이드 없이도 올바른 패턴을 유지하며 메모리 누수와 같은 장애 상황을 방지하게 합니다. 단순히 "동작하는" SDK를 만드는 단계를 넘어, 사용자가 직관적으로 이해하고 안전하게 사용할 수 있는 "쓰기 쉬운" SDK를 지향해야 합니다. 이를 위해 사용자의 의도를 최우선으로 고려한 추상화 계층을 설계하고, 대다수의 편의성과 소수의 유연성을 동시에 잡을 수 있는 다층적 구조를 도입할 것을 권장합니다.

figma3분 읽기큐레이션 요약

빌 애킨슨의 더 인간적인

Bill Atkinson의 인터페이스 철학은 복잡한 기술을 사용자가 직관적이고 즐겁게 다룰 수 있는 경험으로 바꾸는 데 있다. 그는 제한된 하드웨어 안에서 효율적인 해법을 찾고, 비전문가도 창작할 수 있는 도구를 만들며, 사용자가 도구 자체를 의식하지 않고 작업에 집중하도록 설계했다. 이 글은 QuickDraw, MacPaint, HyperCard에 드러난 그의 접근을 바탕으로 인간적인 인터페이스를 만드는 10가지 원칙을 제시한다. ## 빌 Atkinson과 인간 중심 컴퓨팅 - Atkinson은 Apple의 초기 핵심 엔지니어로서 QuickDraw, MacPaint, HyperCard 개발에 기여했다. - 신경생물학과 컴퓨팅을 함께 공부한 배경을 바탕으로 인간과 기계가 협력하는 방식을 탐구했다. - QuickDraw는 Macintosh의 시각적 인터페이스를 가능하게 했고, MacPaint는 비트맵 편집을 대중화했다. - HyperCard는 프로그래밍을 몰라도 시각적 도구와 자연어 스크립트로 인터랙티브 소프트웨어를 만들 수 있게 했다. ## 제약을 피하지 말고 제약 안에서 설계하기 - 초기 Macintosh는 RAM이 128KB에 불과하고 프로세서도 느렸지만, Atkinson은 그래픽 품질을 타협하지 않았다. - 도형과 곡선을 빠르게 그리는 효율적인 알고리즘을 개발해 제한된 하드웨어에서도 부드러운 그래픽을 구현했다. - 무작정 더 많은 자원을 요구하기보다, 제약을 설계의 출발점으로 삼아 우아한 해결책을 찾았다. - 제품의 품질은 자원 규모보다 문제를 해결하는 알고리즘과 설계 방식에 좌우될 수 있다. ## 창작을 전문가의 전유물에서 해방하기 - HyperCard는 소프트웨어 제작에 필요한 전문 프로그래밍 지식을 낮추는 것을 목표로 했다. - 교사는 교육용 프로그램을, 예술가는 멀티미디어 경험을, 기업은 맞춤형 데이터베이스를 직접 만들 수 있었다. - 창작 도구는 전문가만을 위한 기능 집합이 아니라, 더 많은 사람이 자신의 아이디어를 구현하게 하는 수단이어야 한다. - Atkinson은 자신을 “예술가와 발명가의 중간”으로 표현하며 기술과 창작의 결합을 강조했다. ## 인터페이스를 자연스럽고 필연적으로 만들기 - 메뉴 바, 더블클릭, 부드러운 곡선 렌더링처럼 오늘날 당연하게 여겨지는 상호작용의 토대를 만들었다. - 메뉴 바는 애플리케이션 전반에 일관된 명령 체계를 제공한다. - 더블클릭과 드래그 앤 드롭은 명령어를 입력하지 않고도 대상을 직접 조작하는 방식을 정착시켰다. - 훌륭한 인터페이스는 사용자가 도구를 배우거나 의식하지 않고 작업 자체에 집중하게 만든다. ## ‘당연한 해법’에 의문 제기하기 - Atkinson은 HyperCard가 컴퓨터 내부의 연결에만 집중했고, 네트워크를 통한 연결까지 확장하지 못했다고 훗날 평가했다. - 이는 자신의 가정과 설계 방향도 비판적으로 돌아보는 태도를 보여준다. - 명령줄이 유일한 방식처럼 여겨질 때 그래픽 인터페이스를 개척했고, 비트맵 편집이 어렵다고 여겨질 때 실제 미술 도구처럼 작동하는 MacPaint를 만들었다. - 무엇인가가 명백히 불가능하거나 명백히 옳아 보일수록, 그 전제가 정말 타당한지 다시 검토해야 한다. ## 기능을 넘어 즐거움을 설계하기 - MacPaint는 어린아이도 별도의 교육 없이 바로 그림을 그릴 수 있을 만큼 직관적이었다. - 페인트 통은 실제로 페인트를 붓는 것처럼 작동하고, 붓 도구는 단순하고 직접적인 조작을 제공했다. - 사용자가 실수할까 걱정하기보다 탐색하고 놀도록 유도하는 상호작용을 설계했다. - 좋은 도구는 작업을 빠르게 끝내는 데 그치지 않고, 작업 자체를 더 창의적이고 즐겁게 만든다. ## 글에 포함된 범위 - 제공된 원문은 6번째 원칙의 제목인 “최종 경험을 염두에 두고 엔지니어링하기”에서 중단되어 있다. - 따라서 나머지 6~10번째 원칙의 구체적인 내용은 위 요약에 포함하지 않았다. 실무적으로는 기술적 제약을 먼저 이해하되 사용자 경험을 희생하지 말고, 비전문가도 쉽게 시도할 수 있는 상호작용을 설계하는 것이 이 글의 가장 중요한 교훈이다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

0가지 규칙 | 피그마

메타 CTO 앤드루 “보즈” 보스워스는 AI와 공간 컴퓨팅이 기존 디자인 패러다임을 바꿀 것이라고 본다. 디자이너는 기술 자체보다 실제 인간의 문제에서 출발하고, 당연하게 여겨온 제약과 상호작용 방식을 의심해야 한다. 또한 거친 프로토타입을 빠르게 만들고 전체 시스템을 함께 설계하며, 사용자의 의도를 이해하는 도구와 지속적인 개선을 지향해야 한다. ## 1. 실제 문제를 가진 사람에서 출발하기 - 제품 개발의 기준점은 기술이나 유행이 아니라 문제를 겪는 실제 사람이어야 한다. - “이 도구가 문제를 해결하는가?”를 먼저 물어야 한다. - 최종적으로 제품의 가치를 판단하는 사람은 사용자다. - 사용자가 유용하다고 느끼면 사용하고, 그렇지 않으면 외면한다. ## 2. 당연하게 받아들인 제약을 의심하기 - 우리는 기존 디자인 관습과 시스템 안에서 살아가며, 그것을 자연스러운 현실처럼 받아들이기 쉽다. - 데이비드 포스터 월리스의 ‘물속에 사는 물고기’ 비유처럼, 현재의 제약이 인위적으로 만들어졌다는 사실을 인식해야 한다. - 다음과 같은 질문이 필요하다. - 지금의 접근 방식이 문제에 정말 적합한가? - 이 제약은 실제 제약인가? - 바꾸거나 없앨 수 있는 규칙은 무엇인가? ## 3. 전체 상호작용 패러다임을 의심하기 - 현재의 컴퓨팅 환경은 단순한 의도를 여러 앱과 단계로 쪼개는 경우가 많다. - 예를 들어 운동 중 음악을 듣기 위해 음악 권리 구조, 서비스별 제공 여부, 여러 음악 앱 사이의 전환을 이해해야 하는 것은 부자연스럽다. - 사용자가 “노래를 듣고 싶다”는 의도를 복잡한 앱 조작으로 번역하지 않아도 되는 새로운 상호작용이 필요하다. - 약 60년간 이어진 기존 컴퓨팅 방식을 부분적으로 개선하는 데 그치지 말고, 전체 방식을 재구상해야 한다. ## 4. 발명과 최적화를 구분하기 - 디자인에는 서로 다른 두 가지 모드가 있다. - **제로 투 원:** 고객과 제약이 없는 상태에서 완전히 새로운 가능성을 탐색하는 단계 - **최적화:** 실제 사용자와 함께 기존 결과물을 다듬고 개선하는 단계 - 공간 인터페이스와 AI는 기존 제약이 적은 새로운 영역이므로, 과거의 방식에 얽매이지 않고 발명가처럼 접근할 수 있다. - 현재 자신이 새로운 것을 발명하는 중인지, 기존 제품을 최적화하는 중인지 구분해야 한다. ## 5. 직관과 취향으로 올바른 문제 공간 선택하기 - 복잡한 최적화 문제에서는 어느 지점에서 시작하느냐가 결과에 큰 영향을 준다. - 낮은 언덕을 아무리 열심히 올라가도, 처음부터 더 좋은 지형에서 시작한 사람보다 나은 결과를 얻기 어려울 수 있다. - 디자이너의 직관과 취향은 어떤 문제와 방향을 선택할지 결정하는 중요한 도구다. - 선택 이후에는 여전히 많은 노력과 반복이 필요하지만, 적어도 가능성이 높은 영역에서 시작해야 한다. ## 6. 거칠더라도 가능한 모든 프로토타입 만들기 - 새로운 기술의 가능성은 문서나 토론만으로 판단하기 어렵다. - 메타는 시선 추적 모자를 쓰고 메시 벽으로 만든 방을 사용하는 등 조잡한 실험을 통해 기술의 가능성을 확인해 왔다. - 완성도 낮은 프로토타입이라도 실제로 사용해 보면 기술이 어떤 경험을 제공할 수 있는지 감을 얻을 수 있다. - 빠른 실험은 어떤 아이디어를 더 발전시킬지 결정하는 데 효과적이다. ## 7. 부분이 아니라 전체 시스템 설계하기 - 공간 컴퓨팅에서는 제스처, 피드백, 기능을 서로 분리해 설계하기 어렵다. - 함께 고려해야 할 요소는 다음과 같다. - 사용자가 어떤 제스처를 하는가 - 시각·청각·촉각 중 어떤 피드백을 제공하는가 - 그 상호작용으로 어떤 기능이 열리는가 - 이 요소들은 함께 발전하고 반복적으로 조정되어야 한다. - 진정한 디자인은 개별 화면을 만드는 것이 아니라 상호작용 전체를 설계하는 일이다. ## 8. 사용자의 의도를 이해하는 도구 만들기 - 미래의 도구는 사용자가 무엇을 하려는지 파악할 수 있어야 한다. - ‘마음 이론(theory of mind)’은 자신과 별개로 의도와 목표를 가진 존재가 있음을 이해하는 능력을 뜻한다. - 도구 역시 사용자의 목표를 추론하고 적절히 도와야 한다. - 다만 도구의 자율성은 너무 높아도, 너무 낮아도 안 되며 사용자를 대신하는 정도를 세심하게 조절해야 한다. ## 9. 자신을 완성된 제품으로 보지 않기 - 제품은 출시된 순간 끝나는 것이 아니라 다음 버전을 준비하는 지속적인 과정이다. - 보스워스는 현재의 자신과 제품을 모두 “V43” 같은 버전으로 바라본다. - 다음 버전에서는 기존 버그를 고치지만 새로운 버그도 생길 수 있으며, 그 과정 자체를 즐겨야 한다. - 업무에 적용하는 반복과 개선의 태도를 자기 자신에게도 적용해야 한다. ## 10. 인터페이스를 사라지게 만들기 - 이상적인 인터페이스는 사용자가 의식하지 않아도 목적을 달성하게 하는 매끄러운 경험에 가깝다. - 인터페이스 자체가 본질적인 가치를 갖는 것이 아니라, 사용자가 원하는 일을 방해 없이 수행하도록 돕는 것이 중요하다. - AI와 공간 컴퓨팅은 화면과 앱을 직접 조작하는 과정을 줄이고, 의도 중심의 상호작용을 가능하게 할 수 있다. 실무적으로는 먼저 사용자의 구체적인 문제를 정의한 뒤, 기존 제약을 의심하고 작은 프로토타입을 빠르게 만들어보는 것이 좋다. 특히 새로운 기술을 다룰 때는 화면 하나가 아니라 제스처·피드백·기능·도구의 자율성을 포함한 전체 경험을 함께 설계해야 한다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

디자인이 모두를 위한 이유 |

디자인은 디자이너만의 전문 영역이 아니라 문제를 해결하고 아이디어를 전달하는 보편적인 사고방식이자 업무 방식이라는 글이다. 기술과 제품이 발전할수록 디자인은 하드웨어에서 인터페이스와 소프트웨어 경험으로 확장되었으며, 성공적인 제품은 엔지니어링뿐 아니라 사용자 조사와 접근성, 직관성이 함께 만들어낸다. 따라서 조직 전체가 디자인 지식을 공유하고 모든 구성원이 디자인 과정에 참여할 때 더 나은 제품과 시스템을 규모 있게 만들 수 있다. ## 디자인은 특정 직군의 소유물이 아니다 - 디자인은 단순한 시각적 결과물이나 전문 기술이 아니라 다음과 같은 역할을 한다. - 세상을 바라보는 관점 - 아이디어를 소통하는 언어 - 문제와 도전을 해결하는 프레임워크 - 제품과 프로세스를 개선하는 업무 방식 - 디자인은 누구의 소유도 아니며, 직함과 관계없이 누구나 활용할 수 있어야 한다. - 개인 디자이너의 역량에는 한계가 있으므로, 팀 전체가 디자인 지식을 갖추면 다음을 달성할 수 있다. - 더 뛰어난 사용자 경험 제공 - 더 효율적인 업무 프로세스 설계 - 조직 차원의 시스템 개선 - 디자인의 미래는 개별 디자이너나 디자인 부서에만 머무르지 않고, 조직 전체의 공동 실천으로 확장되는 데 있다. ## 기술 발전과 함께 진화한 디자인 - 디자인의 본질은 문제 해결이다. - 기술이 새로운 가능성을 열 때마다 디자인은 그 기술을 사람들이 이해하고 사용할 수 있는 제품과 경험으로 변환한다. - 디자인은 기술 프로토타입을 실제 시장에서 사용할 수 있는 제품으로 발전시키는 핵심 요소다. - 하드웨어 성능만으로는 제품의 성공을 보장할 수 없으며, 사용자가 제품을 어떻게 이해하고 사용하는지까지 고려해야 한다. ## 워크맨이 보여준 사용자 중심 디자인 - 1979년 소니는 기존 Pressman 테이프 레코더 기술을 바탕으로 휴대용 스테레오를 개발했다. - 엔지니어링 측면에서는 다음과 같은 개선이 이루어졌다. - 부품 소형화 - 녹음 기능 제거 - 음질 향상 - 가볍고 휴대하기 쉬운 형태 구현 - 그러나 워크맨의 대중적 성공에는 직관적인 인터페이스와 사용자 조사가 결정적인 역할을 했다. - 소니의 코조 오손은 초기 프로토타입을 출장 중 직접 테스트하며 다음과 같은 사용자 요구를 확인했다. - 더 작고 휴대하기 쉬운 기기 - 더 넓은 사용자층이 쉽게 사용할 수 있는 조작 방식 - 함께 음악을 듣는 사회적 경험 - 이러한 조사 결과로 다음 기능이 도입되었다. - 두 사람이 동시에 들을 수 있는 듀얼 헤드폰 잭 - 함께 듣는 중 대화할 수 있는 ‘핫라인’ 버튼 - 파란색과 은색 본체, 주황색 버튼의 독특한 색상 조합도 검정·회색 중심의 당시 전자제품과 차별화되어 제품의 상징성을 높였다. - 워크맨은 기술, 사용자 테스트, 접근성, 인터페이스 설계, 시각적 차별화가 결합해 문화적 아이콘이 된 사례다. ## 하드웨어에서 인터페이스 디자인으로 - 2000년대 중반부터 산업의 관심은 하드웨어 자체에서 이를 작동시키는 소프트웨어로 이동했다. - 맥북, 아이팟, 아이폰의 성공은 하드웨어 엔지니어링뿐 아니라 다음 요소에 크게 의존했다. - 사용하기 쉬운 소프트웨어 인터페이스 - 햅틱 피드백 - 터치스크린 상호작용 - 일관되고 이해하기 쉬운 조작 경험 - 앱스토어의 등장으로 모바일 소프트웨어 시장이 성장했고, 기업들은 더 혁신적이고 잘 설계된 디지털 경험을 만들기 위해 경쟁했다. - Web 2.0과 모바일 앱의 확산은 소프트웨어 중심 기업의 성장을 이끌었다. - 소프트웨어는 물리적 장치의 제약을 넘어 복잡한 디지털 기능을 사용자가 이해할 수 있도록 만드는 인터페이스 디자인을 크게 발전시켰다. ## 물리적 제품을 모방한 초기 디지털 인터페이스 - 초기 디지털 인터페이스는 스큐어모피즘을 활용해 기존의 물리적 사물을 모방했다. - 버튼, 슬라이더, 스크롤 휠처럼 사용자에게 익숙한 물리적 요소를 디지털 화면에 재현해 학습 부담을 줄였다. - 이는 새로운 디지털 환경을 낯설어하는 사용자에게 기존 경험을 연결해 주는 방식이었다. - 이후 디지털 기술이 발전하면서 인터페이스는 물리적 사물의 모방을 넘어 디지털 환경에 특화된 새로운 상호작용 방식으로 확장되기 시작했다. 조직에서는 디자인을 결과물을 만드는 마지막 단계로 한정하기보다, 문제 정의부터 사용자 조사와 의사결정까지 모든 구성원이 참여하는 공통 방식으로 다루는 것이 좋다. 디자이너뿐 아니라 엔지니어, 기획자, 마케터도 사용자 관점과 실험적 사고를 공유할 때 제품의 완성도와 조직의 실행력이 함께 높아진다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

Figma on Figma:

Figma UI3는 작업물을 화면의 중심에 두고 사용자의 작업 흐름을 방해하지 않는 것을 목표로 2년 넘게 설계·개선된 인터페이스다. 초기에는 탐색·속성 패널을 플로팅 방식으로 바꿨지만, 실제 사용 데이터와 피드백을 통해 캔버스 공간과 작업 속도를 해친다는 점을 확인하고 고정 패널로 되돌렸다. Figma는 명확한 미래 비전을 세우되, 사용자 피드백과 성능 지표에 따라 과감하게 설계를 수정하는 접근을 강조한다. ## 작업 중심 인터페이스를 위한 UI3 - UI3의 핵심 목표는 캔버스와 디자이너의 작업을 중심에 두고 불필요한 방해 요소를 줄이는 것이다. - 팀은 2년 이상 다양한 인터페이스를 반복적으로 실험했으며, 출시 이후에도 기존의 핵심 설계 결정을 되돌렸다. - “완성도와 작업 흐름”처럼 직접 측정하기 어려운 요소는 정량 지표만으로 판단하기 어렵기 때문에 사용자 의견을 수집하고 신중하게 해석했다. - UI3는 2024년 10월 10일 모든 사용자에게 제공될 예정이었다. ## 도킹 패널과 플로팅 패널 실험 - 탐색 패널과 속성 패널은 Figma 인터페이스의 핵심 요소였기 때문에 다양한 실험이 진행됐다. - 마우스를 올릴 때만 나타나는 패널 - 캔버스 위에 떠 있는 패널 - 제품 전반에 일관되게 적용되는 플로팅 UI - 최종적으로 초기 UI3에서는 패널을 플로팅 방식으로 제공했다. - 플로팅 패널의 장점은 단순하고 친근한 인터페이스를 만들며, 제품 생태계 전체에 일관된 경험을 제공할 수 있다는 점이었다. - 그러나 오픈 베타 이후 실제 사용 데이터를 분석한 결과 다음 문제가 드러났다. - 작은 화면에서 캔버스 공간을 과도하게 차지함 - 디자인이 패널 뒤에서 일부 가려져 시각적으로 산만함 - 눈금자가 디자인에서 멀어져 활용성이 떨어짐 - 장시간 Figma를 사용하는 사용자들의 작업 속도를 저하시킴 - Figma는 “속도는 기능”이라는 판단 아래, 정식 출시에서는 탐색·속성 패널을 다시 고정했다. - 다만 패널 크기는 조절할 수 있도록 해 사용자가 작업 환경에 맞게 유연하게 배치할 수 있게 했다. - 플로팅 UI 자체가 완전히 사라지는 것은 아니다. - Figma Design의 Minimize UI 상태 - Figma Slides의 그리드 보기 - FigJam의 기본 인터페이스 - 모든 Figma 제품의 하단 툴바 에서는 플로팅 요소가 유지된다. ## Minimize UI와 작업 집중 - 기존의 Hide UI 기능은 작업물을 전면에 보여주지만, UI를 숨기거나 다시 표시하는 방식이 다소 극단적이고 제한적이었다. - UI3의 Minimize UI는 측면 패널을 접어 캔버스를 넓히면서도 필요할 때 도구에 쉽게 접근할 수 있도록 설계됐다. - 특히 다음 환경에서 유용하도록 개선됐다. - 작은 화면 - 분할 화면 - 원격·하이브리드 근무 환경 - Figma는 UI가 항상 많이 표시되어야 한다는 전제 대신, “작업이 캔버스의 중심이어야 한다”는 원칙을 장기적인 기준으로 삼았다. ## 확장성을 고려한 정보 구조 - UI3에서는 기능을 단순히 재배치하는 데 그치지 않고, 앞으로 추가될 기능을 수용할 수 있는 구조를 만들려 했다. - 기존 인터페이스는 새로운 기능을 넣을 때마다 화면에 요소를 억지로 끼워 넣는 방식에 가까웠다. - 새 탐색 패널은 다음과 같은 논리적 순서로 정보를 배치한다. - 파일 이름 - 브랜치 이름 - 프로젝트 이름 - 페이지 - 레이어 - 향후 파일 이동이나 탐색 방식이 추가되더라도 기존 구조를 크게 훼손하지 않고 확장할 수 있도록 설계했다. - 이는 현재의 편의성뿐 아니라 아직 구현되지 않은 미래의 기능까지 고려한 정보 구조다. ## 변화하는 인터페이스 관습과 블렌드 모드 - Figma는 UI3에서 과거 인터페이스의 일부 관습을 그대로 유지하기보다, 현재 사용자가 익숙하게 받아들이는 패턴을 재검토했다. - 예를 들어 다음과 같은 방식은 기술적으로는 다소 비직관적일 수 있지만 널리 정착됐다. - Shift 키를 사용하는 명령 단축키 - 화면에 거의 드러나지 않는 스크롤바 - 블렌드 모드 역시 과거의 사용 방식과 새로운 인터페이스 관습 사이의 균형을 맞추는 대상으로 다뤄졌다. - 제공된 글 내용은 블렌드 모드 섹션 초반에서 끝나므로, 구체적인 변경 사항은 확인할 수 없다. UI3의 가장 실용적인 교훈은 큰 폭의 redesign도 가설로 시작하되 실제 사용성 검증을 거쳐 수정해야 한다는 점이다. 새로운 UI를 도입할 때는 시각적 새로움보다 캔버스 공간, 작업 속도, 화면 크기별 사용성, 장시간 사용자의 효율을 우선적으로 측정하는 것이 바람직하다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

Figma의 시리즈 D 라운드

Figma는 2020년 4월, a16z의 피터 레빈과 마크 앤드리슨이 주도한 5,000만 달러 규모의 Series D 투자를 유치했다고 발표했다. 코로나19로 재택근무가 확산되면서 Figma는 인터페이스 디자인을 넘어 화이트보딩, 다이어그램, 슬라이드 제작 등 다양한 협업 도구로 활용되고 있었다. 확보한 자금은 핵심 디자인·프로토타이핑 플랫폼의 성능과 안정성을 강화하고, 시각적 커뮤니케이션과 창작을 위한 새로운 제품을 개발하는 데 사용될 예정이다. ## Series D 투자 유치 - Figma는 총 5,000만 달러의 Series D 투자를 유치했다. - 투자는 a16z의 피터 레빈과 마크 앤드리슨이 주도했다. - 기존 투자자인 Index, Greylock, KPCB, Sequoia, Founders Fund도 참여했다. - Durable Capital의 헨리 엘렌보겐과 여러 엔젤 투자자도 새롭게 투자자로 합류했다. ## 코로나19와 Figma 사용 확대 - 재택근무로 집과 직장의 경계가 흐려지면서 Figma의 사용량이 크게 증가했다. - 기존의 인터페이스 디자인과 프로토타이핑 외에도 다음과 같은 작업에 활용됐다. - 시각적 화이트보딩 - 다이어그램 작성 - 프레젠테이션 제작 - 온라인 환경에 맞춘 새로운 활용 사례도 등장했다. - 가상 디자인 스프린트 - 도시 설계 및 시각화 - Minecraft 스킨 제작 - 이는 Figma가 전문 디자이너만을 위한 도구가 아니라, 다양한 사용자가 시각적으로 생각하고 협업하는 플랫폼으로 확장되고 있음을 보여준다. ## 투자금의 활용 방향 - 핵심 디자인 및 프로토타이핑 플랫폼에 대한 투자를 확대한다. - 팀이 함께 작업할 수 있는 환경의 성능과 신뢰성을 강화한다. - Figma를 더욱 강력하고 안정적인 협업 도구로 발전시킨다. - 디자이너뿐 아니라 비디자이너까지 포함한 전 세계 커뮤니티를 지원한다. - 시각적 커뮤니케이션과 창작을 위한 새로운 용도의 전용 제품을 개발한다. ## Figma의 장기 비전 - Figma의 비전은 디자인을 모든 사람이 이용할 수 있도록 만드는 것이다. - 웹 기반 디자인 도구를 바탕으로 협업과 접근성을 확대하려 한다. - 디자인을 특정 직군의 전문 업무가 아니라, 아이디어를 표현하고 공유하는 보편적인 커뮤니케이션 방식으로 확장하려는 방향이 드러난다. - 회사는 이러한 목표를 추진하기 위해 추가 인재를 채용한다고 밝혔다. 이번 발표는 Figma가 단순한 디자인 소프트웨어를 넘어, 원격 협업과 시각적 사고를 지원하는 범용 창작 플랫폼으로 성장하려는 전략을 보여준다. 사용자라면 디자인 작업뿐 아니라 브레인스토밍, 문서 시각화, 발표 자료 제작 등 다양한 협업 용도로 Figma를 활용해볼 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

경청의 기술: 한 디

디자이너에게 중요한 역량은 말하기보다 깊이 듣고, 사람과 맥락의 실제 동기를 이해하는 것이다. IDEO의 인터랙션 디자이너 Mike Godlewski는 음악 감상 모임 ‘Art of Listening’을 통해 화면 밖의 몰입과 공동체적 경험을 설계했다. 이 프로젝트는 디지털 작업에서 벗어난 아날로그 경험이 디자이너의 창의력과 시야를 회복시키고, 결국 인터페이스 디자인에도 새로운 에너지를 줄 수 있음을 보여준다. ## 듣기를 중심에 둔 디자인 태도 - 좋은 디자이너는 말하기보다 더 많이 듣는다. - 디자인은 인간의 문제를 해결하는 일이므로, 표면적인 요구보다 사용자의 동기와 맥락을 깊이 파악해야 한다. - 글은 존 마에다의 “디자인은 문제에 대한 해결책이고, 예술은 문제에 대한 질문”이라는 관점을 바탕으로 디자인과 예술의 차이를 조명한다. ## 영화 모임에서 시작된 음악 실험 - Mike는 친구의 영화 모임에서 아이디어를 얻었다. - 참가자들이 영화를 조용히 감상한 뒤 토론하는 단순한 규칙이 집중적이고 지적인 대화를 가능하게 했다. - 그는 같은 구조를 음악에 적용해, 일상에서 부족했던 공동 청취 경험을 만들고자 했다. - 목표는 디지털 기기와 사람 간의 불필요한 방해를 줄이고, 음악과 자기 성찰에 집중할 수 있는 의도적인 환경을 조성하는 것이었다. ## ‘Art of Listening’의 진행 방식 - 참가자들은 거실에 모여 한 장의 앨범을 처음부터 끝까지 함께 듣는다. - 감상 중에는 대화, 휴대폰 확인, 지각이 금지된다. - 대신 음악을 들으며 그림을 그리거나, 떠오른 기억을 기록하거나, 눈을 감고 소리에만 집중할 수 있다. - 앨범이 끝난 뒤에는 각자의 감상과 생각을 나누고, 스케치나 기록물을 서로 보여준다. - 단순한 규칙을 통해 음악을 배경음이 아니라 의식적으로 경험하는 대상으로 바꾼다. ## 몰입을 만드는 큐레이션과 준비 - Mike는 리듬과 서사적 흐름을 세심하게 구성한 앨범을 선정한다. - 아티스트 인터뷰, B-side 곡, 팟캐스트, Instagram 게시물 등 다양한 자료를 조사한다. - 그중 앨범을 이해하는 데 도움이 되는 사진과 인상적인 인용문을 선별한다. - 감상 중에는 이 자료를 모니터에 보여주어 Spotify를 무심코 재생하는 것보다 풍부한 배경과 맥락을 제공한다. - 따라서 경험의 품질은 음악 자체뿐 아니라 사전 조사와 정보 큐레이션에도 달려 있다. ## 인터페이스 디자인과 아날로그 경험의 연결 - 음악 모임은 시각적이고 체계적인 인터페이스 디자인과 전혀 달라 보이지만, Mike에게는 창작 에너지를 충전하는 활동이다. - 디자이너들은 필름 카메라, 레터프레스, 제본처럼 화면 밖의 아날로그 작업에 끌리는 경향이 있다. - 오프라인 활동은 인터넷과 스크린에 과도하게 몰입하는 상태에서 벗어나 감각과 관찰력을 회복하게 한다. - 새로운 분야의 경험은 기존 전문 영역과 직접 연결되지 않더라도 창의적 사고의 재료가 될 수 있다. ## 예상하지 못한 창작의 확장 - Mike는 불과 1년 전만 해도 직접 행사를 기획하게 될 것이라고 생각하지 못했다. - 그러나 창작 활동은 처음부터 계획한 경로가 아니라 예상하지 못한 관심과 경험을 통해 발견되기도 한다. - 디자이너는 자신의 직무와 정확히 일치하지 않는 프로젝트에도 도전함으로써 새로운 역량과 관점을 얻을 수 있다. 화면 중심의 작업을 하는 디자이너라면 정기적으로 디지털 기기를 내려놓고, 음악 감상·드로잉·대화처럼 집중과 감각을 회복하는 활동을 시도해볼 만하다. 특히 경험을 설계할 때는 복잡한 기능보다 명확한 규칙, 세심한 큐레이션, 참여자의 몰입을 방해하지 않는 환경이 더 큰 효과를 낼 수 있다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

스탠퍼드와 UC 버

인터페이스 디자인이 중요해지고 있지만 대학 교육에서는 여전히 주변적인 분야이며, 교수들은 제한된 시간 안에 디자인 원리와 복잡한 도구 사용법을 함께 가르쳐야 한다. 이 글은 스탠퍼드와 UC 버클리 교수들이 Figma를 선택한 이유로 접근성, 낮은 비용, 쉬운 학습 곡선, 실시간 협업과 피드백 기능을 제시한다. Figma를 활용하면 도구 교육보다 디자인 사고와 원칙 자체에 수업의 초점을 맞출 수 있다는 것이 결론이다. ### 대학에서 인터페이스 디자인을 가르치기 어려운 이유 - 인터페이스 디자인 과목은 대학의 주류 커리큘럼에 널리 포함되어 있지 않다. - 관련 수업은 여러 전공 사이에 배치된 소수의 융합 과목인 경우가 많다. - 교수와 조교는 짧은 수업 시간 안에 기술 개념과 디자인 원리를 모두 다뤄야 한다. - 기존 디자인 도구는 기능이 복잡해, 학생들이 실제 디자인보다 도구 사용법을 익히는 데 많은 시간을 쓰게 된다. ### 다양한 컴퓨터에서 사용할 수 있는 클라우드 기반 도구 - Figma는 클라우드에서 실행되므로 웹 브라우저만 있으면 사용할 수 있다. - Windows PC, Linux 컴퓨터, Chromebook 등 운영체제와 기기 종류에 크게 구애받지 않는다. - 별도의 대형 프로그램을 설치할 필요가 없다. - 개인 컴퓨터가 없는 학생도 인터넷이 가능한 장소에서 과제를 수행할 수 있다. - 학교가 특정 하드웨어나 운영체제를 일괄적으로 제공하지 않아도 수업을 운영하기 쉽다. ### 교육기관에 무료로 제공되는 Figma - Figma는 교육기관을 대상으로 프리미엄 기능을 무료로 제공한다고 설명한다. - 저소득층 학생도 비용 때문에 수업 참여를 포기할 필요가 없다. - 대학이 고가의 소프트웨어 라이선스 계약을 별도로 협상할 필요가 없다. - 교수는 복잡한 구매 절차 없이 바로 수업에 도입할 수 있다. ### 짧은 학습 시간과 단순한 기능 구성 - Figma는 디지털 디자인에 필요한 기능에 집중해 도구를 비교적 가볍고 직관적으로 구성했다. - UC 버클리 교수들은 Figma를 “가볍고”, “단순하며”, “직관적”이라고 평가했다. - 디자인 경험이 없는 학생도 한 시간 이내에 기본 사용법을 익힐 수 있다고 소개한다. - 교수와 조교는 도구의 세부 기능을 반복해서 설명하기보다 디자인 원칙을 가르치는 데 집중할 수 있다. - 학생 역시 도구 조작에 어려움을 겪기보다 배운 원칙을 실제 결과물에 적용하는 데 에너지를 사용할 수 있다. ### 기술 문제를 지원팀에 맡길 수 있음 - 대규모 수업과 제한된 예산 때문에 교수와 조교의 지원 여력은 부족할 수 있다. - Figma 앱 내부의 채팅을 통해 지원팀에 기술적인 질문을 할 수 있다. - 평일 기준 24~48시간 이내 답변을 제공한다고 설명한다. - 학생들이 기본적인 기술 문제를 직접 지원팀에 문의하면 교수와 조교는 수업 내용이나 중요한 디자인 질문에 집중할 수 있다. ### 최신 작업물을 링크 하나로 확인 - 브라우저 기반이므로 학생들이 파일을 별도로 저장하거나 내보내서 제출할 필요가 없다. - 교수는 디자인 파일 URL을 열어 언제든 최신 작업물을 확인할 수 있다. - 파일을 직접 검토하거나 학생이 작업하는 과정을 실시간으로 볼 수 있다. - 파일 버전을 주고받거나 최신본을 확인하는 데 드는 커뮤니케이션 비용이 줄어든다. ### 댓글과 버전 기록을 통한 피드백 - 교수는 특정 디자인 프레임에 댓글을 고정해 구체적인 피드백을 남길 수 있다. - 학생은 어떤 요소에 대한 의견인지 명확히 확인할 수 있다. - 이메일로 파일을 다시 보내지 않아도 같은 파일에서 피드백을 실시간으로 확인할 수 있다. - 대면 미팅이 아니어도 학생이 피드백을 반영하고 반복적으로 디자인을 개선할 수 있다. - 버전 기록을 통해 디자인이 어떻게 발전했는지 확인할 수 있다. - 그룹 프로젝트에서는 구성원별 작업 기여도도 파악할 수 있다. ### 하나의 파일에서 실시간 공동 작업 - 여러 학생이 같은 디자인 파일에 동시에 접속해 작업할 수 있다. - 파일이 손상되거나 서로의 작업을 덮어쓸 걱정 없이 협업할 수 있다. - 최신 파일을 이메일로 주고받거나, 한 명씩 번갈아 작업할 필요가 없다. - 그룹 프로젝트에서 작업 과정과 결과물을 하나의 공유 공간에서 관리할 수 있다. 수업용 디자인 도구를 선택할 때는 기능의 많고 적음보다 학생들의 접근성, 학습 난이도, 협업 및 피드백 방식을 우선적으로 검토하는 것이 좋다. 이 글의 사례처럼 설치와 비용의 장벽이 낮고 실시간 공유·댓글·버전 관리가 가능한 도구를 사용하면, 수업의 중심을 도구 훈련에서 디자인 원리와 반복적인 개선 과정으로 옮길 수 있다.

원문 읽기(새 탭에서 열림)
figma2분 읽기큐레이션 요약

처음부터 슬랙과 함께 |

Figma는 협업형 인터페이스 디자인 도구의 핵심 협업 경험을 자체 메시징 기능이 아니라 Slack 위에 구축하기로 했다. 디자이너들이 Slack을 일상적으로 사용하고, Slack 사용자가 디자인 과정을 더 개방적으로 공유하는 경향이 있었기 때문이다. 따라서 Figma 팀을 Slack 팀과 연결하고 파일 알림도 Figma가 아닌 Slack으로 전달하는 전략이 통합과 사용자 경험 측면에서 효과적이었다. ## Slack 사용자를 관찰한 배경 - Figma는 제품을 개발하며 디자이너들이 파일 저장, 사양 작성, 제품 의사결정 등을 어떻게 협업하는지 조사했다. - 인터뷰한 디자이너 중 절반 이상이 Slack을 하루 종일 사용한다고 답했다. - Slack 사용 여부는 다른 협업 방식과도 연관되어 있었다. - Slack을 사용하는 디자이너일수록 디자인 과정을 팀에 더 개방적이고 투명하게 공유하는 경향이 있었다. - 이를 통해 Slack이 단순한 채팅 도구가 아니라 디자인 협업의 중심 채널이 될 수 있다고 판단했다. ## 중복 기능을 만들지 않은 이유 - Figma는 디자인에 대한 커뮤니케이션을 지원하는 제품이므로, 자체적으로 메시지·알림 기능을 구현하고 싶은 유혹이 있었다. - 하지만 Slack과 비슷한 기능을 다시 만들면 다음과 같은 문제가 생긴다. - 사용자가 메시지를 확인할 장소를 하나 더 관리해야 한다. - 팀을 Figma와 Slack 양쪽에서 별도로 설정해야 한다. - 이미 익숙한 협업 흐름이 여러 서비스로 분산된다. - Figma는 사용자가 또 다른 메시지함을 확인하도록 만들기보다, 기존에 사용 중인 Slack을 협업 기반으로 활용하기로 했다. ## Figma와 Slack의 긴밀한 통합 - Figma의 협업 모델에서 “Figma 팀”은 “Slack 팀”과 연결된다. - Figma 파일에서 발생하는 알림은 Figma 내부가 아니라 Slack을 통해 전달된다. - 사용자는 Slack에서 디자인 관련 소식을 확인하고 팀원과 논의할 수 있다. - 이는 Slack을 단순한 외부 연동 대상이 아니라 Figma 협업 경험의 기반 플랫폼으로 활용한 결정이다. ## 플랫폼 전략과 사업적 판단 - Figma는 Slack 플랫폼이 공식적으로 출시되기 전부터 Slack을 플랫폼으로 바라보고 통합을 준비했다. - Slack 중심의 협업 구조는 당시로서는 큰 전략적 선택이었지만, 초기 성과를 통해 그 판단이 효과를 내고 있다고 평가했다. - 글은 앞으로 다른 기업들도 자체 기능을 무작정 복제하기보다, 사용자가 이미 익숙한 플랫폼 위에 제품 경험을 구축할 가능성이 커질 것이라고 전망한다. 실용적으로는 새로운 협업 기능을 개발할 때 자체 메시징·알림 시스템을 추가하기 전에, 사용자가 이미 매일 사용하는 도구와 자연스럽게 연결하는 방식을 우선 검토할 필요가 있다.

원문 읽기(새 탭에서 열림)