화면설계서(스토리보드)란?

• 화면설계서란 무엇인가요?

• 화면설계서는 어떻게 작성할까요?

• 화면 설계 구성 요소

• 화면설계서 작성 툴

• 끝으로

 

 

IT 제품이나 서비스를 기획할 때, 아이디어나 요구정의서를 구체화하고 개발자, 디자이너와의 협업을 원활히 하기 위해서는 명확한 설계 문서가 필요합니다. 그중에서도 화면설계서는 사용자 인터페이스를 설계하는데 중요한 역할을 하고 있죠.

이번 글에서는 화면설계서란 무엇이고, 왜 작성해야 하는지, 그리고 화면 설계서의 구성 요소는 무엇이고 어떤 툴을 이용해 작성하는지에 대해 알아보겠습니다.

 

화면설계서란 무엇인가요?

화면설계서는 스토리보드(Storyboard)라고도 불리며 서비스의 화면 구성을 시각적으로 표현하고 세부 기능을 명시한 문서입니다.

주로 사용자 인터페이스의 레이아웃, 기능 구성, 화면 전환이나 흐름, 인터렉션 등을 구체적으로 기술하여 디자이너나 개발자가 작업할 수 있도록 돕습니다.

화면설계서 예시

 

 

화면설계서를 왜 작성해야 할까요?

화면설계서를 작성하는 이유는 다음과 같습니다.

• 디자인 및 개발 가이드 제공:
  화면설계서는 제품 개발의 청사진 역할을 합니다. 모두가 동일한 목표를 이해하고 작업을 수행해야 하기 때문에 프로젝트에선 필수로 여겨지는 문서입니다.
• 커뮤니케이션 도구:
  이해 관계자(클라이언트, 디자이너, 개발자, QA 등)와의 의견 조율 및 협업을 원활히 돕습니다.
  구현 단계 전, 화면이나 기능, 정책들에 대해 정의를 하고 문제가 없는지 테스트할 수 있습니다.
• 개정이력 파악에 용이: 
  기획 이력이나 수정 이력을 지속적으로 업데이트함으로써 담당자가 바뀌더라도 팔로우할 수 있도록 돕습니다.

 

화면설계서는 어떻게 작성할까요?

화면설계서의 구성 요소는 다음과 같습니다. 프로젝트나 서비스 성격에 따라 더해지거나 생략하기도 하지만 보통 다음과 같은 Form으로 작성됩니다.

 

• 개정이력:
  화면설계서를 작성하는 기획자는 모든 문서의 개정이력을 남겨야하며, 누가 보든 이 이력을 통해 문서 추가, 수정, 삭제된 내용과 사유를 알 수 있어야 합니다.
  따라서 개정이력 페이지는 보통 문서 버전, 수정 날짜, 상세 내용, 작성자, 검토 승인자로 구성되어 있습니다.
  누락하지 않고 변경 시마다 항상 상세히 기입하여 추후 발생하는 이슈에 대해 중요한 근거 자료가 될 수 있도록 해야 합니다.
  수정 날짜의 경우엔 형식을 통일하는 것이 좋습니다. 각 페이지마다 수정 이력을 적게 되어있습니다. 이때 형식이 통일되지 않는다면 날짜 검색 시 검색 결과에서 누락이 될 수 있습니다.
• 문서 Index 정보나 UX 정보:
  문서 목차, 컴포넌트나 플로우 도형과 같은 기호들 대한 정보를 작성합니다. 혼자만 아는 기호를 삽입하는 것이 아닌 해당 기호들이 의미하는 것들을 사전에 명시해 두면 문서를 이해하기 좋습니다.
• 프로젝트 목표나 서비스 개요:
  프로젝트 목표나 서비스 개요를 명시합니다. 이는 다양한 이해 관계자들이 해당 문서의 방향을 이해하고 나아가 목표를 일치하도록 돕습니다.
• 플로우 차트
  플로우 차트(Flow Chart)에는 순서도나 흐름도라고도 불리는데요. 도형들을 이용하여 다양한 방식의 화면 흐름을 표현합니다.
  한 번에 모든 플로우를 담을 필요가 없으며 흐름상 필요한 플로우 차트만 선택하여 표기하면 됩니다.
  국제 표준 기호를 준수하는 것이 좋으며 관련한 정보는 아래 링크를 확인해 주시면 됩니다.
  
  * 화면 전환이나 흐름에 대한 방법은 아래 링크를 확인해 주세요.
  2021.12.15 - [TalkAbout/IT] - 플로우 차트 의미와 종류
  

플로우 차트 의미와 종류

 

