14 화면설계서 - 3편
스케치, UI 설계, UX
6. 스케치
화면설계를 하기 전에 저는 노트에 미리 어떻게 UI를 그릴지 스케치하는 과정을 갖습니다. 서비스 플로우도 마찬가지고요. 이때 모든 경우의 수를 고민하여 아주 상세히 기술하지만 PPT에 옮기기 전 말 그대로 나만 알아봐도 상관없는 스케치기 때문에 막 대충 그리는 편이고, 추가 기능 정의도 이 과정에 하면서 텍스트도 많이 작성합니다. 백문이 불여일견 인지라 샘플 페이지 링크합니다.
저와는 달리 상당수가 공들여 그럴싸하게 보이는 스케치들인데 저렇게 사진 찍어 외부에 공개할 목적이 커서가 아닐까 추측해 봅니다.
7. UI 설계
드디어 화면설계서 문서 중에서도 진짜 화면설계서를 작성하는 단계까지 왔습니다. 이미 작성해둔 PPT 레이아웃 장표를 복사해서 붙여 넣기 한 후 전 편에 언급한 컴포넌트나 목업 툴을 활용하여 스케치해놓은 UI들을 그 레이아웃 안에 옮겨 그립니다.
그리고 각각의 모든 항목들에 대해 번호를 매겨, 우측에 테이블로 만들어 놓은 설명(Description) 영역에 각 항목의 기능에 대해 자세히 작성합니다. 그 테이블의 첫 줄엔 IA를 언급하며 말한 페이지 코드를 제일 먼저 입력해 앞으로 해당 UI의 코드명으로 모든 커뮤니케이션을 하면 됩니다.
우리가 사용하는 웹, 앱에서 봤던 버튼, 링크, 숫자, 텍스트, 이미지, 파일들은 모두 제각각 기능을 가지고 있는데 이 기능들에 대한 설명을 모두 작성해야 합니다. 여러분들이 봤을 각 기능들에 대한 예를 들어 보겠습니다.
1) 버튼: 검색, 좋아요, 수정, 확인, 등록, 취소, 삭제, 회원가입, 로그인, 체크 박스, 첨부, 정렬, 확대/축소, 위로/아래로, 이모티콘, 플레이, 크게/작게, 멈춤, 추가, 닫기, 새로고침, 자동 재생, 구독, 공유, 더보기, 댓글, 에디터, 결제, 환불, 배송정보 등
2) 링크: 다운로드, 위와 같은 샘플 페이지 단축 URL, 회사 소개, 검색 순위, 검색 결과, 더보기, 고객센터, 제휴, 이용약관, 개인정보 처리방침, 공지사항 등
3) 숫자: 날짜, 날씨, 페이징, 순위, 순서, 알림, 신청, 팔로잉, 팔로워, 시계, 시간, 금액, 계산, 할인, 남은 용량, 파일 용량 등
4) 텍스트: 등록(첨부), 만들기, 도움말, FAQ, 콘텐츠(기사, UCC), 설명, 폴더명, 휴지통, 메일함, 로그인, 로그아웃, 회원가입 등
5) 파일: 이미지, 동영상, PPT 등
생각나는 대로 적어봤는데 위 단어들이 중요한 것이 아니고, 위에 언급한 기능을 넣었을 때 각 기능들마다 번호를 붙이고, 우측 설명 영역에서 해당 번호에 대한 상세한 설명이 되어야 한다는 것입니다. 앞서 작성한 주요 정책(화면설계서 - 2편 참고)과 함께 말이지요.
그동안 설명하고, 그에 대한 예시 화면들을 구글 이미지 검색을 통해 링크하는데 있어 큰 갈등이 없었는데 검색 단어를 이리저리 다르게 조합해 봐도 제가 원하는 결과 페이지가 나오질 않았습니다. 각 기능들에 넘버링을 하고, 우측에 상세 설명을 적은 예시도 있지만 올드한 트렌드의 UI들이고, 좀 괜찮게 그렸다 싶으면 상세 설명란이 없는 경우가 많네요. 참고로만 보시고, 본인이 직접 여러 단어들(UI, UX, 웹, 앱, 스토리보드, 화면설계서, 와이어프레임, 목업 등)을 선택하며 검색해 보시면 이해하는데 도움이 될 것 같습니다.
8. UX
UI(User Interface)라는 단어가 먼저 등장하고, 몇 년 후 UX(User Experience)라는 단어가 등장했습니다. 필요한 항목들을 상세한 설명과 함께 잘 정리하여 그렸다고 해서 다가 아니라는 것이지요. 유저 경험치에 근거한 익숙하고 심플한 UI여야 신규 서비스인 경우 유저들이 거부감 없이 쉽게 학습해서 사용할 것입니다.
그래서 '상위기획서' 단계에서 유저 시나리오를 작성하고, 인터뷰를 하는 이유도 UX를 위한 과정이라 볼 수 있습니다. 웹(Web), 앱(App)의 환경을 고려하고, 때로는 태블릿이나 반응형 웹의 UI/UX가 고려된 기획 설계가 되어야 합니다. 이 부분은 이론적으로 설명하기 보단 본인의 경험치가 쌓이고, 부단한 노력(공부)이 더해졌을 때 알 수 있는 노하우입니다.
또한 위에서도 언급했듯 구글 이미지 검색을 통한 다양한 레퍼런스들이 중요한 경험치가 될 수 있으니 최대한 많은 경험치들을 찾아보면 좋겠습니다.
화면설계서는 아니나 기획하는데 있어 요즘 트렌드가 되는 UI 디자인을 볼 수 있는 사이트를 소개해 드립니다. 예를 들어 요즘 Activity feeds UX 디자인입니다.
오랜만에 방문했더니 그새 일부만 보여주고, 다 보려면 유료 결제하는 방식(4.9달러/한달, 39.9달러/1년)으로 바뀌었네요; 결제 여부는 본인의 판단 몫입니다.
화면설계서 Tip. - 단축키
화면 설계서뿐 아니라 PPT 사용할 일이 많은 분이라면 반드시 단축키를 암기해 사용하길 권장합니다. 업무 시간을 많이 단축시킬 수 있습니다. 단축키에 대한 브런치가 있어 링크합니다.
https://brunch.co.kr/@dprnrn234/233
총 네 장의 단축키 소개 이미지가 있는데 마지막 장의 단축키는 굳이 외울 필요가 없어 보입니다. 하지만 세 장의 단축키는 PPT가 주요 업무 툴이라면 알아둘 경우 매우 유용하게 쓰입니다.
이 외에 Windows 단축키도 많이 알아두면 남들이 두세 번 클릭할 때 본인은 한 번의 클릭으로 처리할 수 있는 일들이 아주 많아집니다. 그리고 그때(기존에 2분 걸린 일을 1분에 처리할 때) 약간의 희열을 느낄 수 있습니다.
