techlist.io
KREN

Figma/사용자 인터페이스

63 개의 포스트

figma3분 읽기큐레이션 요약

로빈 캐너와의 Q

Robyn Kanner의 인터뷰는 디자인을 특정 직함이나 완벽한 결과물로 한정하지 말고, 끊임없이 만들고 협업하며 현재의 문제를 해결하는 태도를 강조한다. 그녀는 Biden-Harris 캠페인의 크리에이티브 디렉터로서 JoeBiden.com부터 캠페인 전용기까지 모든 작업을 하나의 Figma 파일에서 제작한 경험을 소개했다. 디자인의 성취는 개인의 명성보다 공동의 목표를 이루는 데 있으며, 그녀에게 가장 큰 성과는 Joe Biden의 당선을 도운 것이다. ## Biden-Harris 캠페인과 대규모 협업 - 2020년 미국 대선에서 Biden-Harris 디자인팀의 크리에이티브 디렉터로 활동했다. - 웹사이트인 JoeBiden.com부터 캠페인 전용기 디자인까지 다양한 결과물을 제작했다. - 캠페인 전체 작업을 하나의 Figma 파일에서 진행하며 협업과 통합된 디자인 작업 방식을 보여줬다. - 그녀가 꼽은 커리어 최대 성취는 “Joe Biden의 당선을 도운 것”이었다. - 좋은 팀은 어려운 일을 함께 겪으며 서로를 지지할 때 만들어진다고 설명했다. - 좋은 협업자는 주변 사람들이 기여할 수 있도록 공간을 만들어주는 사람이라고 답했다. ## 디자인을 대하는 태도 - 창작 과정을 한 단어로 표현하면 “끈질김(Relentless)”이라고 답했다. - 완벽한 디자인은 없으며, 디자인 자체를 두려워할 필요도 없다고 말했다. - 다른 사람의 디자인을 부러워하거나 대신 만들고 싶어 하기보다 각자의 경로를 존중해야 한다고 강조했다. - 디자인은 과거의 평가보다 지금 필요한 것을 만드는 행위이며, 이를 “NOW”라고 표현했다. - 젊은 디자이너에게 특정 직함에 자신을 가두지 말고, 단순히 무언가를 만들라고 조언했다. ## 도구보다 중요한 사회적 관점 - 디자인 업계에서 과대평가된 것으로 “코드”를, 과소평가된 것으로 “사회학”을 꼽았다. - 이는 디자인을 구현 기술만의 문제가 아니라 사람과 사회, 맥락을 이해하는 활동으로 본다는 의미다. - 가장 좋은 디자인은 색상이나 형식만으로 결정되지 않고, 그것이 사용되는 환경과 사람들의 행동을 고려해야 한다. - 그녀가 선호하는 UI 폰트는 Decimal과 Mercury이며, 색상 표현 방식은 Hex·RGB·HSL 모두를 사용한다고 답했다. - 디자인에서 타이포그래피와 색상 중 하나만 고르기보다 둘 다 중요하게 본다. ## 제약을 넘어서는 창작 - 최근 작업에서 Safari의 애니메이션 처리 방식 때문에 제약을 느꼈다고 말했다. - 도구가 애니메이션 구현을 제한하는 상황을 아쉬워하며, 창작자가 기술적 환경에 의해 제한되지 않기를 바라는 태도를 드러냈다. - 언젠가 화성에 그라디언트를 적용해보고 싶다는 답변은 현실적 제약을 넘어서는 상상력을 상징한다. - 가장 좋아하는 Figma 기능으로는 “모두”를 꼽았으며, 특히 Shift+H 단축키를 언급했다. - Figma가 창작 방식을 혁신했다고 평가하며, 기능 자체보다 자유롭게 만들고 협업할 수 있는 환경을 중요하게 봤다. ## 개인적 취향과 창작자의 인간적인 면 - 1990년대의 미학을 되살릴 수 있다면 웹이나 Apple 디자인보다 음악가 Jeff Buckley를 선택하겠다고 답했다. - 최상의 창작 상태는 이른 아침이나 늦은 밤이라고 말했다. - 디자인 비평에 초대하고 싶은 사람으로 농구선수 Michael Jordan을 꼽았다. - 캠페인 기간 동안 긴 하루를 마친 뒤 긴장을 풀기 위해 게임 *Madden*을 즐겼다고 소개했다. - 최근 인터넷에서 좋아한 콘텐츠로 BROCKHAMPTON의 “BUZZCUT”을 언급했다. - 디자인 관련 소셜미디어 담론, 특히 Design Twitter에는 큰 관심이 없다고 선을 그었다. ## 실용적인 시사점 디자이너는 직함이나 특정 도구에 자신을 한정하기보다 문제를 해결하기 위해 직접 만들고, 협업 과정에서 다른 사람의 참여 공간을 확보해야 한다. 또한 시각적 완성도뿐 아니라 사회적 맥락과 사용자의 현실을 이해하고, 기술적 제약을 비판적으로 바라보는 태도가 중요하다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figmadesign-collaborationtypography+4
figma3분 읽기큐레이션 요약

기능 비하인드

Figma는 Community 파일에서 사용자와 제작자가 더 깊이 소통할 수 있도록 일반 댓글과 캔버스 위치에 연결되는 컨텍스트 댓글을 도입했다. 기존 에디터 댓글 기능을 그대로 재사용하는 작업으로 시작했지만, 읽기 전용 파일 뷰어를 양방향 커뮤니케이션 공간으로 바꾸면서 UI·성능·공간 설계 문제가 발생했다. 최종적으로는 사용자가 캔버스를 클릭하면 전체 화면 댓글 보기로 전환하는 방향을 택했다. ## 커뮤니티에 댓글이 필요했던 이유 - Figma Community는 파일과 플러그인을 공유하고 발견하는 공간이었지만, 초기에는 제작자와 사용자 간 직접적인 소통 수단이 부족했다. - 글쓴이는 파일의 프로토타입 시작 프레임 오류를 발견했지만, 제작자에게 연락하기 위해 개인 웹사이트와 트위터를 거쳐 이메일을 찾아야 했다. - 이러한 경험을 개선하려면 단순한 리소스 공유를 넘어 질문, 의견, 피드백을 쉽게 주고받을 수 있어야 했다. - 이를 위해 두 가지 댓글 방식을 구상했다. - **일반 댓글**: 파일 아래 피드 형태로 표시 - **컨텍스트 댓글**: 에디터의 댓글처럼 파일 속 특정 위치에 연결 ## 기존 댓글 기능을 커뮤니티에 적용하며 생긴 문제 - 처음에는 기존 에디터 댓글 UI와 코드를 파일 미리보기에 그대로 덧붙이면 될 것으로 예상했다. - 하지만 다음과 같은 기술적 수정이 필요했다. - 뷰포트 정보를 주고받을 수 있도록 기존 iframe 기반 파일 미리보기 구조를 교체 - 댓글 수가 많아질 때 발생할 수 있는 성능 문제 검토 - 더 큰 어려움은 코드보다 상호작용 설계였다. - 에디터 내부 댓글과 비슷해 보이려면, 읽기 전용 커뮤니티 뷰어에서는 오히려 다른 상호작용을 설계해야 했다. - 기존 Community는 제작자가 콘텐츠를 공개하고 사용자가 이를 소비하는 일방향 구조였지만, 댓글은 사용자에서 제작자로 향하는 새로운 소통 경로를 만들었다. - 특히 컨텍스트 댓글은 일반적인 세로형 댓글 피드와 달리 다음 문제를 해결해야 했다. - 댓글을 디자인의 특정 지점에 고정하는 방법 - 댓글을 보면서 캔버스를 이동하고 탐색하는 방법 - 댓글 기능이 기존의 편안한 읽기 전용 경험을 방해하지 않도록 하는 방법 ## 초기 디자인 탐색과 협업 - 엔지니어링, 디자인, 제품 팀은 개발 과정 내내 긴밀한 피드백 루프를 유지했다. - 정적인 와이어프레임보다 댓글 생성과 캔버스 이동을 보여주는 GIF와 인터랙션 프로토타입을 적극 활용했다. - 여러 시안을 통해 다음과 같은 방향을 탐색했다. - 댓글 피드를 배치할 위치 - 캔버스 미리보기에서 댓글을 확인하는 방식 - 댓글 위치를 이해하기 위한 미니 뷰어와 전체 화면 뷰어 - 구체적인 프로토타입 덕분에 기술적 실현 가능성, UI 예외 상황, 출시 일정에 따라 기능 범위를 빠르게 좁힐 수 있었다. ## 초기 출시를 위한 세 가지 목표 - 사용자가 최대한 빠르고 쉽게 댓글 기능에 진입하도록 해 참여를 유도한다. - 컨텍스트 댓글이 달린 파일 위치를 충분히 크게 보여주어 사용자가 댓글의 의미와 디자인 맥락을 이해하도록 한다. - 출시 일정 안에서 구현 가능하고 지나치게 복잡하지 않은 해결책을 선택한다. ## 전체 화면 기반 컨텍스트 댓글 - 위 목표와 제약을 바탕으로 컨텍스트 댓글은 **전체 화면 보기에서만** 표시하도록 결정했다. - 전체 화면은 댓글이 연결된 디자인 영역을 충분히 확인할 수 있는 공간을 제공한다. - 사용자가 축소된 캔버스를 클릭하면 전체 화면 뷰어로 확장되도록 설계했다. - 반대로 축소된 캔버스에서는 클릭과 패닝을 비활성화해, 일반적인 파일 탐색 경험과 댓글 상호작용이 충돌하지 않도록 했다. - 결과적으로 댓글 기능을 기존 파일 뷰어에 무리하게 끼워 넣기보다, 댓글을 확인하고 위치를 탐색하는 별도의 집중된 경험으로 분리했다. ## 실용적인 시사점 기존 기능을 다른 제품 영역에 재사용할 때는 코드 복사보다 사용 맥락의 차이를 먼저 검토해야 한다. 특히 읽기 전용 화면에 편집기용 상호작용을 도입한다면, 기능 자체보다 진입 방식·공간 배치·탐색 흐름·성능과 같은 전체 사용자 경험을 함께 재설계하는 것이 중요하다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figmainteraction-designiframe+2
figma4분 읽기큐레이션 요약