• 화면 설계:
  화면 설계는 디자인과 개발자들이 이해하기 쉽도록 화면과 기능 명세를 작성하는 영역입니다.
  아래 이미지처럼 크게 프로젝트 명, 화면 이름, 화면 번호(화면 ID), 화면 경로, 작성자, 문서 버전, 화면 레이아웃 영역(와이어프레임), 화면 설명(디스크립션) 영역으로 구분되어 있습니다.
  (이 역시 서비스 성격이나 프로젝트 성격에 따라 조금씩 차이가 있을 수 있습니다.)

화면설계서 예시

다음은 위에서 언급한 화면 설계 요소를 좀 더 자세히 살펴보겠습니다.

화면 설계 구성 요소

• 프로젝트 명:
  해당 프로젝트의 이름을 적습니다. 한 프로젝트 내에 여러 과제나 요구사항이 있다면 해당 코드를 적기도 합니다.
• 화면 이름:
  현재 위치한 화면의 이름을 적습니다. IA(Information Architecture) 문서에 명시된 화면 이름과 일치하는 것이 커뮤니케이션 오류를 줄이는데 좋습니다.
  또한 커뮤니케이션 오류를 줄이기 위해 중복되지 않는 것이 좋습니다.
• 화면 번호(혹은 화면 ID):
  IA(Information Architecture) 문서에서 작성했던 화면 ID를 적는 곳입니다. 화면 ID를 기준으로 이해 관계자들과 커뮤니케이션하기 때문에 누락하거나 잘못 입력되지 않도록 신경 써야 합니다.
• 작성자:
  해당 화면을 작성하거나 수정한 사람의 이름을 적습니다. 추후 이력을 추적할 때 도움이 됩니다.
• 화면 레이아웃 영역(와이어프레임 영역):
  UXUI 관점으로 화면을 그리는 영역입니다.
  디자이너와 협의하여 어디까지 명시할지 논의한 다음 들어갑니다. 상세히 명시하면 좋지만, 요즘은 디자이너가 UXUI에 대한 전문성을 가지고 있기 때문에 이해할 수 있을 정도로만 간략하게 그리고 들어갈 정보만 표시하기도 합니다. 
  위 예시 이미지와 같이 해당 화면 레이아웃 영역에 요소별 번호 Tag를 활용하는데 이는 화면 설명 영역에 해당 기능을 설명하기 위함입니다.
  그렇기 때문에 화면 설명 영역과 화면 레이아웃 영역의 번호 Tag는 반드시 서로 일치해야 합니다. 
• 화면 설명 영역
  화면 레이아웃 영역에 부여된 번호들을 설명하는 영역입니다.
  해당 기능이 무엇인지, 어떤 예외 사항이 있는지, 누르면 어디로 이동하는지(화면 ID도 함께 표기), 제약 사항은 무엇인지 적습니다.
  용어는 통일되는 것이 좋으며, 오탈자가 없도록 항상 신경 써야 합니다. 보통 방대한 정보가 글로 적히기 때문에 누락되기 쉽습니다. 따라서 해당 설명에 표기하고 끝이 아니라, 필요하다면 디자이너나 개발자를 찾아가 설명하는 등의 노력이 필요합니다.

 

 

화면설계서 작성 툴

그렇다면 화면설계서를 작성하는 툴은 어떤 것들이 있을까요?
아래 이미지를 보겠습니다. 2022년부터 2023년까진 PPT가 강세였지만, 2024년을 기점으로 피그마가 가장 많이 사용하는 툴로 떠올랐습니다.

그 외에도 여러 가지 툴이 있지만, 대표적인 두 가지 툴(PPT와 피그마)을 말씀드리겠습니다. 

출처 ❘ 맥비 오픈 톡방, 2025년도 화면 설계 이용현황 설문 결과

 

• PPT:
  과거로부터 쭉 선호되었던 툴이며 흐름으로 읽기 용이합니다. PPT가 설치되지 않은 곳이 없고 누구나 쓸 수 있기 때문에 고객사에서 종종 PPT로 화면설계서를 요구하기도 합니다.
• 피그마:
  피그마 툴은 최근 떠오른 툴입니다. 여러 명이서 실시간 편집하기 좋으며, 디자이너와 개발자들도 함께 쓰고 있어 협업하기에 유리합니다.

툴을 선택할 땐 이해관계자와의 조율을 통해 선택하는 것이 좋습니다. 모두 장단점이 명확하기 때문에 충분히 협의 후 고르시면 됩니다.

 

끝으로

화면설계서는 한번 만들고 끝나는 문서가 아닙니다.
협업 중에, 혹은 구현 중에도 끊임없이 수정되는 문서라는 점을 인지해야 하며, 변경 이력을 잘 표시하시기 바랍니다.
화면설계서는 결국 커뮤니케이션 수단 중 하나일 뿐입니다. 화면설계서 하나로 커뮤니케이션이 충분하지 않으며 완벽하지 않습니다. 그렇기 때문에 작성 후 끝이 아닌 계속해서 문서 내외적으로 커뮤니케이션이 필요합니다.