techlist.io
KREN

사용자 경험

165 개의 포스트

figma3분 읽기큐레이션 요약

킴벌리클라크가 사랑

Kimberly-Clark은 변화하는 소비자 선호와 경쟁 심화에 대응하기 위해 디지털 경험과 디자인 업무 방식을 혁신했다. Figma를 단일 협업 플랫폼으로 도입하면서 디자이너, 마케팅, 브랜드, 개발자 간 협업이 빨라졌고, 실제로 한 웹사이트의 가입률을 71% 높였다. 이 사례는 디자인 도구 통합과 실시간 협업이 제품 출시 속도와 사용자 경험을 동시에 개선할 수 있음을 보여준다. ## 디지털 중심 성장 전략 - Kleenex, Scott, Huggies 등을 보유한 Kimberly-Clark은 전 세계 175개국에서 사업을 운영한다. - 400개 이상의 소비자 대상 웹사이트와 다양한 디지털 제품을 관리하고 있다. - 소비자 취향 변화, 경쟁 심화, 생산비 증가로 성장세가 둔화되자 2022년 창립 150주년을 목표로 성장 가속화 전략을 추진했다. - 가격 책정, 제조, 유통, 진열, 영업, 인사 등 거의 모든 업무 과정에 디지털 요소가 포함되어 있었다. - 코로나19 이후에는 수요 변화에 맞춰 생산량과 재고를 재배분했으며, 해당 분기 매출은 46억 1천만 달러를 기록했다. ## 기존 디자인 프로세스의 비효율 - 디자이너들이 독점적인 Mac 기반 애플리케이션에서 혼자 수주일 동안 작업했다. - 완성한 파일을 별도의 클라우드 프로토타이핑 도구에 업로드한 뒤 이해관계자의 피드백을 기다려야 했다. - 수정이 발생하면 같은 과정을 반복해야 했다. - 개발 단계에서는 Mac을 사용하지 않는 개발자에게 디자인 파일을 전달하는 과정에서 추가적인 문제가 생겼다. - 여러 브랜드와 국가에 맞춰 디자인을 현지화해야 했기 때문에, 이러한 단절이 제품 출시 속도를 더욱 늦췄다. ## Figma를 통한 실시간 협업 - Figma를 도입해 디자인, 프로토타이핑, 피드백 과정을 하나의 웹 기반 플랫폼으로 통합했다. - 파일을 로컬에 저장할 필요가 없고, 초대받은 사람이 쉽게 파일을 열어 보고 편집할 수 있었다. - Figma를 모든 팀이 참조하는 단일 정보원으로 활용하면서 파일 버전 관리와 전달 과정이 단순해졌다. - 피드백 회의가 일방적인 검토 자리가 아니라 브랜드·마케팅·디자인·기타 이해관계자가 함께 작업하는 실시간 협업 세션으로 바뀌었다. - 참여자들이 디자인 변경 사항을 즉시 확인하고 제작 과정에 직접 참여할 수 있게 되었다. ## 데이터로 검증한 디자인 개선 - 팀은 디자인 효율성뿐 아니라 실제 사용자 경험의 개선 여부도 측정했다. - 주요 지표로 이탈률, 재방문자, 사이트 체류 시간, 쿠폰·뉴스레터·보상 프로그램 가입률 등을 추적했다. - 한 웹사이트의 가입 양식에는 마케팅 목적으로 13개의 입력 필드가 포함되어 있었다. - 브랜드, 마케팅, 디자인 팀이 Figma에서 함께 논의해 입력 필드를 5개로 줄였다. - 양식 변경 후 가입률이 71% 증가했다. - 회의에서 장시간 논쟁하기보다 문제를 함께 시각화하고 즉시 수정한 것이 성과 향상에 기여했다. ## 다음 단계: 디자인 시스템과 개발 연계 - Kimberly-Clark은 Figma에서 Storybook과 코드 저장소까지 연결되는 새로운 디자인 시스템을 계획했다. - 이를 통해 디자인 요소와 개발 구현 사이의 일관성을 높이고, 여러 브랜드와 지역에 적용 가능한 재사용 체계를 구축하려 했다. - 디자인을 단순한 산출물 제작 과정이 아니라 비즈니스 성과와 제품 출시 속도를 높이는 핵심 업무로 자리매김하려는 방향이다. 실무적으로는 디자인 도구를 많이 사용하는 것보다, 하나의 공유 환경에서 관련 팀이 함께 문제를 해결하고 결과를 사용자 지표로 검증하는 것이 중요하다. 특히 입력 단계 축소처럼 작은 디자인 변경도 데이터로 효과를 확인하면 빠른 개선과 조직 내 합의를 동시에 이끌어낼 수 있다.

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

연결의 순간 만들기 | Figma

디자인은 기능과 완성도만 높이는 일이 아니라, 사람과 조직을 연결하고 의미 있는 경험을 만드는 일이다. Config Europe의 사례들은 사용자 여정을 전체적으로 바라보고, 개인의 성품과 진정성을 브랜드에 반영하며, 기술을 통해 소속감과 인간적 연결을 강화해야 한다고 말한다. 결국 전문성을 갈고닦는 동시에 인간다움을 함께 발전시키는 것이 중요하다. ## 조직 전체를 바꾸는 사용자 경험 - 핀란드 우편 기업 Posti Group은 디지털 청구서와 편지의 확산에 대응해 단순히 새 앱을 만드는 데 그치지 않고, 수백 년 된 조직의 고객 경험 전체를 현대화하려 했다. - 이를 위해 디자인을 중심에 두고 다음 네 가지 원칙을 세웠다. - **성장(Grow):** 변화하는 사용자의 요구에 맞춰 발전한다. - **감동(Delight):** 실망스러운 경험을 긍정적인 경험으로 전환한다. - **감소(Reduce):** 안정적이고 신뢰할 수 있는 서비스를 제공한다. - **경청(Listen):** 고객이 자신의 필요를 직접 표현할 수 있게 한다. - 특정 산출물이나 디지털 접점 하나가 아니라, 고객이 서비스를 이용하는 전체 여정을 통합적으로 바라보는 접근이다. - 우편 서비스는 효율적인 기능을 제공하지만, 실제로는 사랑의 편지, 세금 고지서, 신생아의 사회보장 카드처럼 사람들의 중요한 감정과 사건을 전달한다. - 따라서 디자인은 서비스의 기능뿐 아니라 그 서비스가 사람들의 삶에서 어떤 의미를 만들어내는지도 고려해야 한다. ## 기술보다 중요한 디자이너의 성품 - ConvertKit의 Charli Marie Prangley는 디자이너의 평판이 뛰어난 랜딩 페이지나 아름다운 로고를 만드는 능력만으로 결정되지 않는다고 설명한다. - 개인의 브랜드는 다음 두 요소로 구성된다. - 디자이너로서의 **기술과 전문성** - 어떤 사람인지 보여주는 **성품과 태도** - 고객을 확보하거나 좋은 직장을 얻고 커뮤니티에서 신뢰를 쌓으려면, 사람들이 자신을 어떤 사람으로 기억하길 원하는지 먼저 생각해야 한다. - 창의적이고 친절하며 재미있는 사람인지 등 자신의 가치와 성격을 정의하면, 온라인 활동과 작업물이 실제 자신을 제대로 반영하는지 점검할 수 있다. - 다른 사람을 모방하기보다 자신의 관점과 개성을 진정성 있게 드러내는 것이 중요하다. 진솔한 관점을 가치 있게 여기는 사람은 반드시 존재한다. ## 기능과 감정을 함께 설계하기 - Ueno의 Halli Thorleifsson은 웹사이트나 앱을 단순한 기능적 산출물로 보지 말고, 의미 있는 목적을 가진 작업으로 바라봐야 한다고 강조한다. - 중요한 것은 도구나 디자인 시스템 자체가 아니라, 그것을 사용해 무엇을 만들고 왜 만드는가이다. - 좋은 도구는 팀의 협업을 돕는 데서 끝나지 않고, 사람 사이의 연결과 공동체 의식을 가능하게 해야 한다. - 원격 근무가 확산된 상황에서는 기술이 사람들을 고립시키는 것이 아니라 서로 연결하고 소속감을 느끼게 하는 방향으로 사용되어야 한다. - 디자인의 결과물에는 기능뿐 아니라 감정, 의미, 인간적인 경험이 함께 담겨야 한다. ## Config Europe가 보여준 연결의 가치 - Figma의 첫 가상 사용자 콘퍼런스인 Config Europe에는 150개국에서 약 1만 명이 참여했다. - 참가자들은 온라인 네트워킹, 채팅, Friends of Figma 그룹 등을 통해 발표 내용을 배우는 것뿐 아니라 서로 관계를 형성했다. - 글은 콘퍼런스의 가장 중요한 성과가 새로운 디자인 지식보다 커뮤니티 안에서 만들어진 연결일 수 있다고 말한다. - Halli의 결론은 다음과 같다. - 자신의 전문 기술을 끊임없이 연마할 것 - 동시에 인간다움과 타인과의 관계를 발전시킬 것 일과 제품을 설계할 때 기능적 목표만 세우지 말고, 그것이 사용자와 팀, 커뮤니티에 어떤 감정과 연결을 만들어내는지 함께 정의하는 것이 좋다. 전문성은 신뢰를 만들지만, 진정성과 인간적인 태도는 사람들이 오래 기억하는 관계를 만든다.

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

