🌟 디테일의 간격 시리즈! [👊 좋은 UI설계서를 만드는 5가지 원칙] (👀간단 요약) 정말 목적에 맞는 UI설계서를 작성하기 위해 스스로를 반성하는 의미에서 UI설계서 작성 시 주요 원칙 5가지를 적어보았습니다. 📌 흐름을 담습니다. 다음 내용이 궁금해! 좋은 UID(User Interface Description)는 흐름을 담아야 합니다. 페이지의 왼쪽 위부터 오른쪽 아래까지 눈동자가 이동하면서 이야기의 순서가 술술 읽혀야 합니다. 읽는 사람으로 하여금 아래와 같은 마음이 들게 만들어야 합니다. ✓ 읽고 싶고 ✓ 기능을 쉽게 이해할 수 있고 ✓ 피드백을 주고 싶게끔 이를 위해서는 독자의 주의를 붙들어 둘 수 있어야 합니다. 문제는..만들기 시작하기 전에는 이런 내용들을 다들 잘 알고 시작하지만, 막상 진행하다 보면 기능 복잡도가 더 높은 경우도 있고, 아이디어가 생겨 덧붙이기도 하며 더 복잡해진다는 것. 1️⃣ 컴포넌트 번호는 위에서 아래로 시선 이동에 따라 붙입니다. 오른쪽 설명 영역에서는 차근차근 상세조건을 풀어줍니다. 2️⃣ 필요한 경우 줄글만 쓰지 않고 버튼 바로 옆에 동작의 흐름을 달아줍니다. 간단한 알고리즘이나,케이스 형태의 시나리오를 그려주면 단순히 줄글만 담긴 UID보다 기능의 흐름을 쾌적하게 보여줄 수 있습니다. 3️⃣ 예시를 들어주면 좋습니다. 말로만 100번 설명하는 것보다 실제 예시로 한번 그려주는 것이 모두에게 훨씬 정확한 이해를 줍니다. 버튼을 누르면 확장되는 방식을 오른편에 직접 그려줍니다. 📌 위계를 담습니다. 밑줄 쫙! 별표 뙇! 좋은 UID는 위계를 담아야 합니다. 중요한 것과 덜 중요한 것을 확실하게 갈라줘야 한다는 뜻입니다. 위계를 잡아주면 정보를 받아들이는 사람의 이해도가 껑충 상승할 수 있습니다. 또 결과물에서 오류가 발생했을 때,ㅜ이게 출시 전에 무조건 고쳐야 하는 심각한 오류인지, 아니면 출시 이후에 천천히 패치해도 되는 간단한 오류인지 빠르게 판단할 수 있습니다. 1️⃣ 시각적으로 보여줍니다. 도형, 붉은색 글씨, 알고리즘 등, 중요한 기능은 시각적으로 큼직하게 전합니다. 2️⃣ 여백을 많이 줍니다. 공간이 부족하면 설명이 들어가지 말아야 할 공간에 글씨가 들어가고 위계질서가 흐트러집니다. 📌 영향도를 봅니다. 기획자가 서비스 전체의 1. 영향도를 꼼꼼히 확인하고 2. 개발자들도 깜짝 놀랄 만큼 다양한 화면의 예외 케이스들을 상세하게 확인해오고, 3. 행여 빠진 게 있을세라 개발 검토까지 요청하면 개발팀이 기획자에게 신뢰감을 가지고작업에 몰두할 수 있습니다. 1️⃣ 새로운 기능의 UID를 만들고 나면 전체적으로 모든 페이지를 점검해야 합니다. 처음에는 이 과정이 아-주 오래 걸립니다. 지금 등록된 문제점과 조만간 업데이트할 신규 기능부터 최우선적으로 숙지해야 합니다. 📌 변화과정이 잘 보입니다. 좋은 UID는 변화 과정이 잘 보입니다. 서비스는 끊임없이 발전합니다. 기획자는 사용자들이 재잘재잘 말하는 소리를 명탐정 코난처럼 받아 적고 고민 또 고민합니다. 그 결과를 바탕으로 1. 새로운 기능을 기획하고 2. 있는 기능을 개선하고 3. 안 쓰는 기능을 삭제하기도 하죠. 이렇게 서비스에서 변화가 발생하면 설계도인 UID도 변경해야 합니다. 1️⃣ 업데이트 페이지 관리 : 조그만 수정사항 하나도 구글 스프레드시트나, 위키 문서처럼 여러 사람과 공유하는 툴에 적어두어야 하고 2. 일부만 변경한 UID를 하나의 폴더에 차곡차곡 쌓아두어야 합니다. 그러다가 2-3달에 한번 정도 UID 버전업을 진행할 때가 되면 여러 사람이 기록했던 것을 싹싹 긁어모아 통합 작업을 하면 됩니다 2️⃣ 업데이트 내용 표시 : 직전 버전에서 변경된 주요 내용을 UID내부에 잘 보이도록 표시해야 합니다. 3️⃣ 여백 관리 : 충분한 여백은 버전 관리를 할 때 가장 빛을 발합니다. 📌 충분히 들으려 노력합니다. 처음부터 모두를 만족시키는 완벽한 UID가 나오는 것은 불가능합니다. 제가 아는 좋은 기획자들은 혼자서 모든 일을 다 잘하는 사람이라기보다 다른 사람들 말을 경청하고 의견을 존중하며 전체적인 시점에서 기능을 정리하는 사람입니다. 1️⃣ 기능에 대한 의견을 들어야 합니다 2️⃣ UID 제작의 부족함을 허심탄회하게 들어야 합니다. (👋중요한 이유가 뭔가요?) 참 재밌는 존재인 것 같아요. UID. 기획의 꽃이라 불리기도 하지만, 기획자가 하는게 그거밖에 더 있어? 라고 오해를 불러 일으키는 경우도 있으니까 말이죠. 그래서 만만하게 덤비는 경우도 있고, 그저 재미있게 시작하는 경우도 생기고요. 그런데 저는 이게 제일 어려워요 지금도. 재밌지만, 어려워요. 처음에는 대체 뭘 어떻게 써야 하는지 몰라서, 사수도 없어서.. 열심히 구글링을 하며 나만의 포맷을 만들고 주변에 물어물어 한 장, 한 장 완성했었는데요. 처음에는 일단 만들어야 하는 화면에 대한 모든 설명을 쓰고 덜어내자! 라는 말도 안되는 생각으로도 작업했었어요. 이제는 어떻게 하면 더 잘 읽히는 내용으로 끝날까, 라는 고민을 하고 있지만요. 추가로 한 두개를 덧붙이자면, 저는 한 화면에 2개 이상의 화면을 잘 넣지 않는 편이에요. 2개 이상의 화면이 들어가면 설명으로 넣어야 할 내용들이 많아지고 그럼 보는 입장에서 집중력이 금방 흐뜨러 질 수 있기 때문입니다. 이 화면을 어떻게 확인 할 수 있을 지에 대한 정보는 제공해주지만 이를 위해 여러 화면을 집어 넣는 것을 추천 하진 않습니다. 또, 공통의 컴포넌트들을 잘 관리하는 것도 중요합니다. 어떤 버튼은, 어떤 텍스트는, 어떤 다이얼로그는 여러 화면에서 공통적으로 활용될 수 있는데요. 이런걸 매 슬라이드 마다 추가해주면 화면이 늘어나기 때문입니다. 그리고, 리뷰요. 리뷰 정말 중요해요. 마지막 슬라이드를 완성하고 아 끝났다! 공유하고 리뷰해야지! 라고 생각할 수 있는데, 그 마음도 충분히 이해하는데! 다시 한 번 보면서 놓쳤던 것들이 나오는 경우도 많더라고요. 이마저도 완벽할 수 없지만, 실수를 하나라도 줄이기 위해서는 반드시 한 번, 두 번 차분히 확인하고 공유하는 것을 추천합니다. 사실 본문에 나온 내용과 자잘하게 몇 가지 붙이 내용 말고도 중요한 것들이 많아요. 예전에 기획 스터디를 하며 각자가 만든 UID를 공유해 살펴본 적 있는데 기획자 별로 정말 다 다르다는 걸 느낄 수 있었습니다. 주변 기획자들은 어떤식으로 작업하는지 확인해보는 것도 재미있을거에요!