교실에서 활용할 수 있는

Figma를 활용한 실습 중심 수업은 학생들이 디자인 도구를 익히는 동시에 사고·제작·협업 능력을 기르는 데 효과적이다. 글에서는 초급부터 중급까지 다양한 수준의 학생을 대상으로, Figma의 협업 기능과 컴포넌트·오토 레이아웃·그리드 등을 활용하는 교실 활동을 소개한다. 활동 결과물을 하나의 파일에 모아 갤러리처럼 공유하면 서로의 작업 과정과 디자인 스타일을 관찰하고 피드백할 수 있다. ## 수업 첫 주에 적합한 학생 트레이딩 카드 - 학생들이 소셜 미디어 프로필 형태의 자기소개 카드를 제작한다. - 학생 간 친밀감을 높이는 동시에 Figma의 기본 기능을 익힐 수 있다. - **Auto Layout**과 **컴포넌트**를 활용해 재사용 가능한 프로필 요소를 만든다. - 모든 학생이 같은 파일에서 작업하도록 하면 서로의 제작 과정과 스타일을 볼 수 있다. - 완성 후 별도의 페이지를 만들어 결과물을 갤러리처럼 전시한다. - 숙련된 학생은 직접 질문이나 아이스브레이커 요소를 추가할 수 있다. - 난이도: 초급 - 주요 기능: Auto Layout, Multiplayer Editing ## 도형 제작으로 기본 도구 익히기 - 펜 도구, 레이아웃 그리드, 속성 패널을 사용해 하트 모양을 제작한다. - 단순한 형태를 직접 만들며 Figma의 주요 도구에 대한 자신감과 사용 능력을 높인다. - 완성된 하트를 학생별로 전시해 다양한 해석과 스타일을 비교한다. - 추가 과제로 Smart Animate를 사용해 하트가 뛰는 듯한 애니메이션을 만들 수 있다. - 하트 외에 다른 도형을 디자인하고 스타일을 적용하게 할 수도 있다. - 난이도: 초급 - 주요 기능: Pen Tool, Properties Panel, Layout Grid, Smart Animate ## 탱그램으로 형태와 기하학 탐구하기 - 일곱 개의 조각으로 구성된 탱그램 퍼즐을 활용해 형태와 기하학을 학습한다. - 기본 도형을 조합해 동물과 같은 인식 가능한 이미지를 만든다. - 추상적인 형태도 제작하게 하여 기하학적 탐구를 확장한다. - 활동 전에 기하학의 역사에 관한 짧은 설명을 제공하면 학습 맥락을 이해하는 데 도움이 된다. - 숙련도를 높이려면 학생들이 다른 퍼즐을 직접 조사하고 재사용 가능한 퍼즐 세트를 제작하도록 할 수 있다. - 난이도: 초급 - 주요 기능: Components, 회전 및 정렬 ## 연구 결과를 시각화하는 디자인 리서치 페이퍼 - 학생들이 조사한 연구 결과를 설득력 있는 시각 자료로 표현한다. - 완성된 결과물을 공동 문서에 모아 학생들이 서로 읽고 댓글을 남기도록 한다. - 정보를 어떻게 배치하고 전달할지 고민하면서 시각적 위계와 커뮤니케이션 디자인 원리를 익힌다. - 결과물에 대한 토론을 통해 연구 내용뿐 아니라 편집과 시각화 방식도 함께 비평할 수 있다. - 난이도: 초급 - 주요 기능: Layout Grids, Keyboard Shortcuts ## 재사용 가능한 채팅 창 컴포넌트 만들기 - 학생들이 협업 문서 안에서 대화하고 시각적 피드백을 주고받을 수 있는 채팅 창을 제작한다. - 각자 직접 커스텀 컴포넌트를 만들어 향후 프로젝트에도 사용할 수 있도록 한다. - 단순한 화면 제작을 넘어 재사용성과 확장성을 고려한 컴포넌트 설계를 연습한다. - 실제 협업 프로젝트에서 활용할 수 있다는 점 때문에 학생들의 참여도가 높다. - 난이도: 중급 - 주요 기능: Auto Layout ## 제약 조건이 있는 협업 일러스트레이션 - 공통된 제약 조건 아래에서 하나의 통일된 일러스트레이션 또는 아이콘 시스템을 공동 제작한다. - 제한된 색상 팔레트, 특정 그리드 등 명확한 규칙을 적용해 일관된 결과물을 만든다. - 예시에서는 각진 형태의 맞춤형 그리드와 제한된 색상을 사용해 모바일 핸드북 앱의 내용을 설명하는 그래픽을 제작했다. - 협업 과정에서 학생들이 서로 돕고 비평하도록 하면 디자인 시스템과 피드백 능력을 함께 기를 수 있다. - 개별 작품의 완성도보다 여러 결과물이 하나의 시각적 체계로 보이는지가 중요하다. - 난이도: 중급 - 주요 기능: 색상 스타일, 그리드 및 협업 기능 ## 수업에 적용할 때의 공통 원칙 - 결과물만 평가하기보다 학생들이 같은 파일에서 작업하며 과정과 선택을 공유하도록 한다. - 완성된 작업을 갤러리로 구성하면 학급 전체의 다양한 접근 방식을 비교할 수 있다. - 초급 활동에서는 기본 도구와 형태 제작에 집중하고, 중급 활동에서는 컴포넌트와 협업 시스템 설계로 확장한다. - 기본 과제에 선택형 도전 과제를 추가해 숙련도가 높은 학생도 계속 탐구할 수 있게 한다. - Figma의 실시간 협업 기능을 활용하면 제작, 피드백, 토론을 하나의 작업 흐름 안에서 진행할 수 있다. 수업에서는 하트 만들기나 트레이딩 카드처럼 진입 장벽이 낮은 과제로 시작한 뒤, 탱그램·연구 시각화·협업 일러스트레이션처럼 형태, 정보 구조, 디자인 시스템을 요구하는 활동으로 난도를 높이는 방식이 효과적이다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figmacollaborative-designauto-layout+2
figma3분 읽기큐레이션 요약

Students Who Design이 온라인 강의실에