온라인 쇼핑객을 위해 디자인

Design Within Reach(DWR)는 온라인에서도 오프라인 쇼룸과 유사한 개인화된 구매 경험을 제공하기 위해 웹사이트를 전면 개편했다. DWR과 BASIC®은 Figma를 활용해 하나의 팀처럼 실시간 협업하고, 110시간의 고객 조사와 200명 이상의 사용자 테스트를 통해 제품 탐색과 상담 경험을 개선했다. 그 결과 라이브 채팅 이용자의 구매 가능성이 9배 높아졌으며, 여러 Herman Miller 브랜드로 확장 가능한 디자인 시스템도 구축했다. ### 투명한 에이전시 협업과 실시간 공동 작업 - DWR과 BASIC®은 업무를 분리하기보다 공동 창작을 중심으로 하나의 통합된 팀처럼 운영했다. - 서로 다른 회사와 시간대에서 일하는 디자이너들이 같은 Figma 파일에 동시에 접근해 작업했다. - 파일을 복사하거나 최신 버전을 전달하고 링크를 갱신하는 과정이 사라져 협업 효율이 높아졌다. - 시간대 차이를 활용해 한 팀이 작업을 마치면 다른 팀이 이어받는 방식으로 사실상 하루 14시간의 연속 작업이 가능했다. - CEO와 경영진도 Figma 프로토타입 링크를 통해 진행 상황을 쉽게 확인하고 의사결정에 참여할 수 있었다. ### 오프라인 쇼룸 경험의 온라인 구현 - 웹사이트 개편의 목표는 고객이 온라인에서 가구를 구매할 때 생기는 주요 질문에 답하고, 실제 쇼룸 방문에 가까운 경험을 제공하는 것이었다. - 총 110시간의 고객 조사와 200명 이상의 참가자를 대상으로 한 심층 사용자 테스트를 진행했다. - Figma 프로토타입을 실제 웹사이트처럼 제작해 사용성 테스트, 빠른 반복 수정, 즉각적인 인사이트 수집을 수행했다. - 2020년 7월 새 사이트를 출시했으며, 다양한 화면에 대응하는 반응형 디자인과 영업 담당자와 연결되는 영상·라이브 채팅 기능을 도입했다. - 라이브 채팅을 이용한 방문자는 그렇지 않은 방문자보다 온라인 구매 가능성이 9배 높았다. - 일반적으로 대규모 웹사이트 출시 직후에는 구매가 일시적으로 감소할 수 있지만, DWR은 출시 직후부터 구매 증가를 경험했다. ### 여러 브랜드로 확장되는 디자인 시스템 - DWR 웹사이트 개편을 계기로 Herman Miller 전체 브랜드를 위한 첫 디자인 시스템을 만들었다. - 공통 컴포넌트와 공유된 시각 언어를 기반으로 장기적으로 확장 가능한 구조를 설계했다. - 개발자는 반복 가능한 컴포넌트를 더 빠르게 구현할 수 있게 됐다. - 콘텐츠 작성자는 미리 제작된 컴포넌트를 드래그하고 이미지와 텍스트만 수정해 페이지를 직접 구성할 수 있게 됐다. - Figma의 클라우드 기반 에셋 라이브러리를 통해 내부 팀과 전 세계 외부 파트너가 디자인 자산과 시스템을 쉽게 공유할 수 있다. - DWR의 컴포넌트 라이브러리는 향후 Herman Miller의 다른 전자상거래 사이트에도 적용될 기반이 됐다. ### 실용적인 시사점 온라인 쇼핑 경험을 개선하려면 단순히 시각적으로 아름다운 사이트를 만드는 것보다 고객 조사, 실제 프로토타입 테스트, 실시간 협업을 하나의 흐름으로 연결해야 한다. 또한 반복 가능한 컴포넌트와 공통 디자인 언어를 디자인 시스템으로 정리하면 개발 속도와 콘텐츠 운영 효율을 높이면서 여러 브랜드와 채널로 일관되게 확장할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma디자인 시스템반응형 디자인+3
figma3분 읽기큐레이션 요약

Inside Figma: 엔터프라이즈

Figma의 엔터프라이즈 제품은 고객 요청을 그대로 구현하는 데 그치지 않고, 다양한 규모와 역할의 조직이 지속적으로 사용할 수 있는 기반을 만드는 것을 목표로 한다. 이를 위해 Figma는 관리자와 최종 사용자의 업무를 함께 이해하고, 영업·지원·마케팅·디자인·엔지니어링 등 여러 팀과 협력해 Admin Settings를 전면적으로 재설계했다. 결론적으로 엔터프라이즈 기능의 핵심은 개별 기능 추가보다 확장 가능한 구조와 중요한 관리 업무에 최적화된 사용자 경험이다. ## 엔터프라이즈 제품의 역할 - Figma의 엔터프라이즈 팀은 조직 관리자가 다음 업무를 수행할 수 있도록 도구를 개발한다. - 조직 계정 관리 - 디자이너·개발자·협업자의 접근 권한 관리 - 조직 내 사용 현황과 리소스 관리 - 제품 개발 과정에서 잠재 고객과의 영업 통화, 기존 고객 인터뷰, 지원팀 피드백 등을 적극적으로 활용한다. - 고객 요구를 단순히 받아 적는 것이 아니라, 여러 고객과 조직에 공통적으로 적용될 수 있는 문제를 파악하는 데 초점을 둔다. ## 기존 Admin Settings가 가진 한계 - Figma Organization 출시 후 사용자가 크게 늘면서 관리자 업무의 범위가 넓어졌다. - 초기 Admin Settings는 어떤 기능이 관리자에게 가장 중요한지 충분히 알기 전에 설계된 화면이었다. - 고객·지원·영업팀과의 대화를 통해 다음 문제가 드러났다. - 관리자가 조직의 의사결정에 필요한 정보를 충분히 얻기 어려움 - 자신에게 유용한 기능이 무엇인지 알기 어려움 - 필요한 정보를 수동으로 내보내야 함 - 개별 기능 자체보다, 기능을 발견하고 활용하는 전체 관리 화면의 구조가 문제였다. ## 처음부터 다시 설계한 브레인스토밍 - 팀은 기존 화면을 조금 수정하는 대신 관리자 경험을 처음부터 재구성하기로 했다. - 주요 목표는 다음과 같았다. - 구성원 관리 워크플로 개선 - 기존 기능의 노출과 활용도 향상 - 향후 새 기능을 쉽게 추가할 수 있는 구조 마련 - 아이디어를 다음 세 범주로 나누어 논의했다. - 지금 실행할 항목 - 검토할 가치가 있는 항목 - 과감하고 실험적인 항목 - PM, 엔지니어링 매니저, 디자이너, 엔지니어뿐 아니라 리서치·데이터·지원·마케팅·영업팀도 참여했다. - 각 팀의 제안을 사용자 피드백과 연결해 공통 주제를 도출하고, 우선순위가 높은 항목을 정리했다. ## 단순한 UI 개선이 아닌 제품 개편 - 처음에는 기존 Admin Settings에 새로운 화면과 옵션을 추가하는 정도로 생각했다. - 그러나 영업팀과 함께 관리자들의 실제 불편을 분석하면서 문제가 특정 화면이나 기능에 국한되지 않았음을 확인했다. - 기존 설계 위에 기능을 계속 덧붙이면 단기적으로는 개선할 수 있어도, 다음 문제가 반복될 수 있었다. - 핵심 업무 흐름이 복잡해짐 - 기능 간 연결성이 약해짐 - 새로운 기능을 추가하기 어려워짐 - 따라서 문제의 증상만 고치는 대신, 관리자의 주요 워크플로를 중심으로 전체 제품 경험을 재설계하는 방향을 택했다. ## 다양한 규모의 조직을 위한 확장성 - Figma는 특정 규모 이상의 기업만 대상으로 하는 제품이 아니라, 5명 규모의 팀부터 5,000명 규모의 조직까지 지원해야 한다. - 작은 조직에서는 한 사람이 관리자, 디자인 운영 담당자, 실무 디자이너 역할을 동시에 맡을 수 있다. - 대기업에서는 예산 책임자, 디자인 운영팀, 보안팀, 개별 사용자가 서로 다른 목표와 요구를 가진다. - 경영진·예산 담당자: 조직 전체에서 제품이 제공하는 가치를 파악 - 디자인 운영 담당자: 필요한 권한과 리소스 접근을 보장 - 보안팀: 조직 데이터가 안전하게 보호되는지 확인 - 일반 사용자: 일상적인 업무를 효율적으로 수행 - 따라서 엔터프라이즈 도구는 특정 사용자 유형에만 맞추기보다, 조직 내 다양한 역할과 의사결정 구조를 수용할 수 있어야 한다. - 관리자 화면은 일반 사용자에게는 부수적인 기능처럼 보일 수 있지만, 관리자에게는 매일의 운영을 책임지는 핵심 업무 공간이다. ## 실용적인 결론 엔터프라이즈 제품을 설계할 때는 고객의 최신 요청을 개별적으로 처리하기보다, 여러 조직에서 반복되는 문제와 업무 흐름을 찾아야 한다. 특히 조직 규모와 사용자 역할이 다양하다면 단기적인 UI 수정보다 확장 가능한 정보 구조와 관리 워크플로를 먼저 설계하는 것이 장기적으로 더 효과적이다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma프로덕트 디자인enterprise-software+2
figma4분 읽기큐레이션 요약

