화면 설계서(스토리보드) 개념 및 작성법 공부

 

안녕하세요. 기깔나는 사람들에서 디자인을 맡고있는 세현입니다.

스토리보드 개념과 작성법을 알아보겠습니다.

 

---

 

스토리보드 정의

• 서비스의 주요 기능 내용을 프로세스별로 이해할 수 있도록 구조 등으로 정리한 것
• 디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서
• 정책, 프로세스 및 콘텐츠의 구성, 와이어프레임, UI/UX, 기능 정의 데이터베이스 연동 등 서비스 구축을 위한 대부분 정보가 수록되어 있음
• 콘텐츠(웹사이트에서 디지털 형태로 제공하는 모든 정보)로 구성되는 웹의 주요 서비스 기능을 프로세스별로 이해할 수 있도록 정리한 내용을 말함
  •  

---

작성 내용

피그마 무료배포 자료(웹, 모바일 스토리보드)

• 메뉴구성도 만들기(메뉴의 순서와 구성 단계 및 용어 정의)
• 스타일 확정하기(레이아웃, 폰트, 색상, 그래픽 등 확정
• 설계하기(시각적인 디자인의 방향 확보)

---

기타

와이어프레임 예시 이미지_피그마 무료배포 자료

• 와이어프레임(Wireframe)
  • 웹이나 어플리케이션 개발 중 레이아웃 및 전체 구조를 만들고 수정하는 단계
  • 이해 관계자들과 의사소통을 위해, 혹은 제공할 서비스를 간략하게 볼 수 있게 화면의 레이아웃을 설계하는 작업
• 프로토타입(Prototype)
  
  • 스토리보드 또는 와이어프레임의 정적인 화면을 임시적으로 동작할 수 있도록 구현한 것
  • 실제로 구현되지 않았지만 실제 구현한 것처럼 UI를 테스트 해볼 수 있음

 

---

 

---

참고자료

📖 - 헬로, 핀테크 서비스기획 WorkBook