Students Who Design(SWD)는 Figma를 온라인 디자인 교육의 중심 도구로 활용해 학생 온보딩부터 파일 관리, 수업 진행, 과제 피드백까지 하나의 워크스페이스에서 운영한다. 학생들은 사전 녹화 강의를 자신의 속도로 학습하고, 공통 UI 키트와 템플릿을 바탕으로 실습하며, 강사는 학생 파일에 직접 들어가 비동기적으로 진행 상황을 확인하고 피드백을 제공한다. 핵심은 체계적인 파일 구조와 명명 규칙, 단계적인 과제 설계를 통해 온라인 환경에서도 협업과 멘토링을 유지하는 것이다. ## 수업 전 학생 온보딩 - 모든 학생에게 Figma 개인 계정을 먼저 만들도록 안내한다. - 수업 시작 전 에디터를 직접 사용해 기본 UI와 조작법에 익숙해지도록 한다. - 학생 계정을 SWD의 Figma 팀에 에디터로 초대한다. - 강의 자료는 Figma 팀 안에서 공유하고, Loom으로 슬라이드별 음성 설명을 녹화해 사전 학습 자료로 제공한다. - Figma는 학생과 교육자에게 무료로 제공되므로 별도의 유료 도구 없이 시작할 수 있다. ## 프로젝트와 파일 구조 정리 - 강의 자료, 학생 작업물, 스폰서십 자료, 브랜드 에셋을 같은 계정에서 관리하되 Figma의 프로젝트 기능으로 분리한다. - 프로젝트와 명명 규칙을 사용하면 커리큘럼을 지속적으로 개선하면서도 학생 작업과 교육 자료를 체계적으로 관리할 수 있다. - 학생은 마스터 파일을 `Intro DPD: 이름` 형식으로 저장한다. - 일관된 파일명 덕분에 강사가 학생 작업물을 빠르게 검색하고 과정별 파일을 한곳에서 확인할 수 있다. ## 공통 UI 키트와 템플릿 활용 - 학생마다 처음부터 디자인을 만들지 않도록 마스터 Figma 파일을 복제해 사용하게 한다. - 템플릿에는 Messenger 개선 과제에 필요한 기본 UI 구성 요소가 포함된다. - 공통 기반을 제공하면 초기 진입 장벽을 낮추고, 학생들이 디자인 문제와 사용자 경험에 집중할 수 있다. - 학생은 복제한 자신의 파일에서 과제를 수행하고 디자인 과정과 결과물을 계속 기록한다. ## 페이지 기반의 학습 과정 관리 - 하나의 파일을 수업 전체에서 계속 사용해 조사, 아이디어 발상, 디자인, 프로토타이핑을 연결한다. - Figma의 Pages 기능으로 과제와 디자인 단계를 구분한다. - 페이지 구성에는 다음 요소를 포함하도록 권장한다. - 탐색하기 쉬운 페이지 번호 - 디자인 완성도나 작업 내용을 설명하는 제목 - 아이디어, 레퍼런스, 탐색안, 수정 과정을 모아두는 페이지 - 페이지 구조가 통일되면 강사가 학생 파일에 들어갔을 때 진행 상황을 빠르게 파악할 수 있다. ## 단계적인 실습 수업 - 3주 과정은 Messenger 개선을 주제로 진행된다. - 사전 녹화 강의는 학생이 원하는 속도로 시청하고 노트를 작성한다. - 과제에는 매주 마감일을 두고, 강사는 마감 후 피드백을 제공한다. - 수업은 다음 순서로 구성된다. - 사용자 조사와 디자인 원칙 학습 - 전체 학생이 참여하는 아이디어 발산과 기능 우선순위 결정 - 각 학생이 고해상도 사용자 플로우 완성 - 마지막 단계에서는 앞선 과제에서 발전시킨 아이디어를 Figma 프로토타입으로 구현한다. - 같은 파일 안에서 프로토타입을 제작하므로 별도 파일을 옮기지 않고 강사에게 쉽게 공유할 수 있다. ## 온라인 환경에서의 디자인 피드백 - 비평과 피드백을 과정의 핵심 요소로 삼는다. 특히 초보 디자이너에게 반복적인 피드백은 중요하다. - 강사는 학생의 Figma 파일이나 특정 페이지에 직접 들어가 과제 완료 여부와 현재 탐색 중인 방향을 확인한다. - 물리적으로 옆에서 작업을 지켜보지 않아도 실시간 또는 비동기적으로 학생의 진행 상황을 확인할 수 있다. - 학생이 작업 과정을 동일한 파일에 축적하기 때문에 최종 결과뿐 아니라 조사와 반복 수정 과정까지 바탕으로 피드백을 제공할 수 있다. Figma를 온라인 수업에 도입할 때는 단순히 파일을 공유하는 것보다, 공통 템플릿·명명 규칙·페이지 구조·정기적인 마감일을 함께 설계하는 것이 효과적이다. 특히 학생 작업을 하나의 파일에서 지속적으로 발전시키고 강사가 직접 확인하는 방식은 원격 환경에서도 체계적인 멘토링을 가능하게 한다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figma프로토타이핑online-learning+2
figma3분 읽기큐레이션 요약

Figma 채용 담당자가 전하는

제품 디자인 포트폴리오는 자신의 경력을 모두 보여주는 자료가 아니라, 지원하는 역할에 맞는 역량을 짧은 시간 안에 전달하는 도구다. 채용 담당자나 디자인 리더는 포트폴리오를 몇 분 또는 몇 초 만에 훑을 수 있으므로, 대상 독자의 관점에서 정보를 선별하고 구조화해야 한다. 랜딩 페이지에서는 프로젝트를 일관되게 배치하고 실제 작업까지 한 번의 클릭으로 도달하게 하며, 프로젝트는 목표 직무와 산업에 맞춰 선택하는 것이 핵심이다. ## 채용 담당자의 관점에서 목표 설정 - 포트폴리오를 주로 검토하는 사람은 디자인 매니저, 크리에이티브 디렉터, 디자인 총괄, 디자인 부문 VP 등이다. - 이들은 회의와 인터뷰 사이에 제한된 시간으로 포트폴리오를 검토한다. - 짧은 시간 안에 다음 정보를 파악하려 한다. - 어떤 유형의 디자인을 하는지 - 어떤 역량과 관심사를 가졌는지 - 지원 직무에 적합한 경험이 있는지 - 디자인 문제를 어떻게 해결하는지 - 전반적인 디자인 능력이 어떤지 - 따라서 모든 경력을 빠짐없이 보여주기보다, 지원하는 역할과 가장 관련 있는 정보를 우선적으로 노출해야 한다. ## 랜딩 페이지: 프로젝트를 쉽게 파악하게 만들기 - 프로젝트 썸네일은 일관된 시스템으로 구성해야 한다. - 회사 로고를 보여준다면 로고 크기를 동일하게 맞춘다. - 작업 화면을 보여준다면 배경색, 그림자, 이미지 스타일 등을 통일한다. - 각 프로젝트에는 회사명, 담당 역할, 작업 매체 등 핵심 정보를 일정한 형식으로 표시한다. - 동일한 크기와 정돈된 디자인의 썸네일은 채용 담당자가 포트폴리오 전체를 더 쉽게 훑도록 돕는다. - 썸네일마다 차이를 주고 싶다면 우연히 어긋난 결과가 아니라, 특정 프로젝트의 중요도 등을 반영한 의도적인 레이아웃이어야 한다. ## 작업까지의 클릭 수 줄이기 - 방문자가 ‘소개 페이지 → 작업 메뉴 → 프로젝트 선택’처럼 여러 단계를 거치지 않도록 한다. - 랜딩 페이지에서 프로젝트 개요를 바로 볼 수 있게 구성하고, 실제 작업까지 한 번의 클릭으로 접근하게 만드는 것이 좋다. - 채용 담당자가 정보를 찾아 헤매도록 만들지 말고, 첫 화면에서 작업의 범위와 성격을 즉시 이해할 수 있어야 한다. ## 지원 목표에 맞는 프로젝트 선택 - 프로젝트는 자신의 전체 경력보다 희망하는 직무와 커리어 방향을 기준으로 선별한다. - 모바일, 웹, VR 중 원하는 분야의 경험을 강조한다. - 이커머스에서 핀테크나 헬스케어로 전환하고 싶다면 관련성이 높은 작업을 앞세운다. - 모든 프로젝트를 한 포트폴리오에 담아 경력의 폭을 보여주려는 방식은 오히려 핵심 메시지를 흐릴 수 있다. - 오래된 유명 브랜드 작업은 브랜드 이름만으로 포함하지 않는다. - 현재의 자신을 잘 보여주지 못하는 작업은 이력서에서 경력의 폭을 설명하는 데 활용한다. - 다만 널리 알려진 대표 작업처럼 현재도 의미가 큰 결과물은 예외적으로 강조할 수 있다. - 희망 분야의 실무 경험이 부족하다면 사이드 프로젝트로 해당 분야의 결과물을 만든다. - 예를 들어 모바일 중심 경력으로 웹 디자인 직무를 원한다면 웹을 우선한 프로젝트를 추가한다. - 인쇄 디자인에서 UX/UI로, 비주얼 디자인에서 UX 리서치로 이동하는 경우에도 같은 전략을 적용할 수 있다. - 가장 뛰어난 작업이 지원 분야의 산업이나 매체와 다르더라도, 단순히 그 이유만으로 포트폴리오 전체를 구성해서는 안 된다. 지원 목표를 보여줄 수 있는 관련 작업을 새로 만들거나 기존 작업을 적절히 재구성하는 것이 바람직하다. ## 실용적인 적용 방법 지원 직무를 먼저 한 문장으로 정한 뒤, 랜딩 페이지에는 그 직무와 가장 관련 있는 프로젝트를 일관된 썸네일 형식으로 배치하는 것이 좋다. 각 프로젝트에는 자신의 역할과 작업 매체를 명확히 적고, 방문자가 한 번의 클릭으로 핵심 결과물에 도달하도록 구성하면 채용 담당자의 제한된 검토 시간을 효과적으로 활용할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figma사용자 경험프로토타이핑+2
figma4분 읽기큐레이션 요약

