e-commerce

4 개의 포스트

figma

좋은 기업들과 함께: 소매 (새 탭에서 열림)

리테일 기업은 Figma를 활용해 고객 여정을 매끄럽게 만들고, 여러 디지털 접점에서 일관된 브랜드 경험을 구축하고 있다. Nuuly는 고객용·렌탈 운영용 디자인 시스템을 분리해 복잡한 의류 대여 과정을 단순화했으며, Figma 도입으로 협업과 개발 핸드오프를 개선했다. 글은 Ruggable과 GitHub 사례를 통해서도 디자인 시스템과 부서 간 협업이 전자상거래 경험을 강화한다고 설명한다. ## 변화하는 전자상거래 경험 - 오늘날 전자상거래는 단순한 상품 판매를 넘어 다음 요소를 함께 요구한다. - 고객 신뢰 형성 - 원활한 구매·이용 여정 - 여러 디지털 채널에서의 일관된 브랜드 경험 - 직원과 운영 조직의 업무 효율 - Nuuly, Ruggable, GitHub 등의 기업은 Figma를 중심으로 디자인·마케팅·개발·운영 조직의 협업을 강화하고 있다. - 디자인 시스템과 프로토타이핑 도구를 활용해 고객 접점뿐 아니라 내부 업무용 제품까지 체계적으로 설계한다. ## Nuuly의 의류 렌탈 경험 단순화 - 2019년 시작한 Nuuly는 특별한 날뿐 아니라 일상에서도 의류를 대여하는 문화를 확산시키려 한다. - 의류 렌탈에는 고객 경험 외에도 다음과 같은 복잡한 운영 과정이 필요하다. - 순환 재고 관리 - 의류 세탁 - 수선 및 재사용 - Nuuly는 서로 다른 목적을 가진 두 개의 디자인 시스템을 구축했다. - 고객이 사용하는 렌탈 서비스용 시스템 - 재고·세탁·수선 등을 관리하는 렌탈 운영용 시스템 - 색상과 타이포그래피를 토큰화해 계절과 브랜드 변화에 맞춰 쉽게 교체할 수 있도록 설계했다. ## 복잡한 렌탈 상태를 직관적으로 표현 - Nuuly는 복잡한 물류 기술을 고객에게 직접 노출하기보다, 렌탈 과정을 최대한 단순하고 직관적으로 보여주는 데 집중했다. - `My Nuuly` 기능은 고객의 Nuuly 가방을 중심으로 현재 상태와 다음 단계를 안내한다. - 이 기능은 26개가 넘는 렌탈 상태를 고객이 이해하기 쉬운 흐름으로 연결한다. - 물리적인 의류 배송 경험과 디지털 화면을 하나의 연속적인 고객 여정으로 통합한 사례다. ## Figma를 통한 디자인 시스템 통합 - Figma 도입 전 Nuuly의 디자인 시스템은 파일 크기와 서버 동기화 제약 때문에 여러 파일로 분산되어 있었다. - 총 16개 파일을 관리해야 했고 성능도 느렸다. - 2023년 Figma로 이전하면서 시스템을 재구축해 두 개의 단순한 Figma 라이브러리로 통합했다. - 그 결과: - 디자인 작업 속도가 빨라짐 - 네이티브 프로토타이핑으로 인터랙션 의도를 개발자에게 명확히 전달 - 디자인·개발 간 핸드오프 개선 - 조직 전체의 민첩성과 협업 수준 향상 ## 여러 부서로 확장된 협업 - Figma 도입은 UX 팀에만 국한되지 않고 콘텐츠 디자인팀과 스튜디오 사진팀으로 확산됐다. - FigJam과 Figma Slides를 통해 더 넓은 조직이 다음 업무에 참여했다. - 아이디어 발상 - 고객 여정 개선안 검토 - 신규 기능 논의 - 대표적인 사례로 구독자가 대여하지 않고 바로 구매할 수 있는 최종 판매 상품을 제공하는 `The Thrift Shop`이 소개된다. - 도구 통합으로 팀은 반복적인 파일 관리보다 협업과 창의적 탐색, 고객 중심 사고에 더 많은 시간을 쓸 수 있게 됐다. ## Ruggable과 GitHub 사례 - Ruggable은 소셜 미디어 광고, 홈페이지, 상품 상세 페이지 등 여러 디지털 표면에서 일관된 경험을 구축하는 사례로 소개된다. - GitHub는 Design Business Company와 협업해 개발자를 위한 전자상거래 스토어를 설계한 사례로 언급된다. - 두 사례 모두 전자상거래가 단일 웹페이지의 문제가 아니라 마케팅·브랜드·제품 경험을 연결하는 통합적인 디자인 과제임을 보여준다. Nuuly 사례는 복잡한 내부 운영을 고객에게는 간단한 경험으로 전달하려면, 고객용 화면과 운영 시스템을 함께 설계해야 한다는 점을 보여준다. 실무적으로는 디자인 토큰과 공유 라이브러리를 도입하고, 프로토타입과 협업 도구를 디자인·개발·마케팅 전반에 활용하는 것이 일관된 브랜드 경험과 빠른 개선에 효과적이다.

