화면 설계 용어

와이어프레임

페이지에 대한 개략적인 레이아웃이나 UI요소 등에 대한 뼈대를 설계하는 단계

• 구조 처리(Structure)
• 각 페이지의 영역 구분 컨텐츠, 텍스트 배치 등을 화면 단위로 설계

 

스토리보드

정책, 프로세스, 와이어프레임, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨있는 문서

• 디자이너/개발자가 참고하는 최종적인 문서
• 상단이나 우측에는 제목, 작성자 등을 입력하고, 좌측에는 UI 화면, 우측에는 디스크립션을 기입
• 디스크립션은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외처리 등을 작성하는 부분으로, 명확하고 세부적으로 작성

 

목업

실물과 흡사한 정적인 형태의 모형

• 시각적 개체 처리(Visual)
• 와이어프레임에 시각적 표현을 채운다고 생각

 

프로토타입

와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형

• 사용성 처리(Usability)
• 사용자 경험에 대한 테스트 진행 가능
• 설계 단계의 리스크 사전 예방 가능

💡 Figma로 프로토타입 설계하는방법

• https://www.youtube.com/watch?v=CLKPtyjceFY&t=257s

 

 

 

 

---

[출처]

UI, UX디자인,와이어프레임,프로토타입의 차이?

와이어프레임, 목업, 프로토타입, 스토리보드 구분하기

[정보처리기사 필기 핵심] - UI 설계 도구 (와이어프레임 /목업/ 스토리보드/ 프로토타입/ 유스케

[웹 기획] 화면 설계 용어 - 와이어프레임, 스토리보드, 프로토타입의 차이점

와이어프레이밍, 목업, 프로토타이핑 뭐가 다른건가요? | 요즘IT