Figma UI 개편:

Figma는 기능 구조를 크게 바꾸기보다 타이포그래피, 레이아웃, 색상, 아이콘 등 UI 표면을 다듬는 방식으로 시각적 리프레시를 진행했다. 기존 UI가 제품 성장에 따라 일관성을 잃고 한계에 부딪혔기 때문에, 전사적 브레인스토밍과 이슈 통합, 정성·정량 조사를 거쳐 변경 범위를 결정했다. 핵심은 모든 사용자를 만족시키려 하기보다 문제를 체계적으로 수집하고, 중요한 개선점에 집중하는 것이었다. ## 리디자인이 필요해진 배경 - Figma의 UI는 제품과 기능이 성장하면서 점점 일관성을 잃었다. - 기존 컴포넌트로 새로운 기능을 표현하기 어려워질 때마다 팀이 임시 컴포넌트와 맞춤형 해결책을 만들었다. - 그 결과 다음과 같은 문제가 누적됐다. - 서로 다른 형태의 테이블, 버튼, 입력 컨트롤 - UI 곳곳에 흩어진 여러 색조의 회색·빨강·파랑 - 기능마다 다른 알림과 대화상자 처리 방식 - 가독성, 여백, 아이콘 체계의 불일치 - 마지막으로 UI 전체를 검토했을 때는 아직 Multiplayer나 Components 같은 핵심 기능이 없었다. - 즉, 기존 UI의 기반이 현재의 Figma를 충분히 반영하지 못하게 된 것이 리프레시의 주요 배경이었다. ## 표면적 변화에 집중한 전략 - 목표는 사용자가 큰 혼란 없이 새 UI를 받아들이도록 만드는 것이었다. - 정보 구조나 제품의 기본 동작을 재설계하기보다는 다음과 같은 시각적 요소를 중심으로 개선했다. - 타이포그래피 - 레이아웃 - 색상 - 아이콘 - 컴포넌트의 시각적 일관성 - 출시 전 수개월 동안 정성적·정량적 조사를 진행했다. - 세부 변경 사항마다 여러 팀이 깊이 논의해 최종 결과에 동의하도록 했다. - 특히 디자이너는 시각적 변화에 민감하므로, 리디자인이 모든 사람에게 동일하게 환영받을 수 없다는 점도 고려했다. ## 1단계: 제한 없이 문제 수집하기 - 전체 디자인 팀이 참여하는 2시간 브레인스토밍 세션을 열었다. - 팀원들은 실제로 Figma를 사용하면서 제품의 구석구석을 살펴봤다. - 발견한 내용을 다음 방식으로 기록했다. - UI의 문제점과 불편한 점 - 마음에 드는 부분 - 관련 스크린샷 - 특정 문제가 미치는 영향에 대한 메모 - 모든 결과물을 Figma 파일에 모아 공동으로 검토했다. - 팀원들이 강하게 반응한 문제, 즉 모두가 “이건 심각하다”고 느낀 항목을 별도로 표시했다. - 이 반응은 어떤 문제가 사용자 경험에 큰 영향을 줄 가능성이 있는지 판단하는 초기 신호로 활용됐다. - 브레인스토밍 직후 결론을 내리지 않고 며칠간 거리를 둔 것도 중요했다. 시간이 지나면서 문제의 우선순위와 구성원들의 의견이 자연스럽게 바뀌었기 때문이다. ## 2단계: 문제를 통합하고 범주화하기 - 후속 회의에서 각 문제를 다시 검토하며 처음의 판단을 재평가했다. - 일부 문제는 생각보다 중요하지 않다고 판단했고, 다른 문제는 해결 필요성을 더 강하게 주장할 수 있도록 논거를 보완했다. - 긴 문제 목록을 팀원들에게 나누어 전달하고, 각자가 이를 포스트잇 형태의 짧은 항목으로 재작성했다. - 이 과정에서는 개별적인 증상을 그대로 옮기기보다 공통된 근본 문제로 추상화했다. - 예: “특정 화면의 알림 모양이 다르다” - 통합된 표현: “제품 전체의 알림 처리 시스템이 필요하다” - 비슷한 포스트잇을 함께 묶어 반복적으로 나타나는 주제를 확인했다. - 그 결과 다음과 같은 범주가 도출됐다. - 아이콘, 타이포그래피, 가독성, 색상 - 대화상자, 툴바, 말투 - 에디터와 파일 브라우저 - 모드, 팀 페이지, 속성 사이드바 - 컴포넌트, 레이어, 히스토리 - 공유, 퍼블리싱, 내보내기 - 포스트잇의 반복은 단순한 중복이 아니라 중요한 문제가 여러 방식으로 나타나고 있다는 신호가 되었다. - 다만 범주를 다시 “시각적 문제에서 기초 구조적 문제까지”라는 축으로 정렬하려 한 것은 지나치게 복잡한 접근이었다. ## 범주화 과정에서 얻은 교훈 - 문제를 조직화할 때 지나치게 추상적인 기준을 만들면 오히려 판단이 어려워진다. - “제품의 개성”처럼 거의 모든 문제를 포함할 수 있는 범주는 유용하지 않다. - 반대로 특정 대화상자 하나처럼 지나치게 좁은 범주도 전체적인 개선 방향을 잡는 데 적합하지 않다. - 가장 좋은 범주는 서로 비슷한 문제를 묶으면서도, 실제 개선 작업으로 이어질 수 있을 만큼 구체적이어야 한다. - 완벽한 분류 체계를 만드는 것보다 중요한 문제의 신호를 잡음에서 분리하는 것이 우선이다. ## 실무에 적용할 때의 추천 - 리디자인을 시작할 때 바로 해결책을 만들기보다, 먼저 팀 전체가 제품을 직접 사용하며 문제를 폭넓게 수집한다. - 각 문제를 개별 사례가 아닌 반복되는 시스템적 문제로 재정의한다. - 브레인스토밍 직후 결론을 확정하지 말고 일정한 숙고 시간을 둔다. - 범주화는 단순하고 이해하기 쉽게 유지하며, 지나치게 추상적이거나 복잡한 분류 축은 피하는 것이 좋다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figma디자인 시스템사용자 경험+2
figma4분 읽기큐레이션 요약

Figma 디자인 팀을 구축한 방법