figma

쇼피파이가 앞서 (새 탭에서 열림)

Shopify는 점진적 개선보다 과감한 시도를 장려하며, 기존의 문서·회의·계획 방식을 의도적으로 흔들어 새로운 아이디어를 만든다. 핵심은 문제를 선형적으로 정리하기보다 시각적 도구와 협업 템플릿을 활용해 관점을 확장하고, 다양한 구성원이 전략적 의사결정에 참여하도록 하는 것이다. 이 방식은 제품 로드맵 수립부터 연간 계획, 대규모 브레인스토밍까지 적용된다. ## 문서 중심 사고에서 벗어나기 - 일반적인 로드맵 작성은 문서에 문제와 질문을 적고 동료에게 검토를 요청하는 방식이다. - Shopify의 Katarina Batina는 이런 방식이 습관에 머무를 뿐, 실제 문제나 더 큰 기회를 놓치게 할 수 있다고 지적한다. - 추상적인 비전 문구만으로는 해결하려는 문제와 기회를 명확히 파악하기 어렵고, 독창적인 아이디어가 나올 여지도 줄어든다. - FigJam 같은 시각적 협업 도구와 템플릿은 문제를 다양한 관점에서 바라보게 하며, 사고의 선형성을 깨뜨린다. - 로드맵 검토 과정에서 다음 요소를 명시적으로 정리할 수 있다. - 핵심 지표 - 주요 문제 - 제안하는 해결책 - 의사결정 원칙 - 핵심 가정 - 의존성 ## 계획하는 방식부터 설계하기 - 템플릿은 기존 프로세스를 바꾸는 데 그치지 않고, 프로세스가 부족한 영역에 구조를 제공할 수도 있다. - Shopify의 원격 중심 조직은 대면 모임에서 무엇을 논의해야 할지 정하기 어려웠기 때문에 연간 계획용 FigJam 템플릿을 도입했다. - 참석자들은 모임 전에 템플릿을 작성해 공통의 출발점을 만들고, 현장에서 논의한 내용을 실시간으로 업데이트했다. - 전략적 결정이 협업 보드에 바로 기록되므로, 회의 후 스티키 노트를 촬영하거나 별도로 정리할 필요가 줄었다. - 노트북을 사용하면서도 실제로 함께 토론하는 환경을 만들 수 있었고, 팀은 이를 가장 효과적인 계획 세션으로 평가했다. ## 시각적 언어로 의사결정 민주화하기 - Shopify에서는 디자인이 전략적 제품 결정을 논의하는 형식이며, Figma가 그 과정을 지원하는 핵심 도구로 활용된다. - 글쓰기 능력에 따라 아이디어 표현력이 좌우되는 문서 중심 회의의 한계를 보완할 수 있다. - 모든 사람이 자신의 비전을 긴 문서로 설명하기는 어렵지만, 이미지·링크·스크린샷·다이어그램을 활용하면 생각을 더 빠르고 명확하게 공유할 수 있다. - 특히 20명 안팎이 참여하는 대규모 회의에서는 시각 자료가 참여 장벽을 낮춘다. - 시각적 협업은 디자이너뿐 아니라 다양한 방식으로 사고하는 구성원도 아이디어를 제시하게 해 인재와 관점의 다양성을 확대한다. ## 도구보다 중요한 것은 기존 관습에 대한 질문 - Shopify의 접근법은 특정 도구를 도입하는 데만 초점을 두지 않는다. - “항상 문서로 시작해야 하는가”, “회의에서 누가 어떻게 발언해야 하는가”, “계획 결과를 어떤 방식으로 기록할 것인가” 같은 기본 가정을 다시 검토한다. - 익숙한 방식은 효율적으로 보일 수 있지만, 새로운 문제를 발견하거나 큰 아이디어를 발전시키는 데는 한계가 있을 수 있다. - 따라서 목적에 따라 문서, 시각 보드, 템플릿, 실시간 협업 방식을 조합해야 한다. 팀의 창의성을 높이려면 문서 작성 절차를 그대로 따르기보다 문제·기회·가정·지표를 시각적으로 펼쳐 놓고 논의하는 것이 유용하다. 또한 회의 전 사전 작성, 회의 중 실시간 편집, 이미지와 링크를 활용한 표현을 결합하면 원격·대규모 팀에서도 더 포괄적이고 실행 가능한 결정을 만들 수 있다.

figma

온라인 쇼핑객을 위해 디자인 (새 탭에서 열림)

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

떠오르는 UI/UX (새 탭에서 열림)