Clearstep이 온라인에서 진료를

Clearstep은 증상 확인부터 적절한 의료기관 선택, 보험 자격 확인, 비용 추정, 예약까지 이어지는 의료 탐색 과정을 직관적으로 단순화했다. 이를 위해 반복적인 사용자 흐름 테스트와 Figma의 협업·스타일 관리·개발 전달 기능을 활용해 정확하고 일관된 제품 경험을 만들었다. 최종 목표는 환자가 불안과 검색 시간을 줄이고 자신에게 맞는 진료를 빠르게 찾도록 돕는 것이다. ## 의료 탐색 과정을 하나의 흐름으로 통합 - 2018년 증상 확인 및 진료 경로 안내 플랫폼을 출시했다. - 사용자가 증상에 따라 진료가 필요한지, 어떤 의료 제공자를 찾아야 하는지 판단하도록 지원했다. - 사용자의 위치와 보험 네트워크를 고려해 적합한 의료 자원을 연결했다. - 보험 계획에 따른 예상 비용을 제공하고, 플랫폼 안에서 진료 예약까지 진행할 수 있도록 확장했다. - 증상 확인, 의료기관 비교, 보험 확인, 비용 투명성, 예약을 하나의 경험 안에 통합해야 했기 때문에 설계 과정에서 높은 정확성과 반복 검증이 필요했다. ## 정보는 많지만 오류가 허용되지 않는 설계 - 의료 선택지가 많은 상황에서 사용자가 다음 행동을 명확히 이해하도록 사용자 흐름을 여러 차례 개선했다. - Figma의 **Smart Selection**을 활용해 증상 확인 결과 화면의 진료 옵션 순서를 드래그 앤 드롭으로 빠르게 재배치했다. - 헤더와 본문 글꼴의 미세한 차이도 사용자의 탐색 방식과 진료 옵션 평가에 영향을 주므로 반복적인 테스트를 진행했다. - 버튼 텍스트가 자동으로 크기에 맞춰 조정되어 다양한 문구를 빠르게 실험할 수 있었다. - 이러한 기능을 통해 단순 반복 작업을 줄이고, 사용성처럼 더 높은 판단이 필요한 설계 문제에 시간을 쓸 수 있었다. ## 고객별 브랜드를 빠르게 적용 - Clearstep은 여러 의료 시스템에 화이트 라벨 형태로 플랫폼을 제공한다. - 고객마다 다른 색상 체계를 사용하기 때문에 짧은 시간 안에 맞춤형 디자인을 제작해야 했다. - 고객 브리프마다 새로운 Figma 파일을 만들고 브랜드 색상을 문서에 추가했다. - **Color Styles**를 사용하면 광고나 목업의 여러 색상을 한 번에 수정할 수 있다. - 검증된 색상 스타일은 Figma **Library**에 등록해 모든 편집자가 동일한 스타일을 사용할 수 있도록 했다. - 이를 통해 고객별 맞춤화와 디자인 일관성을 동시에 유지했다. ## 원격 환경에서의 실시간 협업 - Figma의 멀티플레이어 기능으로 디자이너와 엔지니어가 같은 파일에서 동시에 작업했다. - 엔지니어가 디자인 핸드오프를 진행하는 동안 디자이너가 UX 개선점을 표시하거나 직접 수정할 수 있었다. - 텍스트와 색상 스타일을 수정·게시하면 팀원이 파일에 다시 들어왔을 때 최신 상태를 확인할 수 있었다. - 색상과 이름이 표시되는 커서를 통해 화상회의나 화면 공유 없이도 각자의 작업 위치와 피드백을 파악했다. - 다른 팀원의 아바타를 클릭해 관찰 모드로 전환하면 해당 팀원이 기능을 검토하는 과정을 실시간으로 따라갈 수 있었다. - 댓글을 하나씩 검토하고 답변하거나, 반영 후 댓글을 해결 처리하는 방식으로 피드백을 관리했다. ## 디자인에서 구현까지 연결 - 최종 디자인은 Figma의 **Color Styles**, **Code 패널**, UI 요소 간 간격과 오프셋을 보여주는 레이블을 통해 개발팀에 전달됐다. - 개발자는 별도로 에셋을 다운로드하거나 복잡한 설명을 주고받지 않고 필요한 리소스에 바로 접근할 수 있었다. - Figma의 내보내기 기능을 사용해 구현 과정에서 디자인 에셋을 즉시 활용할 수 있었다. - 디자인과 개발 사이의 전달 비용을 줄이고, 최종 구현이 설계 의도와 일치하도록 했다. ## 의료 서비스 접근성을 높이는 제품 철학 - Clearstep은 의료 정보를 단순히 제공하는 데 그치지 않고 사용자가 실제로 다음 행동을 선택하도록 안내하는 것을 목표로 한다. - 불안한 상태에서 검색 결과를 무작정 비교하지 않고, 증상·위치·보험·비용을 바탕으로 실행 가능한 선택지를 얻도록 설계했다. - 디자인 시스템과 실시간 협업 도구를 활용해 작은 팀으로도 많은 환자에게 영향을 주는 기능을 빠르고 안정적으로 개선했다. 실용적으로는 복잡하고 오류 비용이 큰 서비스일수록 사용자 흐름을 반복 테스트하고, 색상·텍스트·컴포넌트를 재사용 가능한 스타일로 관리하는 것이 중요하다. 또한 디자인 도구와 개발 전달 과정을 하나로 연결하면 원격 협업에서도 변경 사항을 빠르게 공유하고 구현 오류를 줄일 수 있다.

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

목업 그 이상: 여정