Figma는 소규모 디자인팀을 빠르게 확장하면서도 채용 기준과 팀 문화를 체계적으로 정립하는 데 집중했다. 채용 역량을 명확히 정의하고, 인터뷰 피드백을 표준화하며, 채용 담당자를 디자인팀에 밀접하게 참여시킨 결과 1년 만에 1명 중심의 팀을 8명 규모로 성장시켰다. 글은 디자인을 공개적으로 수행한다는 Figma의 철학과 팀 구축 과정을 공유한다. ## 빠른 성장 속에서도 신중한 팀 확장 - 1년 전 Figma에는 핵심 제품 디자이너가 한 명뿐이었고, 일부 구성원이 파트타임으로 기능 개발을 지원했다. - 엔지니어 수가 늘면서 디자인 수요를 따라가기 어려웠지만, 초기 소규모 팀에서는 새 구성원 한 명이 업무 방식과 문화에 큰 영향을 미친다고 판단했다. - 1년 뒤 디자이너 8명으로 성장했고, 협업 크리틱과 명확한 목표·담당 영역을 갖춘 팀의 기반을 마련했다. - 내부 문화를 먼저 투명하게 정비한 뒤, 그 방법을 외부 디자인 커뮤니티와 공유하기로 했다. ## 채용 기준을 학습·분석·발전시키기 Figma는 Joel Califa의 디자인팀 구축 강연에서 얻은 방법을 바탕으로 채용 프로세스를 정리했다. - **Learn** - 다양한 디자인 직무 기술서를 검토한다. - 디자인팀을 구축한 리더들에게 조언을 구한다. - 팀에 필요한 기술과 태도를 폭넓게 파악한다. - **Analyze** - 필요한 역량을 종합적으로 목록화한다. - 회사 전체에 필요한 역량, 디자인팀이 책임져야 할 역량, 모든 디자이너의 기본 역량으로 세분화한다. - 실제로 필요한 기준과 있으면 좋은 기준을 구분한다. - **Evolve** - 팀에 새롭게 생긴 역량 공백과 변화한 회사 요구사항을 반영한다. - 가능하다면 외부 채용보다 내부 성장을 통해 역량을 보완한다. ## 역할 기대치와 문화적 적합성의 명문화 - 팀원들이 각자 다음 디자이너에게 원하는 조건을 작성한 뒤, Figma에서 함께 통합하며 합의점을 찾았다. - 모든 것을 잘하는 디자이너는 드물기 때문에, 반드시 필요한 역량과 타협 가능한 조건을 구분하는 데 초점을 맞췄다. - 제품 디자이너의 핵심 역량뿐 아니라 Figma의 가치인 **대담함(Be Bold), 포용성(Be Inclusive), 즐거움(Have Fun)**과 관련된 문화적 요소도 별도로 정리했다. - 팀원 스스로 같은 기준으로 평가해 보며, 자신들이 실제로 평가할 수 있는 역량만 후보자에게 요구하도록 했다. - 이 자기평가는 팀의 강점과 약점을 확인하고, 비현실적인 채용 기준을 줄이는 데 도움이 됐다. ## 구조화된 인터뷰와 편향 완화 - 초기에는 역할 기대치가 불명확했고, 면접 질문과 후보자 논의 방식도 일관되지 않았다. - 다양성과 포용성 워크숍을 통해 면접관이 무의식적으로 기존 편견에 맞춰 평가 기준을 바꿀 수 있다는 점을 인식했다. - 예를 들어 ‘좋은 디자이너는 자기주장이 강해야 한다’는 선입견이 팀의 합의된 기준보다 우선할 수 있다. - 이를 방지하기 위해 정리한 역량과 자질을 채용 도구인 **Lever**의 피드백 양식에 직접 반영했다. - 자유로운 서술만 받는 대신, 각 면접관이 합의된 기준에 근거해 구체적이고 비교 가능한 피드백을 남기도록 했다. ## 채용 담당자를 팀 안으로 참여시키기 - 명확한 기준만으로는 적합한 인재가 자동으로 찾아지지 않으므로 소싱, 추천, 네트워킹이 여전히 중요했다. - 채용 담당자 Korin을 디자인팀에 밀접하게 참여시켜 크리틱과 팀 미팅에 함께 참석하게 했다. - 이를 통해 채용 담당자가 팀의 실제 업무와 문화를 직접 이해하고, 후보자에게 업무를 더 정확하게 설명할 수 있었다. - 디자인팀과 채용팀의 긴밀한 협업이 적합한 인재를 찾는 데 큰 도움이 됐다. ## 팀 구성원의 다양한 배경 - **Lucy** - 시각 디자인과 모션 탐구가 돋보이는 포트폴리오를 통해 합류했다. - 웹사이트와 에이전시 업무부터 휴대용 CNC 기기의 인터페이스 디자인까지 다양한 영역을 경험했다. - 사물의 작동 이유를 끊임없이 질문하고 탐구하는 태도가 강점으로 소개된다. - **Marcin** - Google, Medium, Code for America에서 일한 UI 디자인 경력을 가진 베테랑으로 소개된다. - Google 기념일 로고로 Pac-Man을 재현할 만큼 구현 세부사항에 강하고, 링크 밑줄 같은 작은 인터페이스 요소까지 세심하게 다루는 인물로 묘사된다. Figma의 사례는 팀이 커질수록 채용을 개인의 감이나 인상에 맡기기보다, 필요한 역량을 명시하고 평가 기준을 표준화해야 한다는 점을 보여준다. 특히 채용 기준을 팀 내부에서 먼저 검증하고, 채용 담당자가 실제 업무 문화를 경험하게 하는 방식은 초기 스타트업과 소규모 조직에도 실용적인 접근이다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figma사용자 경험프로덕트 디자인+1
figma2분 읽기큐레이션 요약

오버레이를 소개합니다 |

Figma는 정적인 화면을 연결하는 기존 프로토타이핑의 한계를 보완하기 위해 Overlays 기능을 출시했다. 이를 통해 모달, 사이드바, 팝오버, 드롭다운처럼 기존 콘텐츠 위에 표시되는 요소를 유연하게 표현하고, 여러 오버레이를 겹쳐 상호작용할 수 있다. 결과적으로 반복적이고 번거로운 프로토타입 제작 과정을 단순화하고 실제 인터페이스에 가까운 사용자 흐름을 구현할 수 있게 됐다. ## 오버레이의 기본 동작 - 두 프레임을 연결한 뒤 속성 패널에서 목적지 프레임을 오버레이로 설정할 수 있다. - 오버레이의 표시 위치와 등장 방식을 설정할 수 있다. - 디바이스 기준 상대 위치를 지원해 모달이나 액션 시트를 자연스럽게 배치할 수 있다. - 툴팁이나 드롭다운처럼 특정 객체를 기준으로 표시해야 하는 요소는 오버레이 위치를 수동으로 조정할 수 있다. ## 여러 오버레이의 중첩 - 하나의 화면 위에 여러 오버레이를 연속해서 표시할 수 있다. - 다단계 구매 과정, 확인 대화상자 등 복잡한 상호작용 흐름을 표현하는 데 적합하다. - 여러 오버레이를 설정하는 방식도 단일 오버레이와 동일해 추가 학습 부담이 적다. ## 오버레이 내부 상호작용 - 오버레이 위의 요소에도 상호작용을 연결할 수 있다. - 프레임을 교체하는 ‘Swap’ 동작을 사용하면 전체 화면을 전환하지 않고 오버레이 내부 상태만 바꿀 수 있다. - 이를 활용해 버튼 호버, 선택 상태, 단계별 콘텐츠 변화 같은 인터랙션을 구현할 수 있다. - Swap은 오버레이를 자동으로 닫지 않으므로, 오버레이를 유지한 채 내용을 갱신하는 흐름에 유용하다. ## 연결 방식과 단축키 - 오버레이 연결을 드래그하는 동안 캔버스에서 바로 Back 또는 Close를 선택할 수 있다. - 레이어 패널에서 별도로 옵션을 찾지 않아도 되므로 연결 작업이 간결해졌다. - 목적지 프레임 위에서 Option 키를 누르면 Swap 연결을 빠르게 선택할 수 있다. - Swap 링크를 활용한 Back 동작은 Swap 연결을 건너뛰고, 마지막으로 Navigate를 사용했던 프레임으로 돌아가도록 구성할 수 있다. ## 기존 프로토타이핑 기능과의 결합 - Overlays는 기존의 인터랙션, 화면 전환, 전환 효과, 디바이스 프레임, 고정 객체, 고급 스크롤 기능과 함께 사용할 수 있다. - 단순히 화면 간 이동만 보여주는 것이 아니라 실제 제품의 메뉴, 팝업, 확인창, 상태 변화까지 하나의 프로토타입에서 재현할 수 있다. - 사용자 테스트나 이해관계자 검토에서 실제 사용 흐름에 가까운 경험을 제공한다. 실무에서는 모달·드롭다운·툴팁처럼 화면 위에 나타나는 요소를 별도 페이지로 복제하기보다 Overlays로 구성하는 것이 효율적이다. 오버레이 내부 상태 변화에는 Swap을 사용하고, 사용자가 흐름을 되돌아가야 할 때는 의도에 맞게 Back 또는 Close를 구분해 설정하는 것이 좋다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figma프로토타이핑interaction-design+2
figma3분 읽기큐레이션 요약

Figma에서 페이지를