실리콘밸리에 집중된 시각에서 벗어나면 전 세계 곳곳에서 UI/UX 디자인 커뮤니티가 빠르게 성장하고 있다. 컨퍼런스, 밋업, 원격 근무, 교육 프로그램이 차세대 디자이너와 국제적 네트워크를 형성하는 기반이 된다. 글은 상파울루, 선전, 리가, 리마 등 신흥 디자인 도시를 소개하며, 디자이너가 새로운 환경에서 커뮤니티와 기회를 발견할 수 있다고 주장한다. ## 세계 각지로 확산되는 UI/UX 커뮤니티 - 기술·제품 디자인 산업은 실리콘밸리에 지나치게 집중되는 경향이 있다. - 실제로는 전 세계 여러 도시에서 디자인 커뮤니티와 기술 생태계가 성장하고 있다. - 성장의 배경에는 다음 요소가 있다. - 디자인 컨퍼런스와 밋업 증가 - 원격 근무와 디지털 노마드 확산 - 차세대 디자이너를 육성하는 교육 프로그램 - 글은 Meetup.com과 UNESCO 창의도시 목록 등을 활용해 신흥 디자인 중심지를 조사했다. - 새로운 도시를 찾는 졸업생, 국제 커뮤니티를 원하는 디자이너, 원격 프리랜서에게 이러한 지역이 기회가 될 수 있다고 설명한다. ## 상파울루: 다문화 환경과 실무 중심 커뮤니티 - 높은 교육 수준의 중산층과 다양한 인구 구성이 기술·디자인 생태계의 기반이 되고 있다. - 일본계 인구가 일본 외 지역 중 가장 많고, 라틴아메리카 최대 규모의 공개적 LGBTQ 커뮤니티가 있는 도시로 소개된다. - `Design Thinking para Startups` 밋업에는 약 5,263명이 참여하며 다음과 같은 주제를 다룬다. - 디자인 스프린트 - 가치 제안 디자인(Value Proposition Design) - `Front UX`는 디자이너와 개발자의 협업 및 워크플로 개선에 초점을 둔 대규모 커뮤니티다. - 현지 UX/UI 컨설팅 회사인 Key Ideas는 Nestlé, Samsung, Colgate 등을 고객으로 보유해 실무 기회를 제공한다. ## 선전: 제조업 도시에서 디지털 디자인 중심지로 - 선전은 1980년 인구 3만 명의 어촌에서 출발했지만, 중국의 특별경제구역 지정 이후 급격히 성장했다. - 37년 만에 인구가 약 1,100만 명으로 증가하며 중국의 대표적인 디자인·기술 도시가 됐다. - 2017년 기준 약 6,000개의 디자인 회사가 10만 명을 고용하고 있었다. - 디지털화가 일상생활에 미치는 영향이 큰 도시로 평가되며, 다양한 디자인 분야가 함께 발전하고 있다. - UNESCO가 인정한 문화 중심지이기도 하며, 향후 기술 산업과 혁신에서 실리콘밸리와 같은 역할을 할 도시로 전망된다. ## 리가: 역사적 도시 안에서 성장하는 UX 네트워크 - 고딕 양식의 구시가지와 현대적인 창작자 커뮤니티가 공존하는 도시다. - 매년 열리는 `UX Riga` 컨퍼런스는 다음 규모로 운영된다. - 3일간 진행 - 국제 연사 14명 - 워크숍 8개 - 참가자 약 450명 - 워크숍 주제에는 사회적 영향력을 UX에 적용하는 방법과 실용적인 UX 기법이 포함된다. - `UX/UI Riga` 밋업에는 667명의 디자이너가 참여하며 다음 주제를 논의한다. - 전자상거래와 UX의 접점 - 실용적인 프로토타이핑 - 리가에 기반을 둔 DigiPulse는 세계 최초의 디지털 암호화폐 금고로 소개되며, 도시의 기술 스타트업 역량을 보여주는 사례로 제시된다. ## 리마: 라틴아메리카의 잠재적 디자인 도시 - 리마는 멕시코시티와 상파울루에 이어 아메리카 대륙에서 세 번째로 큰 대도시권으로 소개된다. - 해안 도시의 특성과 스페인 바로크·식민지 건축이 독특한 시각적 환경을 만든다. - 제공된 글 일부에서는 리마의 UX/UI 커뮤니티와 구체적인 사례 설명이 이어지기 전에 내용이 중단된다. ## 실용적인 시사점 UI/UX 디자이너는 실리콘밸리만을 유일한 기회로 볼 필요가 없다. 밋업 참여자 수, 정기 컨퍼런스, 교육 프로그램, 현지 기업과 스타트업 생태계를 기준으로 도시를 탐색하면 자신의 경력 단계와 관심 분야에 맞는 국제적 커뮤니티를 찾을 수 있다.