디자인은 화면 목업을 만드는 일에 그치지 않고, 제품 경험·조직 프로세스·문화·커뮤니티를 함께 설계하는 활동이다. Segment는 디자이너뿐 아니라 리서처, PM, 엔지니어, 고객 성공 담당자 등과 Figma에서 공동 작업하며 고객 여정, 데이터 구조, 디자인 시스템, 조직 문화를 함께 만들어갔다. 이런 협업 산출물은 팀의 공통 기준이자 의사결정과 온보딩을 돕는 자료로 활용됐다. ## 고객 여정 공동 설계 - 디자이너와 UX 리서처가 고객의 전체 경험을 여정 지도로 정리했다. - 발견과 가입부터 제품의 대규모 도입까지, 고객 등급별 경험을 단계적으로 매핑했다. - 각 단계에 분석 데이터를 보완하고, 고객 사례를 클릭해 볼 수 있는 인터랙티브 프로토타입을 제작했다. - 완성된 파일은 Segment 구성원이 고객 경험을 확인할 때 참고하는 단일 기준점이 됐다. - 신규 구성원이 제품과 고객을 이해하는 온보딩 자료로도 활용됐다. ## 데이터 아키텍처 다이어그램 - 디자이너, 리서처, 고객 성공 관리자, 인프라 엔지니어가 함께 Segment의 데이터 흐름을 시각화했다. - 데이터가 플랫폼을 통과하며 어떻게 변환·보강·정제되는지 표현했다. - 복잡한 데이터 구조를 여러 직군이 공유할 수 있는 공통 언어로 바꿨다. - 다이어그램은 향후 제품을 설계할 때 활용하는 기반 자료가 됐다. - 현재 강점과 개선이 필요한 영역을 드러내 제품 전략과 우선순위 설정을 지원했다. ## 디자인 시스템 회고와 로드맵 수립 - 오픈소스 디자인 시스템인 Evergreen은 디자인 외의 여러 팀도 사용하므로, 엔지니어링 등 협업 부서의 피드백이 중요했다. - 원격 근무 상황에서 디자이너와 엔지니어가 Figma 파일에 가상 포스트잇을 작성했다. - 디자인 시스템의 문제점과 개선 기회를 함께 도출했다. - 회고 결과는 다음 분기 OKR의 틀을 만드는 데 활용됐다. - 단순한 피드백 수집을 넘어 디자인 시스템의 향후 로드맵을 공동 설계하는 계기가 됐다. ## 원격 환경에서 커뮤니티 만들기 - 공동 설계는 제품이나 업무 산출물뿐 아니라 소속감과 유대감을 만드는 데도 활용됐다. - 국제 여성의 날을 맞아 EPD 조직의 여성 구성원들에게 보낼 감사 카드를 Figma에서 함께 작성했다. - 동료에게 전하고 싶은 메시지와 서로에게 배우고 싶은 점을 공동으로 표현했다. - 대면 축하가 어려운 원격 환경에서 생일 카드 등 가상 이벤트에도 같은 방식을 적용했다. - 협업 도구를 조직문화와 관계 형성을 위한 공간으로 확장했다. ## 목업을 넘어선 공동 설계 - 공동 설계의 대상은 인터페이스뿐 아니라 고객 경험, 데이터 구조, 프로세스, 전략, 문화까지 포함할 수 있다. - 다양한 직군을 초기 단계부터 참여시키면 각자의 전문 지식이 결과물에 반영된다. - 시각화된 문서는 팀의 공통 기준점이 되어 커뮤니케이션 비용을 줄인다. - 원격 환경에서도 실시간 협업 도구를 활용하면 회고, 브레인스토밍, 축하와 같은 활동을 지속할 수 있다. 팀의 문제를 해결할 때 화면 설계만 생각하기보다, 어떤 경험과 관계를 함께 만들지 정의하고 관련된 사람들을 공동 설계 과정에 참여시키는 것이 효과적이다. Figma 같은 협업 공간을 공통 문서이자 토론의 장으로 활용하면 산출물의 재사용성과 조직 전체의 이해도를 높일 수 있다.

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

집에서 디자인 영감 찾기 |

집에 머무는 동안의 창의적 영감은 디자인 사례만 찾기보다, 직접 무언가를 해보고 일상과 다른 분야를 탐색하는 데서 얻을 수 있다. Figma 디자인팀은 취미, 사진, 온라인 커뮤니티, 음악·영화 등 다양한 경험이 창의적 사고를 자극한다고 말한다. 중요한 것은 영감을 억지로 찾기보다 즐거운 활동과 새로운 연결을 통해 창작의 흐름을 회복하는 것이다. ## 생각을 줄이고 직접 해보기 - 창의성이 막힐수록 문제를 계속 분석하기보다 전혀 다른 활동에 몰입하는 것이 도움이 된다. - 식물 수집, 가구 배치, 그림 그리기, 글쓰기처럼 작고 단순한 취미도 새로운 자극이 될 수 있다. - 컴퓨터과학, 음악, 게임처럼 디자인과 직접 관련 없는 주제를 공부하는 것도 사고의 폭을 넓힌다. - 그림을 스티커로 제작하는 등 개인 프로젝트는 업무와 별개로 성취감과 창작 에너지를 제공한다. - 결과물의 완성도보다 즐겁게 지속할 수 있는 활동인지가 중요하다. ## 사진과 기억을 통한 가상 탈출 - 여행, 전시, 건축, 라이브 음악을 직접 경험하기 어려운 상황에서는 과거의 기억이 대안이 될 수 있다. - 카메라 롤을 다시 살펴보면 다른 장소와 시간에 대한 기억이 되살아나며 정서적으로 재충전할 수 있다. - 사진은 단순한 기록을 넘어 새로운 시각적 관점과 아이디어를 제공한다. - 현재의 환경에서 벗어날 수 없을 때, 과거의 경험을 돌아보는 것만으로도 창작의 관점을 전환할 수 있다. ## 온라인 커뮤니티와 함께 영감 찾기 - 물리적으로 만날 수 없을 때 소셜 미디어, Figma Community, 온라인 아티클과 영상이 영감과 연결의 통로가 된다. - Are.na는 다른 북마크 서비스보다 협업적이며, 여러 사람이 자료와 핀을 자유롭게 추가할 수 있다는 점이 장점으로 소개된다. - Instagram과 Twitter에서는 특정 계정을 구독하거나, 흥미로운 디자이너를 따라가며 연쇄적으로 새로운 창작자를 발견할 수 있다. - 온라인 영감 탐색은 혼자 자료를 소비하는 데 그치지 않고, 다른 사람과 공유하고 함께 큐레이션할 때 더 풍부해진다. ## 디자인 바깥의 분야에서 연결 만들기 - 디자인 결과물만 계속 보면 비슷한 스타일과 해결 방식에 갇힐 수 있다. - 음악, 영화, TV 프로그램, 요리처럼 디자인과 거리가 있는 분야는 서로 다른 개념을 연결하도록 사고를 자극한다. - 특히 혁신이나 문제 해결을 다루지만 디자인을 직접 다루지 않는 콘텐츠가 새로운 시각을 줄 수 있다. - 다른 사람의 특정 디자인 사례를 그대로 참고하면 결과물이 모방에 가까워지거나 사고가 좁아질 위험이 있다. - 대신 인접 분야나 비슷하지만 다른 문제를 해결한 사례를 참고하면, 기존 디자인의 해법을 복사하지 않고 문제 해결 방식만 배울 수 있다. ## 실천을 위한 추천 창의성이 막혔다면 먼저 20~30분 동안 그림, 정리, 산책, 사진 감상처럼 부담 없는 활동을 해보는 것이 좋다. 이후 디자인과 무관한 콘텐츠를 접하거나 온라인 커뮤니티에서 새로운 자료를 탐색하면, 억지로 답을 찾기보다 자연스럽게 새로운 연결과 아이디어를 발견할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figmaslackvisual-design+3
figma3분 읽기큐레이션 요약

페어 디자인하는 방법

