UIUX 실무 프로세스

기획

1. 문제 정의

• PO/PM과 함께 제품 목표에 따라 우선순위가 높은 문제를 정합니다.
• 회사에 따라 문제 정의 단계에서 디자이너가 참여하기도 하고, 참여하지 않고 따로 PO/PM이 문제를 선정해 공유하기도 합니다.
  
  

2. 아이데이션

• 앞서 정의한 문제를 해결할 다양한 아이디어를 내고, 그중에서 적절한 솔루션을 선택합니다.
• 필요에 따라 러프한 솔루션 스케치를 진행하기도 합니다.
  
  

3. 프로덕트 스펙 문서 작성

• 디자인에 들어가기 전, 문서에 솔루션에 대한 상세 내용을 글로 먼저 적어봅니다.

• 디자인이 나오지 않아도 엔지니어가 솔루션을 미리 상상하고 준비할 수 있다는 장점이 있습니다.

• 회사에 따라 생략되거나 PO/PM 직군이 맡아서 하기도 합니다.

  
  
  
  

디자인

1. 초안 디자인
- 피그마나, 스케치 등의 디자인 툴로 솔루션을 디자인합니다.
- 디자인 디테일보다는 전반적인 사용자의 여정과 UX에 집중해 보면서 프로덕트 스펙 문서에서 놓친 엣지 케이스는 없는지 살핍니다.

2. 피드백
- 기획 단계에서 논의한 대로 잘 디자인되었는지 팀원들에게 공유하고 피드백을 받습니다.
- 솔루션의 성격에 따라 피그마 프로토타이핑이나 프로토파이 같은 프로토타입 툴을 사용하기도 합니다.

3. 최종 디자인 확정 및 핸드오프
- 피드백을 초안에 반영하여 최종 디자인을 확정합니다.
- 확정한 최종 디자인을 엔지니어에게 공유하고 개발이 원활히 진행될 수 있도록 돕습니다.
- 필요에 따라 가이드를 함께 작성해 전달하기도 합니다.

핸드오프란?

• 핸드오프는 디자인을 개발할 수 있도록 엔지니어에게 전달하는 것을 의미해요.
• 디자이너의 의도를 엔지니어가 잘 이해해야 제품이 잘 구현될 수 있겠죠?
• 디자인을 공유할 때 다음의 내용을 포함해 함께 전달하는 것이 좋습니다.
  1. 유저 플로우
     • 처음 시작하는 화면은 어디이고 어떻게 연결되는지 만들려는 기능의 전체 흐름이 잘 보이도록 구성해 보세요.
  2. 유즈 케이스
     • 상황에 따른 화면 정의를 말해요.
     • 예를 들어, 회원가입 화면에서는 정상 입력, 입력값 오류, 입력 가능 시간 초과 등의 다양한 상황이 생길 수 있어요. 모든 케이스에 달라지는 화면을 놓치지 않고 정의해 주어야 합니다.
  3. 반응형 레이아웃
     • 대부분의 회사에서는 스크린 크기를 하나 정해 디자인을 하고 반응형으로 대응합니다.
     • 아주 작은 스크린 크기나 특별한 스크린 크기에 디자인이 어떻게 표현되어야 하는지 가이드를 주는 것이 좋습니다.

개발

1. 디자인 QA
- 개발이 완료되면 디자인대로 정확하게 개발되었는지 확인하는 디자인 QA를 합니다.
- 최대한 사용자와 비슷한 환경으로 테스트하세요.
- 앱이라면 적어도 안드로이드, iOS 두 환경을 모두 확인하는 것이 좋습니다.