사용자 흐름
사용자가 제품을 이용하는 경로입니다. 여정이 어디서 시작되고 각 단계에서 어떤 일이 일어나며 어디서 끝나는지 살펴봅니다. 주요 시나리오와 중요한 분기 경로를 정리합니다.
결과물: 화면을 디자인하기 전에 확정한 사용자 흐름.
서비스UX/UI 디자인
UX/UI 디자인
범위가 이미 명확한 제품을 위한 디자인 작업입니다. 사용자 흐름, 화면, 상태, 디자인 시스템을 설계하고 개발자에게 전달합니다. 모바일 앱 화면도 이 작업에 포함됩니다.
사용자 흐름, 화면, 상태.
개발자에게 바로 전달할 수 있습니다.
범위가 이미 명확한 제품을 위한 디자인 작업입니다. 사용자 흐름을 정리하고, 상태별 화면을 디자인하며, 개발자가 구현할 수 있는 디자인 시스템을 전달합니다. 모바일 앱 화면도 이 작업에 포함됩니다.
제품은 명확합니다.
이제 화면이 필요합니다.
과제와 대상 사용자, 범위가 정해져 있습니다. 이제 제품에 필요한 것은 일관된 인터페이스입니다. 이해하기 쉬운 흐름, 실제 기기에서 잘 작동하는 화면, 실제 상황을 빠짐없이 반영한 상태가 필요합니다.
제품에 맞춰 디자인하고 결과물을 팀에 전달합니다. 개발은 이 서비스에 포함되지 않으며, 개발자가 바로 구현할 수 있도록 파일을 준비합니다.
제품의 방향이 아직 정해지지 않았다면 프로덕트 디자인을 살펴보세요.
디자인에는 무엇이 들어갈까요?
사용자 흐름부터 결과물 전달까지, 개발자가 인터페이스를 구현하는 데 필요한 항목을 제공합니다.
화면
합의된 플랫폼과 화면 크기에 맞춰 각 단계의 인터페이스를 디자인합니다. 웹, 모바일 앱 또는 둘 다를 대상으로 하며 실제와 유사한 콘텐츠를 사용합니다.
결과물: 합의된 시나리오에 맞춘 화면.
상태
빈 상태, 로딩, 오류 및 성공 상태, 그리고 사용자가 작업을 확정하기 직전의 순간을 설계합니다. SKARR.PRO에서는 맞춤형 상호작용과 전환 효과도 세부적으로 디자인합니다.
결과물: 실제로 일어나는 상황을 빠짐없이 반영한 상태.
디자인 시스템
제품 전반에 일관되게 적용되는 컴포넌트, 타이포그래피, 색상 및 동작을 설계합니다. SKARR는 합의된 화면을 다루며, SKARR.PRO는 향후 기능에 대비해 시스템을 확장합니다.
결과물: 팀이 확장해 나갈 수 있는 시스템.
개발자 전달
컴포넌트, 사양 및 설명을 포함해 개발에 적합하게 정리한 Figma 파일을 제공합니다. SKARR.PRO에서는 개발자가 구현하는 동안 지원합니다.
결과물: 개발자가 바로 활용할 수 있는 인계 자료.
화면
사용 맥락까지.
모든 화면과 상태가 하나의 시스템에 속해야 인터페이스가 제대로 작동합니다.
Banking App.
개요에서 결정까지.
사용자는 지출 개요에서 특정 구독 항목으로 이동하고, 옵션을 비교한 뒤 명확한 다음 단계를 선택합니다. 그 과정의 모든 화면과 상태가 하나의 여정으로 이어집니다.
현재 개발 중인 자체 제품입니다. 인터랙티브 데모에서 화면이 실제로 어떻게 쓰이는지 확인해 보세요.
데모 사용해 보기개발자가 구현할 수 있는 Figma 파일
을 제공합니다.
합의된 사용자 흐름, 화면 및 상태를 정리된 Figma 파일로 제공합니다. 컴포넌트, 타이포그래피 및 동작을 포함한 디자인 시스템도 함께 제공합니다.
개발은 이 서비스에 포함되지 않습니다. 전달 후 변경 사항은 별도 작업으로 진행합니다. SKARR.PRO에는 합의된 인계 기간 동안 개발자를 지원하는 내용이 포함됩니다.
사용자 흐름부터
결과물 전달까지.
제품과 그 범위는 고객님이 제시합니다. 저희는 함께 인터페이스를 디자인하고 개발자에게 전달할 수 있도록 준비합니다.
01
범위 파악하기
제품과 대상 사용자, 포함할 시나리오를 공유해 주세요. 기존 자료를 검토하고, 플랫폼을 확인한 뒤 한 달 동안 진행할 작업을 합의합니다.
02
사용자 흐름 정리하기
사용자 여정과 각 단계에서 필요한 정보를 살펴보고, 화면을 디자인하기 전에 흐름을 확정합니다.
03
화면과 상태 디자인하기
Figma에서 화면, 상태 및 컴포넌트를 구체화합니다. 주요 여정을 함께 검토하고 세부 사항을 다듬습니다. SKARR.PRO에서는 결정이 아직 열려 있는 부분에 대해 대안을 살펴봅니다.
04
결과물 전달하기
사양과 설명을 포함해 파일을 개발에 적합하게 정리합니다. SKARR.PRO에서는 합의된 인계 기간 동안 개발자를 지원합니다.
인터페이스에 필요한
구현 범위를 선택하세요.
두 옵션 모두 범위가 명확한 제품을 위한 디자인 전용 서비스입니다. 화면, 시스템 및 결과물 전달의 깊이를 비교해 보세요.
| 항목 |
SKARR
맞춤형 화면 디자인. 고유한 시각 언어.
$5,000 / 월
월간 작업 비용
SKARR 구매
Stripe 보안 결제 |
SKARR.PRO
경험 전반의 모든 접점을 더 깊고 세밀하게.
$6,990 / 월
월간 작업 비용
SKARR.PRO 구매
Stripe 보안 결제 |
|---|---|---|
| 디자인 | ||
| 시작 기준 | 시작 기준 과제, 대상 사용자 및 범위가 이미 명확한 제품. | 시작 기준 동일한 디자인에 더해, 대안을 검토해 볼 만한 미결정 디자인 항목을 다룹니다. |
| 사용자 흐름 및 화면 | 사용자 흐름 및 화면 합의된 시나리오와 플랫폼에 맞춘 사용자 흐름 및 화면. | 사용자 흐름 및 화면 사용자 흐름 및 화면을 제공하며, 결정이 아직 열려 있는 부분은 대안을 검토합니다. |
| 상태 및 상호작용 | 상태 및 상호작용 합의된 화면의 빈 상태, 로딩, 오류 및 성공 상태. | 상태 및 상호작용 동일한 상태를 다루되, 맞춤형 상호작용과 전환 효과를 세부적으로 디자인합니다. |
| 디자인 시스템 | ||
| 컴포넌트 | 컴포넌트 합의된 화면에 필요한 컴포넌트, 타이포그래피, 색상 및 동작. | 컴포넌트 향후 화면과 기능에 대비해 확장한 시스템. |
| 플랫폼 | 플랫폼 프로젝트에서 합의한 웹, 모바일 앱 또는 둘 다. | 플랫폼 웹, 모바일 앱 또는 둘 다를 대상으로 화면 크기와 플랫폼별로 더 깊이 있게 적용합니다. |
| 결과물 전달 | ||
| 월간 작업 | 월간 작업 한 달간의 디자인 작업입니다. 시작 전에 범위와 목표 결과물을 합의합니다. | 월간 작업 선택한 작업 수준에 따른 한 달간의 디자인 작업입니다. 시작 전에 범위와 목표 결과물을 합의합니다. |
| 제공 항목 | 제공 항목 정리된 Figma 파일: 사용자 흐름, 화면, 상태 및 디자인 시스템. | 제공 항목 동일한 내용에 검토한 대안과 확장된 시스템을 더합니다. |
| 개발자 지원 | 개발자 지원 인계 시 전달하는 설명과 질문에 대한 답변. | 개발자 지원 합의된 인계 기간 동안 개발자를 지원합니다. |
시작하기
전에.
인터페이스 개발도 해주시나요?
아니요. UX/UI 디자인은 디자인과 결과물 전달을 다룹니다. 디자인한 인터페이스의 구현은 별도 서비스입니다. 웹사이트와 웹 인터페이스는 프런트엔드 개발, 애플리케이션은 앱 개발 서비스를 이용하실 수 있습니다.
모바일 앱 화면도 디자인할 수 있나요?
네. 모바일 앱 화면도 이 작업에 포함됩니다. 시작할 때 플랫폼과 화면 크기를 합의합니다.
저희가 무엇을 준비해야 하나요?
제품 또는 제품 설명, 포함할 시나리오, 브랜드·현재 화면·분석 자료 등의 기존 자료, 그리고 한 달 동안 의사결정을 내릴 담당자가 필요합니다.
제품이 아직 정의되지 않았다면 어떻게 하나요?
그렇다면 더 이른 단계부터 시작합니다. 프로덕트 디자인은 화면에 앞서 과제, 대상 사용자 및 제품 모델을 구체화합니다.
결과물 전달 후에는 어떻게 되나요?
개발자는 전달된 파일을 바탕으로 구현합니다. 합의된 인계 기간 중 질문에 대한 지원은 SKARR.PRO에 포함됩니다. 추가 화면은 새로운 작업으로 합의합니다.
아직 궁금한 점이 있으신가요?
인터페이스 상담하기