앱 서비스 기획을 더욱 탄탄하게 하는 'UX/UI 서비스 기획 방법론'

안녕하세요. 오늘은 앱 서비스 기획을 더욱 탄탄하게 하는 UX/UI 기획 방법론에 대해 배워보도록 하겠습니다!:)

'UX/UI 서비스 기획 방법론'은 기획 시 반드시 염두에 진행해야 하는 부분입니다.

기획자가 이어서 알려 드릴 'UX/UI 서비스 기획 방법론'을 준수하지 않고 기획을 진행하게 되면

앞뒤가 맞지 않는 오류 투성이인 기획물을 양산하게 되며, 이 부분은 디자인, 개발 단계에서 밝혀지고 해당 부분에 대한 기획을 다시 하거나 보강하게 됩니다.

그럼 어떻게 하면 디자인/개발 단계로 넘어가기 전에 탄탄하고, 논리적인 기획서를 만들어낼 수 있을까요?

1) CRUD 점검 기획

화면 UI 기획 후, CRUD(Create, Read, Update, Delete) 개념을 염두에 두고, 연관된 페이지들에 대해 점검하고 보완해야 합니다.

CRUD란?

Create, Read, Udate, Delete

CRUD가 무엇일까요? 공지사항 게시판을 예로 들면 공지사항 글을 등록하려면 등록 페이지가 필요합니다. Creat(등록) 개념이 필요합니다.

그리고 해당 내용을 보려면 상세 페이지가 필요합니다. Read(상세 페이지) 개념입니다. 그리고 등록한 내용 중 일부 내용을 수정하려면 수정 페이지가 필요합니다. Update(수정) 개념이 필요합니다. 마지막으로, 해당 내용을 아예 삭제하는 것이 필요할 경우 Delete(삭제) 개념이 필요합니다.

이와 같이 앱/웹 서비스는 모두 CRUD(Create, Read, Update, Delete) 개념을 가지고 있습니다. 이 개념은 특히나 개발자들이 늘 염두에 두고 있는 개념인데요. 기획자가 CRUD 요소 중 수정 페이지를 누락해서 기획하면 개발자가 기획자에게 수정 페이지 UI는 어디 있느냐고 물어보게 됩니다.

그래서 자신이 기획한 페이지가 CRUD 개념이 중 어떤 항목에 해당하고, 만약 등록(Create) 페이지라면 나머지 RUD 페이지도 존재하는지 확인하고, 누락되었을 경우 해당 화면들을 기획해야 합니다.

추가적인 예로 '회원가입(Create)' 페이지를 기획했을 때 입력을 받는 요소들이 '로그인'페이지의 입력 필드로 일부 표출이되어야 하고, '회원정보수정(Update)' 페이지에서 회원가입 시 표출되었던 필드들이 누락 없이 반영되도록 기획하는 것 또한 CRUD를 점검하는 기획이 됩니다.

2) 시뮬레이션(모의 시연) 기획

UI 화면 기획 시 현 화면 다음에 연결될 화면은 어떻게 될지를 머릿속으로 시뮬레이션해보며 기획을 합니다. 이때 머릿속에 상이 잘 안 그려질 때는 참고 서비스앱을 설치해서 직접 회원가입, 로그인, 비밀번호 찾기 등을 하면서 직접 실제 존재하는 앱을 써보면 해당 동작들이 머릿속에 남습니다. 남아 있는 상의 느낌대로 내가 기획하는 UI에 대해서도 현재 화면 다음에 어떤 화면이 올지를 생각하고 UI를 그리고, 동작할 때도 일어날 수 있는 여러 케이스에 대해 그려나가면 됩니다.

이 때 여러 경우의 수를 기획할 때 미니멈과 맥시멈 케이스를 대응할 수 있는 화면 UI를 그려주셔야 합니다. 회원가입 페이지의 입력 필드를 기획할 때 이메일 주소 입력 필드 기획 시 최소 입력 글자수는 몇 자리로 제한하고, 최대 입력 글자수는 몇 자리로 제한할지 등 미니멈과 맥스 값에 대한 기능 정의를 반드시 해주셔야 합니다.

이런 케이스에 대해 감을 잡기 어렵다면 airbnb 등의 서비스의 회원가입 페이지로 가서 아무런 정보를 입력하지 않고, 맨 하단의 회원가입하기 버튼을 터치해주세요. 그럼 어떤 케이스에 대해 대응을 해야 할지 해당 화면에서 확인하고, 필수 입력해야 하는 정보를 1개씩 기입하고, 다시 맨 하단의 버튼을 터치해서 사용자가 행할 수 있는 케이스에 대한 대응 UI를 모두 그려내면 됩니다.

정리하면 내가 그린 UI와 요소에 대해 변형 UI, 요소에 대해 시뮬이션해보며 기획해 나가야 합니다.

이때 상이 잘 안 오를 때는 다른 여러 서비스를 직접 이용해보고 캡쳐도 해보고 Figma 캔버스에 해당 캡쳐 UI들을 쫙 깔아놓고 한 눈에 서비스를 들여다보면 상이 잘 그려지고 시뮬레이션도 용이하게 하면서 기획해 나갈 수 있습니다.

