화면 정의서의 기본 익히기
웹사이트 기획자는 단순히 아이디어를 떠올리는 사람이 아니다.
개발자와 디자이너, 심지어는 클라이언트와도 같은 언어로 소통해야 한다.
그리고 그 언어의 중심에는 화면 정의서가 있다.
아무리 좋은 아이디어라도 개발자와 디자이너가 이해하지 못하면 아무 소용 없다.
2장을 읽으면서 드는 생각은, '기획자는 문서로 말한다 !'
『Do it! 웹 사이트 기획 입문』 2장네서믐 화면 정의서의 개념과 작성법, 그리고 각 구성 요소를 실무 관점에서 정리하고 있다 !
1. 기획자는 화면 정의서로 말한다
웹 기획자의 주된 업무는 ‘생각’을 현실화하는 것이다. 그러나 혼자서 모든 작업을 수행하는 것은 불가능하므로, 기획자는 반드시 의도를 전달할 수 있는 수단이 필요하다.
이때 가장 중요한 도구가 바로 ‘화면 정의서’이다.
기획자가 “이런 화면을 원해요”라고 대충 설명하는 것보다 하나의 명확한 문서로 전달하는 것이 훨씬 효율적이며 정확하기 때문이다.
이는 기획자의 핵심 커뮤니케이션 언어라고도 볼 수 있다!
실제로 현업에서도 화면 정의서의 유무에 따라 프로젝트 진행 속도와 품질이 달라지는 경우가 많다.
재작년 해커톤을 준비할 때 피그마 하나로 기획 다 했다고 착각했는데, 정작 프론트로 넘기니 '이 버튼은 왜 있어요?'라는 말을 들었던 기억이 있다 ,,
화면 정의서는 각 기능과 버튼, 사용자 인터페이스의 구성 방식 등 화면에 들어가는 요소들을 시각적 + 문서적으로 정의하는 역할을 한다. 개발자나 디자이너가 이 문서를 보고 작업할 수 있어야 하며, 이는 곧 기획자가 얼마나 꼼꼼하게 사고했는지를 보여주는 지표가 되기도 한다.
2. 화면 정의서의 구성 요소 이해하기
화면 정의서는 단순히 박스를 나열한 도표가 아니다. 각각의 요소는 명확한 기준과 원칙에 따라 작성되어야 하며, 문서가 가져야 할 형식적 완성도도 중요하다. 이 장에서는 구성 요소를 다음과 같이 설명하고 있다:
화면 이름과 ID: 각각의 화면에는 고유한 이름과 식별번호(ID)를 부여한다. ID는 관리와 유지보수에 있어 매우 중요하며, 특히 개발자들이 화면을 추적하고 버그를 수정할 때 유용하다.
- 화면 경로(Path): 전체 메뉴 구조 안에서 해당 화면이 어디에 위치하는지 설명한다. 사용자 동선을 설계할 때 빠질 수 없는 정보이다.
- 레이아웃 구조(와이어프레임): 각 구성 요소를 간단한 도형으로 시각화한 그림이다. 일반적으로 사각형, 원형, 텍스트 등을 활용하며, 시각적 요소는 가능한 단순하게 유지하는 것이 원칙이다.
- 기능 설명(디스크립션): 레이아웃에서 번호를 매긴 각 구성 요소에 대한 상세한 설명을 문서로 작성한다. 예: “① 버튼 A: 클릭 시 로그인 모달 창을 띄운다”
또한 작성 시 다음과 같은 표현 규칙이 권장된다.
사용자 데이터를 표시할 경우 중괄호 { }를 사용한다.
예) {사용자명}, {주문번호})
동일한 화면이 길 경우 여러 슬라이드로 나누어 설계한다.
UI 요소는 반드시 번호와 함께 설명을 덧붙인다.
3. 화면 정의서 작성 방법 익히기
실제로 화면 정의서를 작성할 때는 ‘그리기’보다도 ‘설명’에 더 많은 집중이 필요하다. 각 요소가 왜 필요한지,
어떤 흐름 속에서 존재하는지까지 고려해야 한다. 이 파트에서는 작성 실무에서 자주 쓰이는 팁들을 소개하고 있다.
기능 설명을 번호로 정리할 것: 화면 안의 모든 UI 요소에는 고유한 번호를 부여하고, 그에 맞춰 하단에 상세 설명을 붙인다. 이렇게 하면 누가 봐도 화면 흐름을 명확하게 이해할 수 있다.
중복되는 UI는 공통 요소로 정의할 것: 예를 들어 ‘로그인 버튼’이 여러 페이지에 반복된다면, 이를 공통 UI로 별도 정의해두는 것이 효율적이다.
데이터는 실제 값처럼 보여줄 것: 예를 들어 "사용자명: 홍길동"처럼 작성하면 실제 작동 방식을 더 쉽게 이해할 수 있다. 가상의 데이터라도 구체적으로 보여주는 것이 좋다.
4. 공통 UI 구성하기
웹사이트에는 여러 페이지가 존재하지만, 그중에는 항상 반복되는 영역이 있다. 대표적으로는 상단 메뉴, 푸터, 사이드바 등이 있다.
이들을 ‘공통 UI’로 정의하면, 불필요한 중복 작성 없이 효율적으로 문서를 구성할 수 있다.
공통 UI는 다음과 같은 이점을 가진다:
- 유지보수가 용이하다 (한 번만 수정하면 된다)
- 전체 사이트의 디자인 통일감을 줄 수 있다
- 개발자 입장에서 컴포넌트화가 쉬워진다
책에서는 공통 UI 정의 시, 별도 문서로 정리하거나 화면 정의서 맨 앞에 공통 요소로 구성하는 방법을 추천하고 있다.
5. 글로벌 내비게이션 바(GNB)
GNB(Global Navigation Bar)는 사이트 전체에서 항상 고정되어 사용자의 위치와 이동 경로를 안내하는 핵심 UI 요소이다.
GNB 설계 시 다음과 같은 기준이 중요하게 작용한다
- 사용자가 어디에 있는지를 명확히 인지할 수 있어야 한다.
- 메뉴 구성은 논리적 구조를 가져야 하며, 그룹별 분류가 잘 되어 있어야 한다.
- 반응형 디자인에 따라 데스크톱, 모바일에서도 자연스럽게 동작해야 한다.
책에서는 GNB를 단순한 상단 메뉴가 아니라, 웹사이트 내 정보 아키텍처(IA)의 뼈대로 설명하고 있다. 사용자가 사이트를 어떻게 탐색하고, 어떤 행동을 할 수 있는지에 대한 전체 구조가 GNB에서 드러나기 때문이다.
마무리. 화면 정의서는 기획자의 기본 언어이다
『Do it! 웹 사이트 기획 입문』 2장은 단순히 문서 작성법을 넘어서, 웹 기획자의 기본적인 사고방식과 태도를 다루고 있는 것 같다. 특히! 기획자가 가져야 할 문서화 습관, 소통 방식, 기능 중심의 사고 전환을 강조하며, 실무에 곧바로 적용 가능한 화면 정의서 작성 원칙을 알려주고 있다.
이 장을 통해 웹 기획 입문자는 무엇을 어떻게 문서화해야 할지, 왜 화면 정의서가 중요한지, 그리고 어떻게 소통을 구조화해야 하는지에 대한 감을 잡을 수 있었다 :)