디자인 페어링은 두 명의 디자이너가 같은 문제를 동시에 해결하는 협업 방식이다. 즉각적인 피드백과 다양한 아이디어를 통해 디자인 품질을 높이고, 오류·엣지 케이스를 조기에 발견하며, 결과적으로 작업 시간과 커뮤니케이션 비용을 줄일 수 있다. 글은 역할과 진행 방식을 명확히 정하고 짧은 실험부터 시작하면 상사에게도 투자 가치를 설득할 수 있다고 주장한다. ## 디자인 페어링의 정의 - 두 사람이 같은 디자인 문제를 같은 시간에 함께 해결한다. - 회원가입 플로우에서 한 명은 계정 생성, 다른 한 명은 온보딩을 맡는 방식은 ‘분업’이지 페어링이 아니다. - 페어링에서는 하나의 문제를 함께 탐색하고, 아이디어를 만들고, 의사결정을 내린다. ## 다양한 페어링 방식 - **Generator–Synthesizer 방식** - 한 사람이 많은 아이디어를 생성하고, 다른 사람이 이를 UX 흐름이나 구조로 정리한다. - **Lead–Support 방식** - 숙련된 디자이너가 주도하고 다른 디자이너가 지원하며, 주니어 디자이너의 성장을 돕는다. - **스크린 공유 방식** - 페어 프로그래밍처럼 한 화면을 보며 실시간으로 작업하고 의견을 교환한다. ## 드라이버와 내비게이터 역할 - **드라이버** - Figma 파일, 키보드, 마우스를 조작하며 실제 디자인을 만든다. - 버튼 위치나 보조 문구 추가 같은 판단의 근거를 소리 내어 설명한다. - **내비게이터** - 직접 조작하지 않고 작업을 관찰하며 질문을 던진다. - 기존 제품 패턴, 사용자 혼란, 접근성, 엣지 케이스 등을 즉시 검토한다. - 결과물을 비판하기보다 향후 디자인 리뷰나 출시 후 발견될 문제를 미리 제기한다. - 일정 시간이 지나면 두 사람이 역할을 교대해 서로 다른 관점에서 작업한다. ## 효과적인 진행 방법 - 해결할 문제와 목표를 시작 전에 합의한다. - 짧은 스케치나 레퍼런스 탐색으로 문제 인식을 맞춘다. - 페어링 시간을 10분, 하루, 일주일 등 상황에 맞게 정한다. - 대화와 사고가 많아 피로할 수 있으므로 중간에 휴식한다. - 즉시 거절하기보다 아이디어를 발전시키는 즉흥극의 원칙을 따른다. - 누군가 지켜보는 상황이 어색할 수 있으므로 실수를 자연스럽게 받아들이는 분위기를 만든다. - 종료 후 짧은 회고를 진행해 잘된 점과 개선할 점을 확인한다. ## 상사를 설득할 수 있는 투자 가치 - 작업 중 즉각적인 피드백을 받아 나중에 별도 리뷰할 필요가 줄어든다. - Slack이나 이메일 같은 방해 요소가 줄어든다. - 지식과 맥락이 실시간으로 공유되어 팀 전체의 역량이 빠르게 확산된다. - 문서 작성과 별도 컨텍스트 공유 회의가 감소한다. - 두 사람이 함께 아이디어를 생성하므로 더 많은 가능성을 탐색할 수 있다. - 오류, 버그, 엣지 케이스를 조기에 발견한다. - 디자인 파일의 구조와 정리가 더 일관된다. - 의사결정에 대한 자신감과 팀 사기가 높아진다. 처음부터 장기간 도입하기보다 명확한 문제를 정해 짧은 세션으로 시험해 보는 것이 좋다. 작업 속도뿐 아니라 재작업, 회의, 문서화, 출시 후 수정 비용까지 함께 비교하면 디자인 페어링의 효과를 더 설득력 있게 평가할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figmasketchdesign-critique+2
figma3분 읽기큐레이션 요약

더 많은 교실에 Figma 도입

Figma는 코로나19로 원격 수업이 확산되는 상황에 맞춰 교육 프로그램을 학위 과정 중심에서 온라인 강좌, 부트캠프, 학교 주최 해커톤 등으로 확대했다. 교육 대상자는 Professional 플랜 수준의 무료 기능과 수업 자료, 교육자 커뮤니티를 이용할 수 있다. 이를 통해 학생의 배경이나 학습 목적과 관계없이 디자인 교육 접근성을 높이고, 온라인 협업 기반의 수업을 지원하려는 것이 글의 결론이다. ## 원격 교육 확산과 Figma의 대응 - 코로나19로 교육기관과 교사들이 수업 방식을 전면적으로 원격 환경에 맞춰야 했다. - Figma는 원격 교실을 구축하고 운영하는 과정에서 발생하는 교육자들의 어려움을 접하며 교육 지원을 강화했다. - 기존에도 무료 시작 정책과 공인 교육기관의 학생·교사 할인 제도를 운영했으며, 전 세계 10만 명 이상이 교실에서 Figma를 사용하고 있었다. - RIT의 Miguel Cardona, Students Who Design 등 교육자 및 단체와 협력해 수업 자료와 온라인 교실 운영 가이드를 제공했다. ## 교육 프로그램의 적용 범위 확대 - 기존 대상은 공인 교육기관의 학위 과정에 주로 한정되어 있었다. - 새 프로그램에서는 다음과 같은 다양한 학습 환경을 포함한다. - 온라인 강좌 - 디자인·개발 부트캠프 - 학교가 주최하는 해커톤 - 대면 및 가상 교실 - 정규 학위 과정 이외의 교육 프로그램 - 학생이 학위를 취득하지 않더라도 기술을 향상하거나 커리어를 전환하려는 경우 교육 프로그램의 혜택을 받을 수 있도록 범위를 넓혔다. ## 제공되는 Education 플랜 혜택 - 신청이 승인되면 무료 Education 플랜을 사용할 수 있다. - Professional 플랜의 주요 기능이 제공된다. - 편집자 수 제한 없음 - 파일 수 제한 없음 - 프로젝트 수 제한 없음 - 수업 운영에 활용할 수 있는 실용적인 교실 템플릿과 교육 자료를 제공한다. - 학생과 교육자가 교류할 수 있는 커뮤니티에 참여할 수 있다. - 온라인 이벤트와 밋업에 특별 초대를 받을 수 있다. ## 온라인 협업 도구로서의 Figma - Figma는 여러 사용자가 온라인에서 동시에 작업할 수 있어 시각 디자인 수업에 적합하다. - UC Berkeley의 Eric Paulos 교수는 학생들이 이미 다양한 활동에서 온라인 협업에 익숙하기 때문에 Figma가 이러한 협업 경험을 디자인 작업으로 자연스럽게 확장한다고 평가했다. - 원격 수업에서도 교사가 파일을 정리하고, 과제를 확인하며, 학생 작업에 피드백을 제공할 수 있다. - 디자인 결과물과 수업 과정을 하나의 협업 공간에서 관리할 수 있다는 점이 기존의 분산된 온라인 수업 도구와 차별화된다. ## 디자인 교육 접근성 확대 - Figma는 전문 디자이너를 목표로 하는 학생뿐 아니라 디자인을 처음 접하는 학습자도 지원하려 한다. - 대학원 등 고등 교육을 받는 학생, 실무 역량을 키우는 사람, 커리어 전환을 준비하는 사람 모두를 대상으로 한다. - 교육 범위를 넓히는 것은 “디자인을 모두에게 접근 가능하게 한다”는 Figma의 사명과 연결된다. - 회사는 교육 프로그램을 전담할 인력을 두고, 교육자와 학생의 의견을 지속적으로 수렴할 계획이다. 교육 기관이나 부트캠프가 Figma를 도입할 때는 Education 플랜 신청과 함께 교실 템플릿, 파일 구성 규칙, 과제 피드백 방식을 미리 정하는 것이 좋다. 특히 실시간 공동 편집과 온라인 피드백 기능을 활용하면 원격 환경에서도 참여형 디자인 수업을 운영할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figmaremote-collaborationhuman-computer-interaction+2
figma3분 읽기큐레이션 요약

가벼운 프로토

