과제와 사용자
비즈니스 목표와 제품을 사용하는 사람, 그들이 완료해야 할 과제를 살펴봅니다. 함께 우선순위와 다음 버전의 범위를 정합니다.
결과물: 제품 개요서, 우선순위, 가설.
서비스프로덕트 디자인
프로덕트 디자인
화면을 만들기 전에 시작하는 작업입니다. 목표와 대상 고객, 제품 모델, 주요 시나리오, 핵심 인터페이스를 다룹니다. SKARR.PRO에서는 검증된 가설과 대안 제품 모델도 제공합니다.
화면을 만들기 전에.
제품 자체부터.
아이디어 단계에서 시작하거나 기존 제품을 개선하거나 새로운 기능을 만들 수 있습니다. 그 출발점을 제품 모델과 핵심 인터페이스로 구체화하고, 합의한 경우 작동하는 코드까지 구현합니다.
열린 질문에서
작동하는 제품까지.
제품 기획과 인터페이스 디자인, 개발을 긴밀하게 연결합니다. 함께 내린 결정이 사람들이 실제로 사용하는 소프트웨어에 반영됩니다.
시작할 때 작업 범위를 합의하고 주요 결정을 함께 검토하며, 작업 중 새로운 사실이 드러나면 기존 가정을 다시 살펴봅니다.
제품의 방향이 이미 정해져 있고 화면과 흐름, 상태 설계가 필요하다면 UX/UI 디자인을 살펴보세요.
함께
살펴볼 내용.
각 단계에서 열린 질문을 다음 작업의 토대가 될 결정으로 구체화합니다.
제품 모델과 주요 시나리오
제품이 무엇인지, 어떻게 가치를 제공하는지, 어떤 사용자 여정이 가장 중요한지 살펴봅니다. 각 단계에서 필요한 정보와 사용자가 내리는 결정을 구성합니다.
결과물: 사용자 여정과 제품의 구조적 기반.
핵심 인터페이스
제품의 가치를 전달하는 화면과 그 시각적 특성, 정보 위계, 각 동작에 따른 상태를 설계합니다. SKARR.PRO에서는 프로토타입으로 가설과 대안 모델을 검증한 뒤 진행합니다.
결과물: 실제 화면으로 확정한 핵심 인터페이스.
이를 뒷받침하는 시스템
제품 전반의 일관성을 유지하는 컴포넌트와 타이포그래피, 동작을 설계합니다. SKARR에서는 핵심 시스템을 다루고, SKARR.PRO에서는 향후 기능을 지원하도록 시스템을 확장합니다.
결과물: 제품에 필요한 규모의 디자인 시스템.
합의한 경우 코드로 구현
핵심 인터페이스는 React로 직접 구현할 수 있습니다. 시나리오를 확인하기 위한 인터랙티브 프로토타입이나 합의한 동작을 갖춘 작동 인터페이스로 만들 수 있습니다. Figma는 필수 중간 단계가 아닙니다.
결과물: 합의한 범위에 따른 인터랙티브 React 프로토타입 또는 작동하는 React 인터페이스.
더 넓은 시야.
더 명확한 다음 단계.
빠른 모바일 작업과 팀 업무 공간은 정보를 서로 다른 방식으로 구성해야 합니다.
헬스케어 앱.
하나의 구조에 담은 상태, 상세 정보, 동작.
웹 앱과 대시보드에서는 상태와 상세 정보, 동작을 하나의 명확한 구조에 담습니다. 팀은 주의가 필요한 항목을 확인하고 관련 맥락을 살펴보며 작업을 진행합니다.
개발 중인 제품을 위한 샘플 데이터가 담긴 시각적 콘셉트입니다. 위의 뱅킹 앱은 같은 접근 방식을 작은 화면에서 보여줍니다.
작업 진행 과정 살펴보기제품 구조.
확장 가능한 핵심.
명확한 제품 모델과 주요 시나리오, 핵심 인터페이스를 제공합니다. 디자인 파일로 전달하거나, 합의한 경우 인터랙티브 React 프로토타입 또는 작동하는 React 인터페이스로 구현합니다.
추가 반복 작업과 더 폭넓은 디자인 시스템, 추가 기능 개발은 다음 단계로 합의합니다.
작업 진행
과정.
네 단계로 진행하며 각 단계는 다음 작업의 토대가 될 결정으로 마무리됩니다.
01
분석과 리서치
비즈니스와 제품, 사용자, 사용 맥락을 살펴봅니다. 중요한 질문에 따라 비즈니스 및 제품 분석과 사용자 리서치, 경쟁사 비교 분석, 제품 진단을 진행합니다. 결과물은 제품 개요서와 우선순위, 가설입니다.
02
구조 설계와 프로토타이핑
정보 구조와 내비게이션, 콘텐츠 위계, 사용자 흐름을 설계합니다. 프로토타입으로 세부 디자인에 앞서 주요 시나리오와 중요한 인터랙션의 논리를 살펴봅니다. SKARR.PRO에서는 대안 제품 모델의 프로토타입을 만들고 비교합니다.
03
시각적 콘셉트와 핵심 인터페이스
제품의 외관과 느낌, 동작을 탐색하고 대표 화면으로 방향을 제시합니다. 실제 콘텐츠와 화면 크기를 반영해 핵심 인터페이스를 구성하고 각 동작에 따른 상태를 설계합니다.
04
개발, 테스트, 인수인계
개발을 합의한 경우 React로 범위에 해당하는 작업을 구현하고 주요 여정과 상태를 테스트한 뒤 디자인과 개발 결과물을 검토합니다. 합의한 파일과 소스 코드, 설정 안내를 제공합니다.
제품에 필요한 작업 수준을
선택하세요.
두 옵션 모두 월간 제품 작업을 포함합니다. 표에서 각 작업 수준에 포함되는 내용을 확인하세요.
| 항목 |
SKARR
맞춤형 화면 디자인. 고유한 시각 언어.
$7,000 / 월
월간 작업 비용
SKARR 구매
Stripe 보안 결제 |
SKARR.PRO
경험 전반의 모든 접점을 더 깊고 세밀하게.
$12,000 / 월
월간 작업 비용
SKARR.PRO 구매
Stripe 보안 결제 |
|---|---|---|
| 작업 내용 | ||
| 시작 기준 | 시작 기준 방향이 명확한 제품입니다. 과제와 대상 고객, 다음 버전의 범위를 함께 정의합니다. | 시작 기준 제품 모델이 아직 정해지지 않은 제품입니다. 하나를 확정하기 전에 여러 방향을 검토합니다. |
| 제품 모델과 시나리오 | 제품 모델과 시나리오 제품 모델 하나와 이에 필요한 주요 시나리오를 다룹니다. | 제품 모델과 시나리오 대안 제품 모델을 비교하고 선택한 모델에 필요한 주요 시나리오를 구체화합니다. |
| 핵심 인터페이스 | 핵심 인터페이스 정보 위계와 상태, 시각적 특성을 고려해 디자인한 핵심 화면. | 핵심 인터페이스 세부 디자인에 앞서 프로토타입으로 가설을 검증한 핵심 화면. |
| 작업 수준 | ||
| 리서치 | 리서치 중요한 질문에 따라 비즈니스 및 제품 분석과 사용자 리서치, 제품 진단을 진행합니다. | 리서치 같은 리서치에 더해 경쟁사 비교 분석과 열린 질문에 필요한 추가 조사를 진행합니다. |
| 디자인 시스템 | 디자인 시스템 핵심 인터페이스를 위한 컴포넌트와 타이포그래피, 동작. | 디자인 시스템 향후 기능을 지원하도록 준비된 확장형 시스템. |
| 반복 작업 | 반복 작업 각 단계에서 주요 결정을 함께 검토합니다. | 반복 작업 제품 모델과 시나리오, 인터페이스 세부 사항을 더 많이 반복하며 다듬습니다. |
| 협업 방식 | ||
| 월간 작업 | 월간 작업 한 달간의 제품 작업입니다. 시작 전에 범위와 예상 결과물을 합의합니다. | 월간 작업 선택한 작업 수준으로 한 달간 제품 작업을 진행합니다. 시작 전에 범위와 예상 결과물을 합의합니다. |
| 코드로 구현하는 디자인 | 코드로 구현하는 디자인 핵심을 디자인 파일로 제공하거나, 합의한 경우 인터랙티브 React 프로토타입으로 제공합니다. | 코드로 구현하는 디자인 합의에 따라 핵심을 디자인 파일이나 인터랙티브 React 프로토타입, 작동하는 React 인터페이스로 제공합니다. |
| 제공 항목 | 제공 항목 제품 개요서와 사용자 여정, 핵심 인터페이스, 합의한 인수인계 자료. | 제공 항목 여기에 검증된 가설과 비교한 모델, 확장형 시스템이 추가됩니다. |
시작하기
전에.
Figma 파일이 필요한가요, 아니면 코드로 제품을 디자인할 수 있나요?
둘 다 가능합니다. 핵심은 Figma로 디자인하거나 React로 인터랙티브 프로토타입을 직접 구현할 수 있습니다. 팀에서 작업을 검토하고 이어가는 방식에 따라 시작할 때 형식을 합의합니다.
UX/UI 디자인과는 어떻게 다른가요?
UX/UI 디자인은 화면과 흐름, 상태가 이미 정해진 제품을 다룹니다. 프로덕트 디자인은 과제와 대상 고객, 제품 모델부터 시작해 이를 바탕으로 핵심 인터페이스를 구체화합니다.
프로덕트 디자인에 개발도 포함되나요?
합의된 경우 핵심 부분은 React로 구현할 수 있습니다. 인터랙티브 프로토타입이나 실제 작동하는 인터페이스가 이에 해당합니다. 전체 애플리케이션 개발, 서버 측 개발 및 연동은 별도로 범위를 정합니다.
시장 조사를 대체하나요?
아니요. 제품 관련 의사결정을 위해 비즈니스와 사람들, 사용 맥락을 분석합니다. 정식 시장 조사는 이 작업에 포함되지 않습니다.
한 달이 지난 후에는 어떻게 되나요?
함께 결과를 검토하고 다음 단계를 정합니다. 추가 반복 작업, 더 폭넓은 시스템 구축 또는 추가 기능 개발이 될 수 있습니다.
아직 궁금한 점이 있으신가요?
제품 상담