무엇을 만들지 명확히 합니다.
비즈니스 목표, 프로덕트를 사용하는 사람들, 그들이 완료해야 할 작업을 함께 검토합니다. 다음 버전의 우선순위와 범위를 정합니다.
중심으로 설계합니다.
맞춰 구성합니다.
열린 질문에서
작동하는 제품까지.
아이디어를 구상 중일 수도 있고, 기존 프로덕트를 개선하거나 새로운 기능을 만들고 있을 수도 있습니다. 출발점을 명확한 계획과 차별화된 인터페이스, 실제 작동하는 구현으로 발전시킵니다.
프로덕트 기획, 비주얼 디자인 및 개발을 긴밀하게 연결합니다. 함께 내린 결정이 사람들이 사용하는 소프트웨어에 그대로 이어집니다.
작동 방식을 확인합니다.
사용자 여정을 구성하고 인터페이스에 고유한 비주얼 특성을 더합니다. 개발에 앞서 실제 화면을 검토하고 프로토타입에서 주요 상호작용을 체험합니다.
실제 사용으로 이어갑니다.
합의한 기능을 구축하고, 기능에 필요한 서비스를 연결하며, 프로덕트가 어떻게 작동하는지 확인합니다. 작동하는 인터페이스에서도 디자인 결정을 검토합니다.
첫 결정부터 출시까지, 또는 팀에 필요한 다음 단계까지. 진행 방식을 확인하세요
작은 화면.
하나의 완전한 경험.
Banking App을 살펴보세요.
시나리오를 선택하고,
직접 체험해 보세요.
Banking App에서는 한눈에 보는 화면에서 결정과 명확한 다음 단계로 이어지는 흐름을 경험할 수 있습니다. 제품을 사용하는 사람들에게 필요한 정보와 가능한 작업, 작업 후에 이어지는 일까지 전체 여정을 설계합니다.
결정을 내리기 전에.
필요한 정보를 바로 확인할 수 있습니다. 선택지를 비교하고 어떤 작업이 어떤 변화를 가져오는지 이해한 뒤 결정할 수 있습니다.
진행 중에.
인터페이스가 반응합니다. 진행 상황을 보여주고, 문제를 설명하며, 다시 시도해 계속 진행할 수 있는 명확한 방법을 제공합니다.
작업을 마친 후.
결과가 명확합니다. 작업이 제대로 완료되었는지 추측할 필요 없이 무엇이 바뀌었고 다음에 어디로 가야 하는지 확인할 수 있습니다.
고민은 줄이고,
더 많은 일을 해내세요.
매끄러운 상호작용을 뒷받침하는 작업.
더 넓은 시야.
더 명확한 다음 단계.
빠른 모바일 작업과 팀 업무 공간은 정보를 서로 다른 방식으로 구성해야 합니다.
웹 앱과 대시보드에서는 상태, 상세 정보 및 작업을 명확한 구조로 구성합니다. 팀은 주의가 필요한 항목을 확인하고, 관련 맥락을 살펴본 뒤 업무를 진행할 수 있습니다.
세심한 설계.
디테일까지.
프로덕트의 개성은 세부 사항에서 드러납니다. 글을 읽는 방식, 반응하는 방식, 다음 단계로 나아가도록 돕는 방식이 중요합니다.
명확함에는
구조가 있습니다.
개요세부 정보작업
정보 구조는 복잡한 프로덕트를 사람들이 따라갈 수 있는 경로로 바꿉니다.
사람을
사용자 ID로 보지 않습니다.
실제 필요, 습관 및 맥락이 의사결정을 이끕니다.
모든 요소가
하나의 언어로.
구성 요소, 타이포그래피 및 동작이 하나의 체계로일관성을 이룹니다.
읽고.
파악하고. 실행합니다.
정보 위계에 따라 중요한 항목을 적절한 위치에 배치합니다.
아무것도 없는 화면도
하나의 상태입니다.
오늘 예정된 작업이 없습니다최신 상태입니다.
빈 화면, 로딩, 오류 및 성공 상태도 사용자 경험의 일부입니다.
진행 방식.
각 단계에서 열린 질문을 다음 작업의 토대가 될 결정으로 전환합니다. 범위를 합의하고, 주요 결정을 함께 검토하며, 진행 과정에서 새로운 사실이 드러나면 전제를 다시 살펴봅니다.
분석 및 리서치
비즈니스, 사용자 및 사용 맥락을 살펴보고 프로덕트가 달성해야 할 목표를 정합니다. 중요한 질문을 파악한 뒤 답을 찾는 데 필요한 조사를 선택합니다.
프로젝트에 따라 다음을 포함할 수 있습니다.
- 비즈니스 및 제품 분석
- 이해관계자 인터뷰, 목표, 가치 제안, 제약 조건 및 성공 기준.
- 사용자 조사
- 인터뷰와 적절한 사용자 조사 방법을 통해 필요, 습관, 작업 및 사용 맥락을 살펴봅니다.
- 경쟁 분석 및 벤치마킹
- 직접적인 경쟁 제품 및 다른 업계의 관련 제품을 대상으로 기능, 사용자 흐름 및 상호작용 패턴을 살펴봅니다.
- 프로덕트 진단
- 기존 사용자 여정, 이용 가능한 분석 데이터와 사용자 피드백, 현재 프로덕트 경험의 부족한 부분을 살펴봅니다.
- 비주얼 리서치
- 브랜드 맥락, 참고 사례 및 탐색할 가치가 있는 표현 방향.
조사 결과를 종합해 디자인 결정을 이끌 프로덕트 개요, 우선순위 및 가설을 정리합니다.
구조 및 프로토타이핑
각 단계에서 사용자에게 필요한 정보와 그 과정에서 내려야 할 결정을 정의합니다. 이를 바탕으로 정보 구조, 탐색, 콘텐츠 위계, 사용자 흐름 및 화면 프로토타입을 개발합니다.
프로토타이핑을 통해 주요 시나리오와 핵심 상호작용의 논리를 검토합니다. 여기에는 사용자가 작업을 확정하기 직전의 순간도 포함됩니다. 상세 디자인 전에 주요 여정을 검토하고 적절한 테스트를 진행해 궁금한 점을 해결합니다.
주요 시나리오를 구체화한 명확한 사용자 여정과 프로덕트의 구조적 기반을 마련합니다.
비주얼 콘셉트 개발
프로덕트의 외관과 느낌, 동작 방식을 탐색합니다. 타이포그래피, 구성, 색상, 상호작용 및 모션을 프로덕트 개요에 기반한 비주얼 방향으로 발전시킵니다.
대표 화면과 상호작용에 비주얼 방향을 적용해 보여드리고, 그 근거를 설명한 뒤 팀과 함께 선정한 콘셉트를 다듬습니다.
프로덕트 전반에 적용할 수 있도록 합의된 비주얼 언어를 마련합니다.
인터페이스 및 디자인 시스템
최종 화면에서 구조와 비주얼 방향을 하나로 결합합니다. 이 단계에서 콘셉트는 재사용 가능한 구성 요소, 반응형 동작 및 각 작업에 따른 상태를 갖춘 완전한 인터페이스로 발전합니다.
실제와 같은 콘텐츠와 데이터, 다양한 화면 크기 및 빈 화면, 로딩, 오류, 성공 상태를 포함한 주요 여정의 세부 사항을 검토합니다.
프로덕트 규모에 맞춰 구성 요소, 타이포그래피 및 동작 체계를 개발하여 향후 기능을 지원합니다.
개발을 시작할 준비가 된 일관성 있는 인터페이스를 완성합니다.
개발 및 테스트
작업을 시작하기 전에 합의한 범위에 따라 화면, 상호작용, 상태 및 연동을 구현합니다. 개발 전반에 걸쳐 디자인을 검토하여 실제 작동하는 프로덕트에서도 타이포그래피, 레이아웃, 모션 및 동작의 의도된 품질을 유지합니다.
합의한 플랫폼과 기기에서 주요 여정, 양식 및 인터페이스 상태, 접근성 및 성능을 테스트하고 구현 결과를 디자인과 대조해 검토합니다.
합의한 범위에 따라 실제로 작동하는 구현을
출시할 수 있도록 준비합니다.
출시 및 추가 개선
합의한 플랫폼에서 프로덕트를 출시할 수 있도록 준비하고, 출시 후 주요 시나리오와 합의한 분석 이벤트가 제대로 작동하는지 확인합니다. 기존 프로덕트의 경우 현재 사용자가 새 버전으로 전환하는 방법을 계획합니다.
분석 단계에서 정한 성공 기준에 따라 측정 항목을 결정합니다.
합의한 인계 자료를 제공하고 팀과 함께 출시 초기 결과를 검토합니다.
출시 후 추가 작업을 진행할 수 있습니다.
사용자 피드백과 이용 가능한 프로덕트 데이터를 검토하고, 기회를 우선순위화해 다음 개선 사항을 합의합니다.
각 주기에서 사용자 흐름, 상호작용, 콘텐츠, 새 화면 또는 기능을 다룰 수 있습니다. 변경 사항은 프로덕트 목표와 이용 가능한 근거를 바탕으로 평가합니다.
작업 범위와 주기는 별도로 합의합니다.
합의한 측정 체계를
갖춘 프로덕트를 출시해 다음 개선을 이끌 수 있습니다.
디자인. 코드.
앞으로의 개발을 뒷받침하는 기반.
프로젝트에는 명확한 제품 구조와 상세한 인터페이스 디자인이 포함됩니다. 개발도 포함되어 있어, 합의한 기능이 실제로 작동하는 구현물도 제공됩니다.
팀에서 바로 활용할 수 있는 디자인
합의된 화면과 주요 사용자 여정, 인터페이스 상태를 담은 Figma 파일을 제공합니다. 레이아웃과 재사용 가능한 요소는 다음 단계에서 디자이너와 개발자가 참고할 명확한 기준이 됩니다.
재사용 가능한 React 컴포넌트
React 웹사이트를 제작할 때 폼, 내비게이션 등 반복해서 사용하는 부분에 공통 컴포넌트를 적용합니다. 레이아웃은 다양한 화면에 맞게 조정되며, 새로운 기능도 동일한 디자인과 동작 방식을 바탕으로 확장됩니다.
연결과 검증
합의된 API와 서비스를 연결한 다음, 주요 사용자 여정과 반응형 레이아웃, 로딩·오류·성공 상태를 확인합니다. 출시 전에 실제로 작동하는 버전을 검토하실 수 있습니다.
명확한 인수인계
합의된 디자인 파일과 소스 코드, 설정 안내를 팀에 전달합니다. 준비된 사항과 실행 방법, 출시 및 지속적인 유지 관리를 담당할 사람을 함께 확인합니다.
다음 버전을 위한 기반
제품에 더 폭넓은 디자인 시스템이 필요하다면 Figma 라이브러리와 이에 맞는 React 컴포넌트를 제작하고 사용 방법도 안내해 드릴 수 있습니다. 이후 추가되는 화면도 같은 시각 언어와 동작 방식을 공유할 수 있습니다.
시스템의 범위와 통합 항목, 기술적 범위는 고객과 함께 합의합니다. 네이티브 모바일 앱에 사용할 기술 스택은 프로젝트별로 별도 선정합니다.
여러분의
제품에 대해 알려주세요. 다음에 할 일을
함께 구상해 보겠습니다.
누구를 위한 제품인지, 어떤 일을 해야 하는지, 현재 어떤 단계인지 알려주세요. 오른쪽의 짧은 양식을아래에서 작성해 주세요. 다음 단계는 이메일로 답변드리겠습니다.
프로젝트 개요
-
모바일 앱프로젝트 개요가 곧 공개됩니다.
-
웹 앱프로젝트 개요가 곧 공개됩니다.