프로토타입은 완성도가 높아야만 가치가 있는 것이 아니라, 초기 단계의 가벼운 형태만으로도 제품 방향과 사용자 경험을 검증하고 협업을 촉진할 수 있다. 일찍 공유하면 카피, 상호작용, 기술적 실현 가능성에 대한 피드백을 빠르게 받아 불필요한 재작업을 줄일 수 있다. Figma는 프로토타입을 제품 테스트뿐 아니라 원격 협업, 발표, 고객 커뮤니케이션을 위한 정보 전달 도구로도 활용한다. ## 가벼운 프로토타이핑의 가치 - 프로토타입은 사용자가 디자인과 어떻게 상호작용하는지 확인하고 피드백을 얻는 수단이다. - 제품 개발 초기에는 고충실도 결과물보다 빠르게 만들고 공유할 수 있는 비공식 프로토타입이 더 효과적일 수 있다. - 완성되지 않은 작업을 공개하는 것은 부담스럽지만, 초기 피드백을 통해 문제를 조기에 수정하고 향후 개발 비용과 시간을 절약할 수 있다. - 프로토타입은 디자이너의 비전을 협업자, 이해관계자, 개발팀에 전달하는 커뮤니케이션 도구이기도 하다. ## 카피와 콘텐츠 검증 - 간단한 사용자 흐름만으로도 헤더, 본문, 버튼의 문구가 서로 잘 맞는지 확인할 수 있다. - 사용자가 다음에 어떤 행동을 해야 하는지 문구가 명확하게 안내하는지 검토할 수 있다. - 여러 사람이 UX 카피와 마이크로카피를 작성할 때 발생하는 표현의 불일치를 발견할 수 있다. - 공식적인 보이스·톤 가이드가 없더라도 전체 흐름에서 문체와 분위기가 일관적인지 방향성을 점검할 수 있다. ## 개발팀에 맥락 전달 - 개발자 핸드오프 단계의 정교한 프로토타입뿐 아니라, 초기 아이디어도 개발팀과 공유하는 것이 유용하다. - 개발자는 디자인 의도를 이해하는 동시에 다음과 같은 현실적인 문제를 조기에 지적할 수 있다. - 구현이 어려운 기능 - 예상되는 기술적 장애물 - 추가 탐색이나 설계가 필요한 부분 - 프로토타입은 최종 결과물이 아니라 구현을 위한 청사진이므로, 디자인의 배경과 의도를 함께 제공할수록 실제 구현이 쉬워진다. ## 상호작용을 구체적으로 표현하기 - 가벼운 프로토타입이라도 화면 간 경로와 상호작용은 가능한 한 명확하게 지정해야 한다. - 예를 들어 `On Click`, `On Drag`, `While Hovering`과 같은 조건을 사용해 사용자의 행동과 시스템 반응을 표현할 수 있다. - 상호작용을 구체화하면 팀원들이 의도한 동작을 정확히 이해하고, 테스트 결과와 피드백의 품질도 높아진다. ## Figma에서의 커뮤니케이션 활용 - Figma는 프로토타이핑 기능을 제품 개발뿐 아니라 사내 정보 공유와 원격 협업에도 활용한다. - 원격 근무 환경에서는 작업물과 정보를 한곳에서 공유하는 일이 특히 중요해졌으며, 프로토타입이 이를 지원한다. ### Presentation View 활용 - Figma는 슬라이드 덱을 공유할 때 Presentation View를 사용한다. - 전사 회의에서는 여러 팀원이 하나의 마스터 파일에 각자 발표 슬라이드를 추가할 수 있다. - 분기 계획, 리서치 결과, 원격 근무 방식 등 다양한 정보를 발표하고 피드백받는 기반으로 활용한다. - 영업팀은 고객용 원페이저를 PDF 대신 프로토타입 URL로 공유한다. - 수신자는 링크를 클릭하며 내용을 탐색할 수 있고, GIF 같은 애니메이션 요소도 지원되어 정적인 문서보다 참여도가 높다. - 사용자 컨퍼런스와 같은 행사 발표 자료도 Figma에서 제작하고 공유할 수 있다. ## 실용적인 적용 방법 - 초기 아이디어 단계부터 프로토타입을 공유해 문제를 조기에 발견한다. - 시각적 완성도보다 검증하려는 목적을 먼저 정한다. - 카피, 상호작용, 기술적 제약 등 검토 대상에 맞춰 필요한 수준만 구현한다. - 프로토타입 링크와 함께 디자인 의도, 미해결 질문, 피드백이 필요한 부분을 설명한다. - 최종 산출물뿐 아니라 발표, 고객 설명, 원격 협업에도 프로토타입을 적극 활용한다.

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

Figma + Lambda School

Lambda School은 실시간 온라인 수업에 Figma를 결합해 대면 교실의 상호작용성과 협업성을 재현하고자 했다. Figma를 통해 학생들은 수업 자료를 함께 탐색하고, 작업 과정을 공유하며, 실시간·비동기 피드백을 주고받을 수 있었다. 또한 수업 중 생성된 작업물이 포트폴리오로 축적되어 학습과 취업 준비를 자연스럽게 연결했다. ## 온라인 수업을 위한 협업형 학습 환경 - Lambda School은 선불 학비 없이 9개월 동안 진행되는 온라인 실시간 교육 프로그램이다. - 웹 개발, 모바일 개발, 데이터 과학, UX 디자인 등을 가르치며, 기술 분야 취업에 필요한 실무 역량과 지원을 제공한다. - 핵심 과제는 원격 환경에서도 대면 수업처럼 연결되고, 직접 참여하며, 함께 작업할 수 있는 교실을 만드는 것이었다. - Figma는 브라우저 기반 공동 편집 기능을 통해 이 목표를 지원했다. ## 발표 자료를 함께 탐색하는 인터랙티브 수업 - 강사가 화면을 공유하고 학생들이 수동적으로 슬라이드를 보는 방식과 달리, Figma에서는 발표 자료 자체를 함께 조작할 수 있다. - 학생들은 다음과 같은 방식으로 수업 내용을 능동적으로 탐색한다. - 화면을 확대해 세부적인 곡선이나 디자인 요소 확인 - 캔버스를 스크롤하며 특정 로고나 사례 살펴보기 - 참가자들의 포인터를 통해 강사가 설명하는 위치를 실시간으로 파악 - 발표가 일방적인 전달이 아니라 강사와 학생이 같은 자료를 함께 살펴보는 활동이 된다. ## 작업 과정을 공유하는 디자인 실습 - 학생들은 처음부터 Figma에서 직접 디자인하고, 같은 파일 안에서 결과물을 반복적으로 발전시킨다. - 디자인의 변화 과정이 그대로 남기 때문에 학생들은 다음을 수행할 수 있다. - 다른 학생의 작업 과정을 관찰 - 진행 중인 결과물에 피드백 제공 - 동료의 디자인을 리믹스해 새로운 아이디어 실험 - 이러한 방식은 단순히 완성된 결과만 평가하는 것이 아니라, 디자인이 발전하는 과정 자체를 학습 대상으로 만든다. - 여러 디자이너가 하나의 프로젝트를 함께 완성하는 실제 업무 환경에도 익숙해질 수 있다. ## 실시간 피드백과 비동기 지원 - Figma의 댓글, 브라우저 편집 기능, 실시간 공동 작업을 활용해 학생과 강사가 작업 중인 디자인에 바로 의견을 남길 수 있다. - 학생들은 서로의 디자인에 별표를 남겨 좋은 작업을 투표하거나, 작업 파일을 보며 의견을 교환한다. - 동시에 작업하더라도 각자 파일의 영역에서 독립적으로 디자인할 수 있어, 서로의 작업을 방해하지 않는다. - 즉시 피드백이 필요할 때는 강사나 동료를 불러 같은 파일에서 직접 픽셀을 수정하며 논의할 수 있다. - 반대로 집중이 필요한 경우에는 다른 사람의 작업을 관찰만 하거나, 나중에 댓글을 남기는 비동기 방식도 가능하다. - 이 구조는 참여자 모두가 아이디어를 제공하면서도 학습자의 작업 자율성을 보장한다. ## 학습 결과물을 포트폴리오로 축적 - Lambda School은 수업뿐 아니라 취업까지 지원하며, 학생들이 자신의 역량을 고용주에게 보여줄 포트폴리오를 만들도록 돕는다. - Figma에서는 학생들의 디자인이 생성, 수정, 저장되는 과정이 지속적으로 기록된다. - 따라서 학생들은 오래된 파일을 찾아 정리하지 않아도 학습 과정과 최종 결과물을 포트폴리오에 활용할 수 있다. - 동료들의 작업에도 계속 접근할 수 있어 수업이 끝난 뒤에도 서로의 디자인에서 학습할 수 있다. - 결과적으로 학습 기록, 협업 과정, 최종 산출물이 하나의 작업 공간에 함께 남는다. ## 실용적인 결론 원격 디자인 교육에서는 화상회의만 제공하는 것보다 공동 편집, 실시간 피드백, 비동기 댓글, 작업 이력 보존 기능을 함께 구성하는 것이 효과적이다. 특히 학습자가 결과물뿐 아니라 제작 과정까지 기록할 수 있는 도구를 사용하면 수업 참여와 포트폴리오 준비를 동시에 달성할 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figmacollaborative-design웹 개발+3
figma3분 읽기큐레이션 요약

새로운 Maze 연동