Figma의 Pages는 하나의 파일 안에서 작업을 목적별로 나누어 정리하는 유연한 구조다. 글은 플랫폼, 기능, 디자인 단계, 원자적 디자인 방법론에 따라 Pages를 구성하는 네 가지 방식을 소개하며, 팀 규모와 프로젝트 특성에 맞는 체계를 선택하라고 제안한다. 적절히 나누면 협업, 프로토타이핑, 검색, 개발자 전달이 쉬워진다. ## Pages를 활용한 파일 구조화 - Figma 파일의 왼쪽 탭에 여러 Pages를 만들어 디자인을 분류할 수 있다. - 조직 방식에는 정답이 없으며 회사, 팀, 개인의 작업 방식에 따라 달라진다. - 디자인 파일을 무작정 한 곳에 쌓기보다 작업 목적에 맞게 구분하면 정리보다 디자인 자체에 집중할 수 있다. ## 플랫폼 또는 화면 크기별 구성 - Android, iOS, 데스크톱처럼 여러 플랫폼을 지원하는 제품에 적합하다. - 플랫폼별로 Page를 나누면 각 환경의 프레임 프리셋과 제약 조건을 적용하기 쉽다. - 각 Page에 독립적인 프로토타입을 구성할 수 있어 플랫폼별 사용자 테스트가 간편하다. - 반응형 디자인을 플랫폼별로 비교하고 관리하기에도 유리하다. ## 앱 기능별 구성 - 여러 디자이너가 다양한 기능을 동시에 개발하는 대규모 앱에 적합하다. - 프로필, 홈 화면 등 제품의 주요 기능을 각각 별도의 Page로 분리한다. - 담당 디자이너는 특정 기능에 집중하면서도 다른 Page를 참고해 전체 제품과의 일관성을 유지할 수 있다. - 기능별로 별도의 프로토타입을 만들어 특정 사용자 흐름만 독립적으로 테스트할 수 있다. ## 디자인 프로세스 단계별 구성 - 아이디어부터 최종 결과물까지 작업 진행 상태를 명확히 보여줄 수 있다. - 예를 들어 다음과 같이 Page를 구성할 수 있다. - 썸네일 → 와이어프레임 → 디자인 → 아카이브 - 문서·리서치 → 작업 중인 시안 → 리뷰 준비 - 사이트맵 → 와이어프레임 → 목업 → QA → 마케팅용 스크린샷 - `Done` Page에 완료된 디자인을 모으면 개발자는 실제로 구현해야 할 결과물을 쉽게 확인할 수 있다. - 초기 아이디어와 브레인스토밍을 별도 Page에 두면 완성도 높은 화면이 작업 중인 시안에 묻히지 않는다. - 팀이 복잡한 체계를 원하지 않는다면 단순히 “진행 중”과 “완료” 정도로 나누는 방식도 가능하다. ## Atomic Design 방법론에 따른 구성 - 디자인 시스템을 원자적 디자인 방식으로 운영할 때 적합하다. - 구성 요소의 계층에 따라 Page를 분리한다. - Atoms: 타이포그래피, 아이콘 등 기본 요소 - Molecules: 버튼 등 조합된 컴포넌트 - Organisms: 전체 페이지처럼 복잡한 구성 - Team Library에서 Page 이름을 기준으로 컴포넌트를 찾기 쉬워진다. - 레이어 이름에 컴포넌트 유형을 반복해서 넣지 않아도 된다. - 예: `button-selected`, `button-hovered` 대신 `selected`, `hovered`처럼 상태만 이름에 표시 - 결과적으로 레이어 패널이 단순해지고 컴포넌트 검색과 관리가 쉬워진다. 프로젝트의 핵심 기준을 먼저 정한 뒤 Pages를 구성하는 것이 좋다. 여러 플랫폼을 지원하면 플랫폼별로, 협업 규모가 크면 기능별로, 개발 전달이 중요하면 프로세스 단계별로 나누고, 디자인 시스템 중심이라면 Atomic Design 구조를 적용하면 된다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figma디자인 시스템프로토타이핑+2
figma2분 읽기큐레이션 요약

스마트 셀렉션 소개

Figma의 Smart Selection은 여러 객체의 간격, 위치, 크기를 한 번에 조정해 반복적인 디자인 작업을 줄이는 기능이다. 세 개 이상의 객체가 일정한 간격으로 선택되면 캔버스 위에서 직접 조작할 수 있으며, Tidy Up을 사용하면 흐트러진 객체도 균일하게 정렬된다. 이를 통해 디자이너는 수작업보다 탐색과 창의적인 결정에 더 집중할 수 있다. ## 반복적인 디자인 작업의 자동화 - 리스트나 아이콘 그룹의 간격을 바꾸려면 기존에는 각 객체를 개별적으로 이동하고 크기를 조정해야 했다. - 예를 들어 리스트 항목의 높이를 변경할 때 여러 번의 크기 조정과 이동 작업이 필요했다. - Smart Selection은 컴퓨터의 반복·재사용 능력을 디자인 작업에 적용해 이런 “잡일”을 줄이는 것을 목표로 한다. ## 캔버스에서 작동하는 Smart Selection - 세 개 이상의 객체 또는 그룹을 선택하고, 객체 사이의 간격이 일정하면 자동으로 활성화된다. - 별도의 도구나 새로운 객체 유형을 배울 필요 없이 기존 캔버스 조작 방식 안에서 사용할 수 있다. - 선택한 객체 전체의 다음 속성을 한 번에 조정할 수 있다. - 객체 사이의 간격 - 객체의 위치와 배열 - 선택한 객체의 크기 ## 핸들을 이용한 직접 조작 - 객체 사이에 표시되는 분홍색 핸들을 드래그하면 전체 객체의 간격을 동시에 조정할 수 있다. - 분홍색 링을 드래그하면 객체의 순서와 배치를 빠르게 재배열할 수 있다. - 하나 이상의 객체에 있는 분홍색 링을 클릭하면 해당 객체를 대상으로 지정할 수 있다. - 지정한 객체의 가장자리를 드래그하면 여러 객체의 크기를 함께 변경할 수 있다. ## Tidy Up으로 균일하게 정렬하기 - Tidy Up은 정렬되지 않은 객체들을 서로 가깝게 배치하면서 간격을 동일하게 맞춰준다. - 기존의 단순한 “분배” 기능보다 객체 간 간격을 항상 균일하게 유지하는 점이 특징이다. - 표, 툴바, 화면 플로우처럼 여러 요소를 일정한 간격으로 배치해야 하는 작업에 유용하다. - 예를 들어 20개의 화면을 직접 정렬하면 19개의 간격을 일일이 확인해야 하지만, Tidy Up을 사용하면 한 번의 실행으로 정리할 수 있다. - 단축키: - macOS: `⌥⌘T` - 기타 플랫폼: `Ctrl+Alt+T` ## 향후 확장 - Figma는 Smart Selection에 2차원 그리드 지원을 추가할 계획이라고 밝혔다. - 사용자의 실제 활용 사례와 피드백을 바탕으로 기능을 발전시키려 했다. Smart Selection은 여러 객체를 반복적으로 맞추고 이동해야 하는 디자인 작업에서 특히 효과적이다. 먼저 객체를 대략 배치한 뒤 Tidy Up으로 간격을 정리하고, Smart Selection 핸들로 세부 조정을 진행하면 작업 시간을 줄일 수 있다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figmadesign-toolsinteraction-design+2
figma2분 읽기큐레이션 요약

피그마 기능 하이라이트

Figma의 컴포넌트 오버라이드는 디자인 시스템의 일관성을 유지하면서도 각 인스턴스를 상황에 맞게 수정할 수 있게 해준다. 인스턴스를 분리하지 않고 색상, 텍스트, 스타일 등을 변경할 수 있으며, 원본 컴포넌트가 업데이트되면 수정되지 않은 속성은 계속 상속된다. 따라서 반복되는 UI를 효율적으로 관리하면서도 다양한 상태와 콘텐츠를 표현할 수 있다. ## 디자인 시스템에서 유연성과 일관성의 균형 - 리스트, 아바타, 상태 표시줄처럼 여러 곳에서 반복되는 기본 컴포넌트는 일관된 디자인을 유지해야 한다. - 동시에 리스트의 텍스트, 상태 표시줄의 색상처럼 사용 맥락에 따라 달라지는 부분도 필요하다. - 모든 변형을 처음부터 새로 만들면 작업량이 늘고 디자인 시스템과의 연결도 끊어진다. - 오버라이드는 원본 컴포넌트의 구조는 유지하면서 인스턴스별 차이만 적용하는 방식이다. ## 컴포넌트 오버라이드의 작동 방식 - 인스턴스를 원본 컴포넌트에서 분리하지 않고 속성을 재정의할 수 있다. - 원본 컴포넌트를 수정하면 각 인스턴스는 오버라이드되지 않은 변경 사항을 계속 상속한다. - 인스턴스별로 변경 가능한 속성에는 다음이 포함된다. - 색상과 채우기 - 텍스트와 텍스트 정렬 - 글꼴 및 스타일 - 선의 추가, 삭제, 수정 - 불투명도와 블렌드 모드 - 그림자와 블러 같은 효과 - 요소의 표시·숨김 상태 ## 실제 활용 사례 - **정보 목록 만들기** - 하나의 셀 컴포넌트를 만든 뒤 각 인스턴스의 텍스트를 오버라이드한다. - 할 일 목록이나 대시보드 테이블처럼 서로 다른 데이터를 일관된 형태로 표현할 수 있다. - **버튼 상태 표현하기** - 하나의 버튼 컴포넌트를 기반으로 기본, 호버, 클릭, 비활성 상태를 만든다. - 배경색, 텍스트 불투명도, 그림자 등을 상태별로 변경할 수 있다. - **주소록 아바타 구성하기** - 원형 컴포넌트의 채우기를 각 인물의 사진으로 교체한다. - 아바타의 공통 형태는 유지하면서 이미지 콘텐츠만 다르게 적용할 수 있다. ## 오버라이드를 활용한 케일리도스코프 - 하나의 일러스트를 프레임에 그리고 컴포넌트로 변환한다. - 인스턴스를 복제해 오른쪽에 배치한 뒤 수평 반전한다. - 다시 복제해 아래쪽에 배치하고 수직 반전한다. - 남은 공간에 인스턴스를 하나 더 배치해 2×2 형태를 만든다. - 왼쪽 위의 원본 컴포넌트 안에서 그림을 수정하면 연결된 인스턴스들이 함께 바뀌며 대칭 패턴이 만들어진다. 컴포넌트 오버라이드는 공통 구조와 스타일은 원본에 맡기고, 콘텐츠와 상태처럼 달라져야 하는 부분만 인스턴스에서 수정하는 데 적합하다. 반복 UI를 컴포넌트로 만든 뒤 필요한 속성만 오버라이드하면, 유지보수성과 디자인의 다양성을 함께 확보할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figma디자인 시스템프로토타이핑+1
figma2분 읽기큐레이션 요약