3) 등록(Create) 페이지 및 정보량이 많은 페이지부터 우선 기획

회원가입, 로그인, 회원정보 수정 페이지 중 등록 페이지는 어떤 페이지일까요? '회원가입' 페이지입니다. '회원가입' 페이지를 먼저 기획하지 않고, 로그인이나 회원 정보 수정 페이지를 기획하기는 불가능할 정도로 어렵습니다. 왜냐하면 전체 그림을 완성하고, 일부 요소를 추려내는 것은 쉽지만 일부 요소를 먼저 그리고, 다시 전체를 그릴 경우 반복적인 수정이 발생할 수 있습니다.

쇼핑몰의 경우에도 상품 등록, 상품 상세, 리스트 3개 페이지에 대한 기획을 할 때 당연히 상품 등록 페이지를 먼저 기획해야 해당 등록(Create)한 정보를 상세 페이지(Read)에서 잘 표출할 수 있고, 그리고 이어서 리스트(요약정보 Read)에서 복수 정보에 대한 탐색을 할 수 있습니다.

상세 페이지와 리스트 페이지 중 정보량이 적은 리스트 페이지부터 기획하게 되면 빈약하거나 불필요한 정보의 리스트 페이지를 기획하게 됩니다. 정보량이 많은 상세 페이지를 먼저 기획하고, 이 중 중요 정보를 리스트에서 어떤 것들로 보여줄지 결정해서 리스트 페이지를 기획하게 되면 사용자가 리스트 페이지를 탐색할 때 자신이 원하는 정보를 쉽게 찾을 수 있게 됩니다.  

4) Front/Admin 매칭 점검 기획

Admin 페이지 기획 시 관련된 Front 페이지들의 요소를 확인하여 Admin 페이지에 Front 요소가 잘 반영되었는지 매칭 점검하여 기획해야 합니다.

Admin에서 회원관리 섹션을 기획할 때 Front 회원가입과 정보수정 페이지 UI를 아예 Admin 기획 UI 옆에 두고 기획하면 더 좋습니다. 회원가입 시 이메일 주소를 입력 받는데 Admin 상세 페이지에 입력 받은 이메일 주소 정보가 표출되지 않는다면 Front와 Admin이 매칭되지 않은 기획이 되게 됩니다.

이와 같이 Admin 기획 시 Front UI의 요소들을 점검하여 Admin에 누락 없이 반영해야 합니다.

또한, Admin 페이지의 경우엔 CRUD 개념 중 등록(Create) 페이지 없이 바로 상세(Read) 페이지만 존재하는 경우가 많습니다. 이유는 Front에서 가입한 회원 정보의 경우 Admin에선 회원정보를 생성하지 않고, 상세(Read)에서 해당 정보를 확인하게 됩니다.

그래서 먼저 상세(Read) 페이지를 기획하고, 이어서 요약정보인 리스트 페이지를 기획하고, 해당 리스트 정보를 어떻게 검색할 것인가에 대한 검색 조건 요소를 기획하는 순으로 정보량이 많은 부분부터 적은 순으로 기획해야 합니다. 이 순서를 반대로 할 경우 전체 숲이 그려지지 않은 상황에서 기획에 대한 상이 막연해지게 됩니다.

 

5) Google, Apple UI 가이드 감안 UX 사용성 기획

UX 참고자료

구글에 UI 가이드를 검색해보면 블로거 또는 업계(구글, 애플)에서 배포한 사용성 가이드를 확인할 수 있습니다.

최신 트렌드 UX 사용성 가이드를 점검하여 자신의 UI가 트렌드에 부합하고, 사용성에 문제 없는지 점검하여 기획하면 노후하지 않은 UX/UI 기획을 해낼 수 있습니다. 수년 전에 가장 좋은 사용성은 햄버거 버튼이라고 불리는 전체 메뉴 체계였으나 현재 가장 좋은 사용성 메뉴 스타일은 하단 Tab bar를 활용한 Sticky menu bar 구성입니다. 이와 같이 변화하는 사용성 체계에 대해 기획 전이나 중간에 구글, 애플 가이드 등을 확인해서 기획하시면 기획이 끝날 무렵 전체 UI 기획을 새로 해야 하는 일은 발생하지 않게 됩니다.

오늘은 Figma 기능 정의를 넘어 PPT로 기획을 하든, Figma로 기획을 하든 UX/UI 기획 시 체계적인 기획을 할 수 있는

'UX/UI 서비스 기획 방법론'에 대해 배워보았습니다.

이렇게 블로그 포스팅만으로도 기본적인 앱/웹 기획에 대한 지식을 쌓고, 다수 기획을 진행해보면서 실력을 충분히 업그레이드 해나갈 수 있습니다.

앱/웹 기획에 대한 이론은 이 정도라고 보시면 되고, 이제 많은 실습을 해보셔야 할텐데요. 해당 실습을 위해 다음 시간에 클론 기획에 대해 배워보도록 하겠습니다.!:)

오늘도 수고 많으셨습니다!:)

유익했다면! 이어서 읽어보기:)

실패 없는 개발을 위한 서비스 기획!

Figma 프로토타이핑 기획!🚀
상담문의