UI/UX 디자인 프로세스

이 글에서는 지금까지 주로 스타트업에서 일하면서 얻은 좋았던 혹은 나빴던 경험을 토대로 UI/UX 디자인 프로세스를 정리해보겠습니다. 참고로 스타트업 특성상 디자인 사수 혹은 팀원 없이 진행한 것을 전제로 합니다. 앞서 개요를 정리하자면 "개념화 - 구체화 - 시각화 - 실체화" 이 순서로 진행하겠습니다.

 

1. 개념화

쉽게 생각하면 프로덕트의 컨셉입니다. 타겟 유저는 누구이며, 제품의 핵심적인 키 펑션, 제품의 방향성을 설정하는 단계입니다. 대부분은 스타트업의 대표 혹은 결정권자가 간단하게 정리를 한 상태에서 디자이너 채용을 진행하기 때문에 제가 적극적으로 개입한 경험은 적습니다. 보통은 채용 면접에서 프로덕트의 비전과 미래를 설명하면서 간단하게 개념을 설명하는 경우가 많은데요. 이런 개념화 과정을 거쳐서 설명을 하는 것만 봐도 대표 혹은 결정권자의 역량을 많이 느낄 수가 있습니다. 

 

주제로 다시 돌아와서 개념화 단계에서는 주로 키펑션 정리, IA설계, 페르소나 설정(경우에 따라서), 비주얼 전략 수립 등을 진행합니다.

 

• 키 펑션 정리 : 프로덕트의 사용자 층을 구분하고, 각 사용자들이 수행 가능한 기능을 정리합니다.
• IA 설계 : 정리된 키 펑션을 기준으로 기능들을 그룹화하고 페이지 단위로 기능들을 위치, 사용자 흐름의 대략적인 그림을 그립니다.
• 페르소나 : 굉장히 특정적인 유저를 타겟으로 하는 게 아니라면 개인적으로 페르소나를 설정하지 않습니다. 이유는 제품 기획, 전략 단계부터 선입견에 빠지는 경우가 있어서 UI/UX 디자인에서 유연성을 헤치기 때문입니다.
• 비주얼 전략 수립 : 프로덕트가 풍기는 분위기, 사용자 층을 기반으로 해서 키컬러 및 무드 보드를 작성합니다.

 

2. 구체화

개념화 단계에서 정리된 내용을 토대로 본격적인 시각화를 하기전에 시각적 구현 난이도 설정 혹은 개발 가능 여부를 판단하기 위해 구체화 단계를 거치게 됩니다. 여기서는 와이어프레임 작성, 프로토타이핑, 결정권자와 개발자와의 소통 등이 있습니다. 그리고 앱을 디자인하는 경우에는 지원하는 OS, 디바이스 등을 설정하고, 웹의 경우에는 반응형 디자인을 고려해서 구체화 단계를 거치게 됩니다.

 

저의 초창기 커리어에서 가장 후회되는 부분이 앞서 설명한 개념화와 구체화 단계를 너무 무시했던 거였습니다. 신입일 때는 의욕이 너무 앞서서 바로 시각화 단계로 들어가서 추후에 발생하는 디자인 상의 문제점에 너무 취약해지고, 화면 설계도 부실해지는 면이 많았습니다. 같이 일했던 개발자분들의 피드백이나 조언을 통해서 프로세스를 명확하게 하는 게 프로덕트 전반에 도움이 되는 걸 경험으로 많이 느꼈습니다. 막상 능숙해지니 개념화, 구체화 단계는 길어도 일주일 이내에 1차적으로는 완료를 하고 있습니다.

 

• 와이어프레임 작성 : 정리된 키펑션의 기능들을 배치시키면서 그룹화가 잘되었는지, 누락된 키 펑션은 없는지 확인하며, 화면을 설계합니다. low-fidelity라고도 하며, 시각화 단계에서 high-fidelity로 발전시키게 됩니다.
• 프로토타이핑 : 작성된 와이어프레임을 기준으로 화면 이동을 하면서 사용함에 있어서 어색함이나 치명적인 이슈가 없는지 확인합니다.
• 결정권자와의 소통 : 앞서 작성된 내용을 토대로 결정권자의 머리속에 있는 개념이 구체화가 되었는지 확인합니다. 직군에 따라서 다음과 같은 경우를 많이 겪었을 수도 있습니다. 예를 들어 디자이너가 시각화까지 작업물을 숨겨두다가 짠하고 보여줬더니 결정권자가 생각하는 것과 너무 달랐다. 이런 경우를 방지하기 위한 목적입니다.

 

