스토리보드
개념
- 웹 사이트나 애플리케이션 개발을 위한 설계도이자 작업 지침서
특징
- 각 화면의 흐름과 상세한 정보를 포함
- 스토리 보드의 완성은 기획 단계의 마무리를 의미하며,
디자이너 - 시각 인터페이스 설계
개발자 - 프로그램 설계, 코딩 진행
구성
- 표지 : 프로젝트의 기본 정보를 담는다
- 개정 이력 : 문서 변경 사항과 수정내용을 기록
- 화면 설계 : 페이지의 레이아웃, 메뉴 구성 위치, 콘텐츠 배치 등 전체 화면 구성을 보여줌
- 서비스 흐름도 : 사이트 내의 정보와 서비스 흐름을 시각적으로 나타냄
스토리보드 작성 과정
- 표지 작성
- 개정 이력
- 정보 구조도 ( Information Architectur )
- 서비스 흐름도 ( flow chart )
- 화면 설계
5-1 페이지 정보 영역
5-2 화면 설계 영역
5-3 화면 설명 영역
5-4 하단 영역
스토리보드의 서비스 흐름도
1단계
표지와 사이트 구조도 작성
- 표지를 작성한 뒤, 사이트 구조도를 만듬.
- 구조도는 의뢰자의 요청, 제작자의 아이디어, 벤치마킹 결과, 최신 인터네 ㅅ트렌드 등을 종합적으로 고려해 작성.
- 사이트 구조도 작성 방법 :
페이지에 포함될 모든 내용을 나열
콘텐츠 특성에 따라 그룹화 하고. 이를 트리구조로 연결하여 완성
2단계
사이트 맵 작성
- 사이트 맵은 스토리보드의 목차 역할을 하며, 웹 사이트 제작의 기초가 됨
- 기획된 모든 페이지를 포함하여 전체 사이트 흐름을 나타냄
웹 사이트의 정보 구조
- 정보 내비게이션 구조
- 정보 체계와 구조화
- 특징이 명확한 정보 : 자음 순, 날짜 순, 지리적 위치 순
- 특징이 불명확한 정보 : 주제별, 기능별, 연령별 - 정보 게층구조
- 좁고 깊은 구조 : 사용자가 접근하기 어려움
- 넓고 얕은 구조 : 정보가 복잡하고 빈약하게보임
- 적절한 구조 : 폭은 최소 5개 ~ 최대 9개의 메뉴로 구성
깊이는 최대 5단계로 제한
웹 사이트의 레이아웃 구조
- 헤더 ( header )
- 내비게이션 ( nav )
- 바디 ( body )
- 어사이드 ( aside )
- 푸터 ( footer )
- 광고 ( ad )
웹 디자인의 정보 체계화
- 구체적 사실
- 설명 없이도 이해할 수 있는 정보 - 개념
- 대상을 쉽게 이해할 수 있도록 정의한 정보 - 절차
- 순차적으로 진행되는 과정에 대한 정보 - 과정
- 특정 주제나 원리를 설명하는 정보
반응형 웹 정보 설계
- 뎁스 구분 체계 정립
- 정보를 구성 할 때 깊이 있는 구조를 명확히 설정 - 정보 콘텐츠 네이밍 구성
- 사용자가 쉽게 이해할 수 있도록 정보에 적합한 이름을 붙임 - 유기적 그룹화
- 유사한 정보끼리 연결하여 사용자가 효율적으로 탐색할 수 있도록 설계 - 정보 접근성 강화
- 탐색 시간을 최소화하고, 직관적인 정보 접근 방식을 제공
내비게이션
- 사용자가 원하는 정보를 빠르고 정확하게 찾고, 이동할 수 있도록 돕는 모든 것을 포함
주요 요소
- 검색 기능
- 사용자의 위치정보
- 내비게이션 막대
- 풀 다운 메뉴
- 내용 목록과 인뎃스
- 사이트 맵
레이블링
- 웹 페이지의 정보 체계에 이름을 붙이는 자업
- 목적 : 사용자에게 혼동을 주지 않도록 정보의 구조와 위치를 명확히 알리는 것
와이어프레임
- 실제 디자인을 진행하기 전에, 정보 설계, 내이게이션 시스템, 인터페이스 구성 요소 등을 간단한 선( wire )로 표현한 스케지
- 사용목적
: 대략적인 화면 구조 파악
페이지 간 연결 구조 확인
작성 방식
와이어프레임 작성 방법
- 화면 비율 고려
- 콘테느 최소화
- 기본 스케치와 점검
- 컨셉과 레이아웃 설계
와이어프레임 작성 도구
- 핸드 드로잉
- 목업 툴
페이지 레이아웃
- 인터페이스 구성 요소와 콘텐츠가 한 페이지 안에서 조화를 이루도록 배치하는 작업
페이지 레이아웃 구성 단계
- 메인페이지의 기능별 영역 구성
- 페이지 간 게층적 내비게이션 구성
- 도식화된 계층도 구성
레이아웃
- 정보 설계
: 정보의 분류, 위계, 체계 등을 고려하여 콘텐츠 구조를 설계
- 그리드 시스템
: 명확한 그리드를 활용해 일관성 있는 레이아웃을 구촉
- 일관성과 다양성
: 모든 페이지에 동일한 그리드를 적용해 일관성을 유지하되, 약간의 변화와 다양성도 주어 단조롭지 않게 디자인
- 그리드 시스템을 활용한 레이아웃
가로선 ( Row )
세로선 ( Column )
이들이 만나는 지점 ( Module ) - 웹 사이트 레이아웃
정보 구조 재배치
: 콘텐츠 양에 따라 내비게이션의 위치 등을 조정
960 그리드 시스템
: 폭 960px을 기준으로 12개의 컬럼을 사용하여 다양한 해상도에서 안정적인 레이아웃 구현 - 두뇌를 지배하는 레이아웃 디자인
시선 추적 패턴 : F, Z
반응형 웹 사이트의 레이아웃
- 유동성 패턴 ( Mostly Fluid )
: 중대성 화면에서는 여백 조정, 작은 화면에서는 콘텐츠를 수직 배치
- 컬럼 드롭 ( Column Drop )
: 화면 폭이 좁아지면 컬럼을 수직으로 쌓는 방식
- 레이아웃 시프터 패턴 ( Layout Shifter )
: 화면 크기마다 완전히 다른 레이아웃으로 변화
- 미세조정 패턴 (Tiny Tweaks )
: 단일 컬럼 기반의 단순한 패턴으로, 폭 변화에 따른 큰 레이아웃 변화 없음
'📝 study > 웹 디자인' 카테고리의 다른 글
| 웹 디자인__[ 매체별 구성요소 분석 ] (2) | 2025.01.15 |
|---|---|
| 웹 디자인__[ UI 구성요소 설계 ] (1) | 2025.01.15 |