UI 레이아웃, 와이어프레임, 프로토타입

1. 컬럼 그리드 시스템(Column Grid System)

• 그리드(Grid): 콘텐츠가 위치하게 될, 세로로 나누어진 영역. 컬럼 개수는 표준적으로 휴대폰 4개, 태블릿 8개, PC는 12개이다. 이미지 속 화면 크기의 구분선을 break point라고 함. Column은 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋음.

• 마진(Margin): 화면 양쪽 여백. px같은 절대 단위를 사용해도, vw, % 같은 상대 단위를 사용해도 됨.
• Gutter: Column 사이의 공간. 콘텐츠를 구분하는데 도움을 줌. Gutter의 간격이 좁을수록 콘텐츠들이 연관성 있어 보이고 넓을수록 독립적인 느낌을 줌.

2. 와이어프레임(Wireframe)

• 선(wire)으로 틀(frame)을 잡는다는 뜻.
• 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만듦.
• Low Fidelity Wireframe(Lo-Fi Wireframe): 손으로 빠르게 그린 수준의 와이어프레임. 아이디어를 구체화 시키며 큰 그림을 잡을 때 좋음.
• Middle Fidelity Wireframe(Mid-Fi Wireframe): Lo-fi 와이어프레임을 그리면서 아이디어가 어느정도 구체화되고 확정된 후에 보기 좋게 다듬은 것. 해당 페이지가 어떻게 작동하게 될 지 예상할 수 있음
• High Fidelity Wireframe(Hi-Fi Wireframe): 완성본에 가깝게 와이어프레임을 작성한 것. 목업에 가까운 형태.

 

3. 프로토타입(Prototype)

• 실제 제품과 거의 흡사하게 구현한 것. 페이지 이동과 상호 작용이 간으함. 
• 본격적으로 개발에 들어가기 전 단계에 작성하며 UI의 상호 작용을 시뮬레이션하는 것이 목적임
• Low Fidelity Prototype(Lo-Fi Prototype): 구체적인 내용이 작성되지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해볼 수 있는 수준의 프로토타입. User flow 상에서 빠지거나 어색한 기능, 페이지가 없는지 빠르게 검토할 수 있음
• Middle Fidelity Prototype(Mid-Fi Prototype): Hi-Fi Prototype처럼 완성도가 높지는 않지만, Lo-Fi 프로토타입보다는 최종 결과물에 가까운 Prototype. 
• High Fidelity Prototype(Hi-Fi Prototype): 최종 결과물과 거의 유사한 수준으로 만든 프로토타입. 디자인을 거의 확정하게 되는 단계. 

 

4. 와이어프레임과 프로토타입의 차이점

	와이어프레임	프로토타입
			작성 시기	기획 단계	개발 전 단계
작성 목적	화면 구조 설계	UI 상호작용 시뮬레이션
특징	정적	동적
피델리티	Low ~ Middle (High는 거의 작성하지 않음)	Middle ~ High (Low는 테스트에 적합하지 않음)