빈 화면이 막막할 때 — 레이아웃 3가지 팁
어디부터 그려야 할지 막막한 초급 기획자를 위해. 섹션 나누기, 벤치마킹, 핸드 드로잉으로 화면을 가볍게 시작하는 법.
첫째, 섹션으로 큰 덩어리부터 나눈다
빈 화면을 바라보며 막막할 때는 페이지의 콘텐츠를 큰 덩어리로 나눠 살펴봅니다. 한 페이지 안에 속한 정보의 그룹을 섹션(Section)이라 부르는데, 먼저 정보를 섹션으로 나누고 항목을 나열한 뒤 이를 연결해 하나의 페이지로 만듭니다. 섹션을 나눠 적어보는 것만으로 화면설계를 한결 가볍게 시작할 수 있습니다.
둘째, '화면명 UI'로 벤치마킹한다
들어갈 내용이 정리돼도 어떻게 배열할지 가늠하기 어려울 때가 있습니다. 특히 자주 접하지 못한 페이지는 개념은 이해되지만 사용성 측면에서 적합한 구성을 만들기가 어렵습니다. 이때 Pinterest나 Google에서 "화면명 UI"로 검색해보세요. 예를 들어 "모바일 쇼핑몰 주문서 UI"로 검색하면 다른 기획자들이 고민해 정리해둔 레퍼런스를 참고할 수 있습니다.
셋째, 손으로 스케치한다
구성이 머릿속에 있고 벤치마킹으로 학습이 돼도, 막상 그려지지 않는 화면이 있습니다. 잘 그려지지 않는 화면은 출퇴근 시간이나 카페에서 핸드 드로잉으로 스케치해보세요. 손으로 레이아웃을 그리면 섬세한 감각이 살아나 마우스로는 안 그려지던 화면이 그려지고, 여러 타입을 손쉽게 바꿔가며 시도할 수 있습니다.
설계는 시간과의 싸움
설계는 일정 분량을 매일 꾸준히 완성해야 하는 일입니다. 컨디션에 따라 화면설계의 질이 달라진다면 아마추어입니다. 일정한 품질이 나오도록 컨디션을 유지하고, 잘 풀리지 않을 때 해결하는 자신만의 팁을 장착해두세요. (출처: 「미.나.기 — 미래의 나의 기획팀원에게」 3.17)