#FigmaTip 모음

이 글은 Figma 커뮤니티에서 공유된 실용적인 작업 팁을 모아, 반복적인 디자인 작업을 키보드 단축키와 컴포넌트 기능으로 더 빠르게 처리하는 방법을 소개한다. 여러 프레임 정렬, 좌우 반전 컴포넌트 제작, 오브젝트 이동 간격 조정 등을 활용하면 레이아웃 편집과 컴포넌트 관리의 효율을 높일 수 있다는 것이 핵심이다. ### 여러 프레임을 빠르게 정렬하기 - 여러 오브젝트나 프레임을 선택한 뒤 다음 단축키를 사용할 수 있다. - `Cmd + \``: 세로 방향으로 간격을 정리하는 **Pack Vertical** - `Cmd + Shift + \``: 가로 방향으로 간격을 정리하는 **Pack Horizontal** - 정렬 관련 단축키와 함께 사용하면 여러 요소의 배치 방향과 간격을 한 번에 조정할 수 있다. - 반복적으로 카드, 화면, 섹션 등을 배열할 때 마우스로 직접 이동하는 것보다 효율적이다. ### 변경 사항을 반영하는 좌우 반전 컴포넌트 만들기 - 기존 컴포넌트를 `Option` 키를 누른 채 드래그해 새로운 빈 컴포넌트 안에 배치한다. - 새 인스턴스를 선택하고 `Shift + H`를 눌러 좌우로 뒤집는다. - 이렇게 만든 반전 컴포넌트는 원본과 연결되어 있으므로 원본 컴포넌트의 변경 사항이 반영된다. - 좌우 대칭이 필요한 아이콘, 캐릭터, 방향성 UI 요소를 별도로 다시 만들지 않고 관리할 수 있다. ### “Nudge Amount”로 이동 간격 조정하기 - 방향키로 오브젝트를 이동할 때 적용되는 기본 이동 간격을 **Nudge Amount** 설정으로 바꿀 수 있다. - 작은 간격 조정에는 세밀한 값을, 큰 레이아웃 이동에는 더 큰 값을 설정해 작업 목적에 맞게 사용할 수 있다. - 반복적으로 일정한 간격을 맞추거나 픽셀 단위로 요소를 배치할 때 유용하다. - 정렬 및 간격 조정 기능과 함께 사용하면 디자인 시스템의 간격 규칙을 유지하기 쉽다. 실무에서는 자주 사용하는 정렬 단축키와 Nudge Amount 설정을 자신의 작업 방식에 맞게 지정하고, 좌우 변형이 필요한 요소는 반전 컴포넌트로 관리하는 것이 좋다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figma디자인 시스템keyboard-shortcuts+1
figma3분 읽기큐레이션 요약

한 디자이너가 더 윤리

Cat Noone은 접근성을 제품 개발의 마지막 점검이 아니라 초기 설계 원칙으로 삼아야 한다고 주장한다. 그녀는 의료 정보 공유 앱 Iris Health, 색각 이상 접근성 도구 Stark, 자폐 아동용 의사소통 앱 Lyra를 통해 소외되기 쉬운 사용자도 제품의 기본 사용자로 고려해야 한다는 점을 보여준다. 접근성을 높이는 일은 디자인을 제한하는 것이 아니라 더 많은 사람에게 제품을 열어 주는 방법이다. ## 접근성을 처음부터 고려해야 하는 이유 - 장애가 있는 사용자 중 상당수가 온라인 서비스를 이용하므로, 접근성을 무시하면 잠재 사용자층의 약 10%를 놓칠 수 있다. - 접근성을 “UI를 나쁘게 만드는 제약”으로 보는 인식을 비판한다. - 제품 기획 단계부터 신체적·인지적·감각적 특성이 다른 사용자들을 조사하고, 각 집단에 맞게 UI와 기능을 조정해야 한다. - “전형적인 사용자”라는 가정 자체가 기술 업계의 사각지대를 만들 수 있다. ## Iris Health: 위급 상황에서 의료 정보를 전달하는 서비스 - 해외 체류 중 사고가 발생하면 가족이나 의료진이 사용자의 알레르기, 복용 약, 혈액형, 당뇨 여부 등을 알기 어렵다는 문제에서 출발했다. - 사용자가 병원에 있는 것으로 감지되면 안부를 확인하고, 10분 안에 응답이 없을 경우 등록된 비상 연락처에 문자 메시지를 보낸다. - iPhone 잠금 화면에 의료 카드가 표시되어 의료진이 이름, 약물, 알레르기, 장기 기증 여부 등의 정보를 빠르게 확인할 수 있다. - 만성질환자뿐 아니라 해외 거주자, 응급 상황에서 의사 표현이 어려운 사람에게도 유용하도록 설계됐다. - **교훈:** 사용자의 상황을 여러 각도에서 상상하고, 다양한 사용자 집단이 실제로 서비스를 어떻게 사용할지 충분히 검토해야 한다. ## Stark: 색각 이상과 대비를 확인하는 디자인 도구 - 의료 앱을 만들면서 접근성을 지원하는 디자인 도구가 부족하다는 문제를 발견해 개발했다. - Sketch에서 레이어를 선택해 다양한 색각 이상 유형을 시뮬레이션할 수 있다. - 텍스트와 배경색의 대비 비율을 확인해 색상 조합이 읽기 어려운지 판단할 수 있다. - Twitter, ESPN, Palantir, Dropbox, Microsoft 등의 팀에서도 사용됐다. - 접근성 검사를 별도 업무로 미루지 말고 디자인 워크플로에 기본 기능처럼 포함해야 한다. - Stark 외에도 Contrast, W3C 접근성 체크리스트 등을 활용해 표준 준수 여부와 개선점을 점검할 수 있다. - 시각과 촉각을 함께 고려한 Braille Neue 같은 서체도 접근성을 확장하는 사례로 소개된다. ## Lyra: 자폐 아동을 위한 기호-음성 의사소통 앱 - 대학 시절 다양한 특수 필요를 가진 아동들과 일한 경험을 바탕으로 시작됐다. - 비언어적 자폐 아동이 기호를 선택해 음성으로 의사를 표현할 수 있도록 돕는다. - 1985년부터 사용된 라미네이트 카드와 벨크로 방식의 의사소통 도구를 디지털 환경에 맞게 현대화하려는 프로젝트다. - 기존 방식은 아동이 디지털 세계에 참여하는 데 한계가 있으므로, 더 편리하고 자연스러운 의사소통 수단을 제공하려 한다. - 개발팀은 당시 베타 버전 출시를 준비하고 있었다. - **교훈:** 접근성 디자인을 제대로 만들려면 관련 사용자와 문제 영역을 스스로 학습해야 하며, Microsoft의 Inclusive Design 가이드 같은 자료부터 참고할 수 있다. 제품을 만들 때 접근성을 출시 직전의 검수 항목으로 두기보다, 사용자 조사·정보 구조·시각 디자인·개발 도구에 기본값으로 포함하는 것이 좋다. 특히 실제 장애 사용자와 함께 테스트하고, 색상 대비·키보드 사용·의사소통 방식 등 구체적인 사용 조건을 반복적으로 검증해야 한다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스접근성sketchinclusive-design+3
figma2분 읽기큐레이션 요약

#FigmaTip 모