3. 시각화

구체화 단계에서 작성된 와이어프레임을 뼈대라고 치면, 시각화는 뼈대에 살을 붙인다고 생각하면 됩니다. 시각화 단계에서는 앞서 진행한 개념화, 구체화가 탄탄할수록 빠르게 된다고 보시면 됩니다. 예를 들어 집을 짓고 인테리어를 한다고 했을 때, 집의 구조나 설계가 탄탄하고 변경되야하는 경우가 많이 없다면, 그냥 인테리어를 하면 문제가 없지만, 인테리어를 다 했는데 집의 구조나 설계가 변경돼서 전부 뜯어고친다고 생각하면 이해가 되실 겁니다. 시각화 단계에서는 개인적으로 중요하게 생각하는 부분이 디자인 시스템 구축, 사용성 테스트 등입니다.

 

• 디자인 시스템 구축 : 아무리 개념화, 구체화가 탄탄하더라도 수정은 불가피한 경우가 많습니다. 저같은 경우에는 디자인 시스템은 개발의 용이함도 있지만 디자인을 빠르게 수정하고 적용하는 데에 의미가 많습니다. 빠르게 수정하고 적용한다는 의미는 생산성 향상, 보다 유연한 사용성 테스트도 가능하다는 의미입니다.
• 사용성 테스트 : 구체화 단계에서의 프로토타이핑과 유사하지만 프로토타이핑의 경우에는 구조적인 이슈를 파악하는데 집중했다면, 사용성 테스트는 구조적인 이슈와 더불어 시각적인 이슈도 확인합니다. 아무래도 사용자들한테 구조가 어떻다고 설명해도 의미가 없고 필요도 없기 때문에 결국 최종적으로 사용자들에게 전달되는 시각적인 요소가 중요합니다.(앞선 개념화, 구체화 과정도 중요합니다!)

 

4. 실체화

시각화까지 마무리했다면 실체화 단계가 남았습니다. 실체화는 프로덕트를 개발해서 실제로 사용자들이 사용 가능하게 만드는 단계입니다. 그럼 이건 개발자의 몫이 아니냐고 궁금하실수도 있지만, 개인적으로 UI/UX 디자이너라면 디자인만 완성해서 개발자에게 주는 건 무책임한 행동이라고 생각합니다. 물론 개발 외주 같은 특수한 경우는 제외입니다. 그럼 디자이너가 실체화 단계에서 어떻게 프로덕트에 기여를 할 수 있을까요. 글을 집중해서 읽으셨다면 앞서 개념화, 구체화, 시각화에서 개발을 염두하거나 언급했던 내용이 있던걸 눈치채셨을 겁니다. 앞선 단계들에서 개발을 고려해서 최소한 더미 데이터를 관리하거나, 디자인 시스템을 구축하거나, 화면 설계 관련된 디자인 리뷰를 개발자에게 한다던가 등을 통해 실체화되는 데에 기여할 수 있다고 생각합니다. 그렇기 때문에 UI/UX 디자이너라면 프로덕트 개발에 모든 과정에 걸쳐져서 관여해야 한다고 생각합니다. 기획, 디자인은 물론이고, 개발, 경우에 따라서는 마케팅까지 입니다. 그래서 소통이 중요하며 특히 개발자와의 소통을 중요하게 생각합니다. 하지만 운이 나쁘게도 최근 커리어에서는 개발자와 협업을 하지 못해서 아쉬운 상황입니다.

 

5. 마무리

이 글은 UI/UX 디자이너만들 위한 글이 아니며, 모두의 검증이나 합의로 이루어진 내용이 아닙니다. 제가 인상 깊게 읽은 아티클이나 경험을 토대로 UI/UX 디자인의 프로세스를 정리한 글입니다. 프로덕트를 개발하는데 관여하는 직종이라면 흥미 혹은 교양 삼아 읽어보시면 좋을 거 같습니다.