Figma와 Maze의 통합으로 개발 단계까지 기다리지 않고 Figma 프로토타입을 초기부터 사용자 테스트할 수 있게 되었다. Figma 프로토타입 링크를 Maze에 복사해 가져오면 실제 사용자 행동을 정량적으로 측정하고, 제품팀이 연구 결과를 공유하며 개선 방향을 논의할 수 있다. 글은 효과적인 사용자 테스트를 위해 명확한 목표 설정, 사전 검증, 다양한 사용자 모집, 중립적인 과제 설계, 공동 분석을 권장한다. ## Figma와 Maze의 통합 - Figma 프로토타입 링크를 Maze에 복사·붙여넣기만 하면 테스트를 시작할 수 있다. - 개발 환경에서 A/B 테스트를 진행할 때까지 기다리지 않고, 디자인 초기 단계에서 사용성 문제를 발견할 수 있다. - Maze는 여러 사용자 흐름에서 경험을 정량적으로 측정한다. - 소규모 1:1 인터뷰부터 최대 5만 명 규모의 테스트까지 지원한다. - Maze는 Ring, Revolut, IBM 등 기업의 사용자 리서치에 활용되고 있다. ## 테스트 전에 성공 기준 정의 - 프로토타입을 만들기 전에 테스트의 목표와 성공 조건을 정해야 한다. - 목표는 구체적이고 측정 가능해야 한다. - 예를 들어 다음과 같이 기준을 수치로 정의할 수 있다. - 참가자의 80% 이상이 과제를 성공적으로 완료 - 오클릭 비율 2% 미만 - 테스트마다 검증하려는 목표와 평가 지표가 달라질 수 있으므로, 목적에 맞는 기준을 설정해야 한다. ## 실제 테스트 전 파일럿 진행 - 대규모 사용자 테스트 전에 내부 팀원, 친구, 가족 등을 대상으로 시험 운영을 한다. - 파일럿을 통해 다음 사항을 점검할 수 있다. - 과제 설명이 명확한지 - Figma 프로토타입의 인터랙션이 정상 작동하는지 - 테스트 목표가 실제로 의미 있는지 - 예상치 못한 오류나 혼란이 발생하는지 - 제품의 베타 테스트나 점진적 출시처럼 사용자 테스트도 사전 검증 단계가 필요하다. ## 기존 사용자와 비사용자 모두 모집 - 기존 사용자는 제품에 익숙하고 새로운 기능을 적극적으로 사용해볼 가능성이 높다. - 새로운 기능을 가장 많이 채택할 고객 세그먼트를 우선적으로 테스트하면 유용한 피드백을 얻을 수 있다. - 다만 기존 사용자만 조사하면 제품 구조에 익숙한 사람에게 편향될 수 있다. - 비사용자도 함께 테스트해 처음 접하는 사람의 관점과 직관성을 확인해야 한다. ## 유도하지 않는 과제와 질문 작성 - 사용자가 특정 답이나 경로를 따라가도록 지시하는 표현을 피해야 한다. - “여기를 클릭하세요”, “Signup 버튼으로 이동하세요”, “Feed 페이지로 가세요” 같은 표현은 사용자의 자연스러운 탐색 능력을 검증하지 못하게 한다. - 과제는 내부 기능명이나 구체적인 조작법보다 사용자가 달성해야 할 최종 목표 중심으로 작성해야 한다. - 이를 통해 인터페이스가 실제로 직관적인지 확인할 수 있다. ## 팀 전체가 참여하는 결과 분석 - 사용자 테스트의 어려움은 데이터를 얻는 것뿐 아니라, 결과에 대한 조직의 공감대를 형성하고 다음 행동을 결정하는 데 있다. - 제품팀 전체가 분석 과정에 참여하면 각자 결과를 해석하고 개선 방향을 논의할 수 있다. - Maze는 즉시 생성할 수 있는 리포트와 공유용 사용자 지정 URL을 제공한다. - 연구 결과를 팀원과 쉽게 공유해 발견 사항을 실제 제품 개선으로 연결할 수 있다. 실용적으로는 작은 파일럿 테스트부터 시작해 성공 지표를 검증한 뒤, 기존 사용자와 신규 사용자를 포함한 규모 있는 테스트로 확장하는 방식이 적절하다. 테스트 과제는 조작법이 아닌 사용자의 목표를 중심으로 작성하고, 결과 분석에는 디자이너·개발자·제품 담당자가 함께 참여하는 것이 좋다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma프로토타이핑user-testing+3
figma3분 읽기큐레이션 요약

More natural/engaging

2010년대 모바일 혁명은 기술 기업에서 디자인의 역할을 주변 업무에서 핵심 경쟁력으로 끌어올렸다. 스마트폰은 더 복잡한 사용 환경과 방대한 사용자 데이터를 만들어냈고, 디자이너는 기능 우선순위 설정과 지속적인 UI 실험을 주도하게 됐다. 특히 아이폰은 소비자가 기대하는 제품의 미적·사용성 기준을 높이며 기업 전반의 디자인 투자를 촉진했다. ## 모바일 물결이 디자인의 위상을 높이다 - 아이폰은 2007년에 출시됐지만, 2009년 인앱 결제와 2010년 아이패드 등장 이후 2010년대에 본격적으로 산업 전반을 변화시켰다. - 스마트폰 보급으로 제품이 일상생활의 중심이 되면서, 복잡한 기술 시스템을 간단한 상호작용으로 바꾸는 디자이너의 역량이 중요해졌다. - 과거 엔지니어 중심이었던 실리콘밸리 기업들은 디자인 인력을 대규모로 채용하기 시작했다. - IBM 같은 기업은 2년 동안 35개 이상의 디자인 에이전시를 인수할 정도로 디자인 역량 확보에 적극적으로 나섰다. ## 모바일 환경이 만든 복잡성 - 모바일 화면은 데스크톱보다 작고 기기별 크기도 다양해졌다. - 사용자는 마우스 클릭 대신 손가락으로 탭, 스와이프, 길게 누르기 등의 동작을 수행했다. - 사용 상황도 책상 앞에 한정되지 않고 걷거나 이동하는 중으로 확장됐다. - 기업은 제한된 화면과 사용자의 주의력 안에서 어떤 기능을 우선 제공할지 결정해야 했고, 이 과정에서 디자이너의 문제 정의와 우선순위 판단이 중요해졌다. - 컴퓨팅이 화면 안에만 머무르지 않고 사용자의 주변 환경과 일상 행동 속으로 확장됐다. ## 데이터 기반 디자인과 A/B 테스트 - 스마트폰은 카메라, 마이크, 위치 정보 등을 통해 과거보다 훨씬 많은 사용자 데이터를 만들어냈다. - 모바일 사용이 일상화되면서 제품팀은 버튼 색상, 문구, 화면 구성 같은 UI 변형을 지속적으로 실험했다. - 실험 결과는 가입, 구매, 공유 등 사용자의 실제 행동 변화로 평가됐다. - 페이스북을 비롯한 기업들은 이러한 실험을 수행할 디자이너를 적극 채용했다. - 디자인은 시각적 완성도를 만드는 일을 넘어, 성장 지표를 개선하는 데이터 기반 업무로 확장됐다. - 2011년부터 2019년 사이 미국 성인의 스마트폰 보유율은 35%에서 81%로 증가했다. ## 아이폰이 세운 디자인 기준 - 아이폰은 기술 제품이 단순히 기능적이기만 해서는 안 된다는 인식을 널리 퍼뜨렸다. - 과거의 소프트웨어가 투박하고 실무적인 도구로 여겨졌다면, 아이폰은 제품의 외관과 사용 경험 자체를 경쟁 요소로 만들었다. - 아이폰은 맥보다 더 넓은 대중에게 디자인 중심의 제품 경험을 보여주며 소비자의 기대치를 높였다. - 기업들은 애플처럼 보이고 작동하는 제품을 만들려 했고, 소비자 역시 애플 수준의 완성도를 기대하게 됐다. - 이런 영향은 아이폰뿐 아니라 안드로이드와 틴더 같은 모바일 중심 서비스의 디자인 방향에도 나타났다. - 애플의 영향은 긍정적인 디자인 혁신을 이끌었지만, 모든 제품이 애플의 미학을 모방하려는 결과도 낳았다. ## 실무적 시사점 모바일 제품을 설계할 때는 기능을 많이 넣는 것보다 사용자의 상황과 제약을 먼저 이해하고 핵심 상호작용을 선별해야 한다. 또한 정성적 사용자 이해와 A/B 테스트 같은 정량적 검증을 함께 활용하되, 단기 성장 지표뿐 아니라 전체 사용자 경험과 제품의 일관성까지 고려하는 것이 중요하다.

원문 읽기(새 탭에서 열림)
사용자 경험a-b-testingmobile-designux-ui-design+2
figma3분 읽기큐레이션 요약

와이어프레임 제작 방법 |