이 글은 Figma 커뮤니티에서 공유된 작지만 유용한 작업 팁을 모은 8번째 #FigmaTip 모음이다. 프로젝트를 시각적으로 정리하는 방법과 레이어·객체를 키보드로 빠르게 탐색하는 단축키를 소개해, Figma 작업 흐름을 더 빠르고 직관적으로 만드는 데 초점을 둔다. ## 프로젝트 썸네일을 직접 디자인하기 - 프로젝트의 첫 페이지에 프레임 하나만 배치한다. - 프레임 크기를 `620×320`으로 설정한다. - 큰 텍스트와 시각적으로 눈에 띄는 디자인을 넣어 프로젝트 대표 이미지를 만든다. - 캔버스 색상과 프레임 색상을 동일하게 설정하면, 프로젝트 목록에서 하나의 완성된 썸네일처럼 보인다. - 프로젝트가 많을 때 목록에서 작업물을 빠르게 식별할 수 있고, 단순한 기본 썸네일보다 개성을 부여할 수 있다. ## 레이어 패널을 빠르게 탐색하기 - 글에는 레이어 패널을 확대·탐색하는 단축키 팁을 소개하는 섹션이 포함되어 있다. - 다만 제공된 본문에서는 해당 Twitter 게시물의 내용이 로드되지 않아 구체적인 단축키 목록은 확인되지 않는다. - 이 팁의 목적은 마우스로 레이어를 일일이 찾기보다 키보드 중심으로 레이어 구조를 빠르게 이동하는 데 있다. ## 선택과 레이어 순서를 단축키로 제어하기 - `Tab` / `Shift + Tab` - 같은 계층에 있는 형제 레이어를 앞뒤로 선택한다. - `Return` / `Shift + Return` - 선택한 그룹이나 프레임 안으로 들어가거나 빠져나온다. - `Cmd + ]` / `Cmd + [` - 선택한 레이어를 한 단계 위·아래로 이동한다. - `Option + Cmd + ]` / `Option + Cmd + [` - 선택한 레이어를 레이어 목록의 맨 위 또는 맨 아래로 이동한다. - 이러한 단축키를 익히면 레이어 패널을 계속 클릭하지 않고도 객체 선택, 그룹 탐색, 앞뒤 순서 변경을 빠르게 처리할 수 있다. Figma를 자주 사용한다면 먼저 레이어 선택과 순서 변경 단축키를 익히고, 프로젝트마다 대표 썸네일용 프레임을 만들어 보길 권한다. 작은 시각적 정리와 키보드 중심의 조작만으로도 파일 탐색성과 편집 속도를 함께 개선할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figma사용자 경험keyboard-shortcuts
figma4분 읽기큐레이션 요약

Virta Health가 제2형 당

Virta Health는 제2형 당뇨병을 약물이나 수술 없이 치료하는 과정에서 디자인을 핵심 역량으로 삼고, Figma를 협업의 중심 도구로 활용했다. Figma의 실시간 협업, 컴포넌트, 공유 기능은 의료 서비스의 일관성과 안전성을 높였으며, 디자이너뿐 아니라 의사·마케터·개발자도 제품 제작에 참여하게 했다. 그 결과 의사결정과 피드백이 빨라지고, 디자인 및 콘텐츠 제작 주기도 단축됐다. ## 의료 서비스에서 디자인이 중요한 이유 - 건강관리 제품은 사용자의 행동 변화와 치료 결과에 직접 영향을 미치므로 일반적인 제품보다 설계의 책임이 크다. - Virta Health는 제2형 당뇨병과 만성 대사질환을 약물·수술 없이 치료하는 서비스를 제공한다. - 회사는 2025년까지 1억 명의 당뇨병을 역전시키겠다는 목표를 세웠다. - 소개된 성과에 따르면: - 1년 후 인슐린 사용자의 94%가 사용량을 줄이거나 중단했다. - 1년 후 환자의 60%가 제2형 당뇨병을 역전했다. - Virta의 UX 책임자 David Hatch는 디자인의 목표를 “다양한 사람들이 건강한 행동 변화를 이룰 수 있도록 돕는 것”이라고 설명한다. ## 실시간 협업으로 형성된 디자인 문화 - Virta의 디자인팀은 디자이너뿐 아니라 마케터, 개발자, 의사 등 전사 구성원과 연결되는 협업 허브 역할을 한다. - 팀은 초기부터 웹 기반 협업 도구인 Figma를 사용해 회사의 디자인 작업을 구축했다. - 모든 파일이 최신 상태로 유지되고 한곳에 모여 있어 새로 합류한 디자이너도 첫날부터 작업에 참여할 수 있었다. - 브라우저에서 어디서나 파일에 접근하고 댓글을 남길 수 있어 데스크톱 환경에 종속되지 않았다. - Slack에 Figma 링크를 공유하면 팀원들이 즉시 캔버스에 들어와 복제·수정·개선할 수 있었다. - 이러한 실시간 협업은 기존 도구보다 빠른 피드백과 높은 투명성을 제공했고, Virta의 디자인 문화를 발전시켰다. ## 일관된 디자인과 컴포넌트 시스템 - 의료 앱에서는 환자가 문제를 겪을 때 의사와 빠르고 예측 가능하게 소통해야 하므로, 사용자 흐름의 일관성이 특히 중요하다. - 한 화면에서 익숙한 방식이 다른 화면에서는 다르게 작동하면 사용성이 떨어지고 혼란이 생길 수 있다. - Virta는 반복적으로 사용하는 UI 요소를 Figma 컴포넌트로 만들어 디자인을 쉽게 복제했다. - 컴포넌트 하나에 데스크톱과 모바일 대응 방식을 함께 설계해 반응형 UI를 구축했다. - 시각적 컴포넌트 라이브러리는 다음과 같은 계층 구조로 발전했다. - 기본이 되는 구조적 컴포넌트 - 기본 컴포넌트를 조합한 중첩 컴포넌트 - 여러 화면에서 재사용되는 UI 패턴 - 컴포넌트를 사용하면 새로운 화면을 만들 때도 기존 패턴이 자동으로 유지되어, 디자이너가 실수로 일관성을 깨뜨릴 가능성이 줄어든다. - Virta는 이러한 구조적 컴포넌트 중심의 원칙을 코드에도 적용해 디자인과 구현 단계의 일관성을 높이려 했다. ## 비디자이너의 참여 확대 - Figma 파일은 Slack을 통해 공유되며, 마케터는 문구를 수정하고 의사는 프로토타입에 피드백을 남기며 개발자는 구현에 필요한 정보를 확인한다. - VirtaHealth.com 재출시 프로젝트는 아이디어 구상부터 개발자 전달까지 전체 과정이 Figma 안에서 진행됐다. - 제품팀, 마케팅팀, 경영진, 개발자가 같은 화면을 보면서 프로젝트 진행 상황을 실시간으로 확인할 수 있었다. - 마케팅팀은 직접 카피를 수정하고, 디자이너와 함께 결과물을 빠르게 조정할 수 있었다. - 첫 페이지를 한 달 만에 공개할 수 있었던 배경에는 이러한 투명한 협업 방식이 있었다. - Figma를 사용하면서 말로 설명하기보다 실제 시안을 보여주며 논의하는 비중이 늘었고, 최신 정보에 기반한 피드백과 반복 작업이 가능해졌다. ## 템플릿을 통한 셀프 서비스 모델 - Virta의 UX 디자이너들은 마케팅팀이 직접 사용할 수 있는 템플릿 파일을 제공했다. - 템플릿 대상에는 다음이 포함됐다. - 소셜 미디어 이미지 - 랜딩 페이지 - 마케팅 홍보물 - 마케터는 템플릿을 복제해 필요한 콘텐츠를 직접 만들고, 추가적인 일러스트나 수정이 필요할 때 디자이너를 댓글로 호출했다. - 이 방식은 디자인팀과 마케팅팀 사이의 반복적인 요청·수정 사이클을 최소 두 번 이상 줄였다. - 결과적으로 작업 기간이 수주 단축됐고, 비디자이너도 자신의 콘텐츠 제작 과정에 직접 참여할 수 있었다. Virta Health의 사례는 의료 서비스처럼 오류 비용이 큰 분야에서 디자인 시스템과 협업 도구가 단순한 생산성 개선을 넘어 서비스의 일관성·접근성·안전성에 기여할 수 있음을 보여준다. 특히 공유 가능한 컴포넌트 라이브러리와 역할별 템플릿을 구축하면 디자인팀의 병목을 줄이면서도 전체 조직의 제작 속도를 높일 수 있다.

원문 읽기(새 탭에서 열림)
사용자 인터페이스Figma디자인 시스템프로토타이핑+2