와이어프레임은 웹사이트나 디지털 제품의 구조와 기능을 빠르게 표현하는 설계 청사진이다. 시각적 장식보다 레이아웃과 사용자 경험에 집중하게 하므로, 팀의 의견과 사용성 조사 결과를 반영하며 아이디어를 반복적으로 개선하는 데 유용하다. 초기에는 단순하게 시작하고, 필요에 따라 시각적 디테일을 단계적으로 추가하는 것이 핵심이다. ## 와이어프레임의 의미와 역할 - 웹사이트나 디지털 제품의 **골격과 구조**를 보여주는 간단한 시각 가이드다. - 최종 디자인의 청사진이지만, 색상·그래픽·세부 스타일을 확정하는 단계는 아니다. - 디자이너뿐 아니라 기획자, 개발자, 이해관계자, 사용자도 이해할 수 있을 만큼 단순해야 한다. - 시각 요소를 최소화하면 색상이나 미적 요소에 매몰되지 않고 다음에 집중할 수 있다. - 기능이 제대로 동작하는가 - 사용자가 서비스를 어떻게 이용하는가 - 아이디어를 어떻게 개선할 수 있는가 - 확정된 결과물이 아니라 사용성 테스트와 이해관계자 피드백을 수집하기 위한 반복 설계 도구다. ## 로우 피델리티 와이어프레임 - 가장 기본적인 형태로, 종이와 펜만으로도 제작할 수 있다. - 보통 흑백 또는 회색조로 구성하며 다음을 중심으로 표현한다. - 페이지 레이아웃 - 콘텐츠의 큰 구조 - 주요 상호작용 - UI 요소와 콘텐츠는 사각형, 삼각형, 원, 선 같은 기본 도형으로 표시한다. - Figma로 제작하면 팀원과 쉽게 공유하고, 변경된 아이디어를 최신 상태로 유지할 수 있다. - 전통적인 디자인 과정에서는 손으로 그린 스케치 다음, 고해상도 목업이나 프로토타입 이전 단계에 해당한다. ## 하이 피델리티 와이어프레임 - 로우 피델리티 단계의 구조를 바탕으로 더 구체적인 시각 요소를 추가한다. - 다음과 같은 요소가 포함될 수 있다. - 브랜드를 나타내는 색상 - 그래픽과 이미지 - 글꼴 스타일 - 실제와 유사한 UI 컴포넌트 - 질감과 그림자 - 실제 이미지와 문구 - 경우에 따라 하이 피델리티 와이어프레임을 별도 단계로 거치지 않고, 로우 피델리티 와이어프레임에서 바로 프로토타입으로 진행할 수도 있다. ## 시각 요소를 단순하게 유지하기 - 와이어프레임의 목적은 완성된 디자인을 꾸미는 것이 아니라 구조와 경험을 검증하는 것이다. - 색상은 흰색, 검은색, 회색 중심의 그레이스케일로 제한하는 것이 좋다. - 타이포그래피는 정보의 위계를 전달하는 용도로 사용한다. - 글꼴은 최대 두 종류로 제한하고, 다음 방식으로 중요도를 구분한다. - 글자 크기 조절 - 굵게 또는 기울임꼴 적용 - 제목과 본문의 시각적 대비 조정 ## 이미지와 그래픽을 도형으로 표현하기 - 실제 이미지나 그래픽을 넣기보다 배치될 위치를 보여주는 단순한 기호를 사용한다. - 이미지 영역은 사각형이나 직사각형 안에 X 표시를 넣어 표현할 수 있다. - 동영상 영역은 박스 안에 재생 버튼 모양의 삼각형을 표시한다. - 이렇게 하면 콘텐츠 자체보다 화면 구성과 배치에 집중할 수 있다. ## 화면 크기와 사용 환경 고려하기 와이어프레임은 창의적인 설계 도구인 동시에 기술적 제약을 검토하는 도구이기도 하다. - **지원 기기** - 데스크톱과 모바일에서 디자인이 어떻게 달라지는지 각각 설계한다. - 반응형 레이아웃에서 콘텐츠와 UI 요소가 어떻게 재배치되는지 확인한다. - **화면 방향** - 세로형과 가로형 화면에서 레이아웃이 적절히 작동하는지 검토한다. - 기기와 방향에 따라 별도의 와이어프레임이나 변형 버전이 필요할 수 있다. - 디자인이 실제로 사용될 장소, 단계, 방식까지 고려하면 초기 단계에서 기술적 문제를 발견할 수 있다. ## 실용적인 적용 순서 - 아이디어를 빠르게 손그림이나 로우 피델리티 형태로 표현한다. - 레이아웃, 기능, 사용자 흐름에 대한 팀 피드백을 수집한다. - 사용성 조사 결과를 반영해 구조를 반복 수정한다. - 구조가 충분히 검증된 뒤 필요한 경우 색상, 이미지, 글꼴, 그림자 등 하이 피델리티 요소를 추가한다. - 협업과 버전 관리를 위해 Figma에서 공유 가능한 형태로 제작하는 것이 효과적이다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma프로토타이핑반응형 디자인+2
figma3분 읽기큐레이션 요약

워크플로우 속도를 높여주는

플러그인은 Figma에서 반복 작업을 자동화하고 디자인 데이터를 효율적으로 다루도록 돕는다. 이 글은 플러그인 생태계 출시 직후 주목할 만한 유틸리티 플러그인 5개를 소개하며, 화면 크기 조정부터 컴포넌트 복제·텍스트 편집·유사 레이어 선택까지 다양한 작업을 간소화하는 방법을 설명한다. 또한 단축키를 활용하면 플러그인을 더 빠르게 실행할 수 있다고 강조한다. ## Viewports: 기기 화면 크기 빠르게 확인 - 프레임을 스마트폰 등 일반적인 기기 화면 크기로 변경할 수 있다. - 디자인 요소에 먼저 Figma의 **Constraints**를 설정해야 화면 크기 변경에 따른 레이아웃 변화를 제대로 확인할 수 있다. - 각 뷰포트별로 해당 기기를 사용하는 사용자의 예상 글로벌 시장 점유율을 보여준다. - 이를 통해 어떤 화면 크기를 우선 고려할지 판단할 수 있다. - 플러그인은 별도의 수동 업데이트 없이 새 기능이 배포되면 사용할 수 있다. ## Component Cloner: 컴포넌트와 인스턴스 복제 - 선택한 마스터 컴포넌트만 복제하거나, 해당 컴포넌트의 인스턴스까지 함께 복제한다. - 색상 오버라이드가 적용된 아이콘을 별도로 실험하거나 아이콘 스프라이트를 제작할 때 유용하다. - 컴포넌트와 연결된 여러 인스턴스를 일일이 다시 만들 필요가 없어 반복 작업을 줄여준다. ## Nisa Text Splitter: 텍스트를 개별 객체로 분리 - 한 텍스트 박스에 입력된 여러 줄을 줄바꿈 기준으로 각각의 텍스트 박스로 분리한다. - 분리된 텍스트 객체를 알파벳순 또는 역순으로 정렬할 수 있다. - Figma의 **Smart Selections**와 함께 사용하면 여러 객체의 순서를 편리하게 재배치할 수 있다. - 반대로 여러 텍스트 박스를 하나의 텍스트 객체로 합치는 기능도 제공한다. - 목록, 메뉴 항목, 데이터 샘플처럼 줄 단위 편집이 필요한 작업에 적합하다. ## Find and Replace: 텍스트와 레이어 이름 일괄 변경 - 문서 전체에서 텍스트를 검색하고 다른 문자열로 치환한다. - 캔버스 위의 텍스트뿐 아니라 레이어 이름도 검색·변경할 수 있다. - 대소문자 구분 여부를 설정할 수 있다. - 검색 범위를 문자열의 어느 위치에 적용할지 선택할 수 있다. - 문자열 어디에서나 일치 - 문자열의 시작 부분 - 문자열의 끝 부분 - 전체 문자열이 정확히 일치 - 대규모 문서의 문구 수정이나 카피 변경 시 특히 유용하다. ## Similayer: 조건이 같은 레이어 일괄 선택 - 기준이 될 요소를 선택한 뒤, 원하는 속성을 지정해 동일한 조건의 레이어를 찾아 선택한다. - Figma의 “같은 속성을 가진 항목 모두 선택” 기능을 확장한 방식이다. - 다음과 같은 속성을 조합할 수 있다. - 테두리 반경 - 채우기 - 선 - 그림자 - 여러 속성을 동시에 조건으로 지정할 수 있어, 복잡한 디자인 요소도 빠르게 선별할 수 있다. - 유사한 레이어를 한꺼번에 수정해야 할 때 반복 클릭을 크게 줄여준다. ## 플러그인 실행 단축키 - Mac에서는 `⌘ + /`, Windows에서는 `Ctrl + /`로 메뉴 검색을 연다. - 검색창에 플러그인 이름을 입력한 뒤 키보드만으로 실행할 수 있다. - 직전에 실행한 플러그인은 다음 단축키로 다시 실행할 수 있다. - Mac: `⌘ + ⌥ + P` - Windows: `Ctrl + Alt + P` 반복적인 화면 검증, 컴포넌트 복제, 텍스트 정리, 일괄 수정이 자주 발생한다면 이 플러그인들을 작업 흐름에 맞게 조합해 사용하는 것이 좋다. 특히 플러그인 이름을 메뉴 검색으로 실행하는 습관을 들이면 마우스 조작까지 줄일 수 있다.

원문 읽기(새 탭에서 열림)
사용자 경험Figma웹 개발figma-plugins+1