자주쓰이는 UX/UI 디자인의 용어 정리

● Fidelity

 

fidelity는 표현의 정도를 나타냄으로써 low fidelity, high fidelity로 나뉜다.

Low Fidelity는 최소한의 정도만 나타낸 정도다.  스케치, 듬성듬성 그려진 것, gray tone으로 그려진 것이라고 생각하면 쉬울 것 같다.

High Fidelity는 거의 완성된 형태를 나타낸다. 여기에는 color도 다 들어가 있는 상태가 된다.

 

 

● Wireframe

 

와이어프레임은 기획단계에서 제작되지만 어떤 단계에서도 사용이 가능하다.

Wireframe은 UI 요소, 정보 배치 표현 등의 시나리오다. 여기에 콘텐츠 설명이 추가되면 스토리보드가 된다.

이렇게 러프한 제작단계는 Low Fidelity

 

 

● Storyboard

 

바로 이어서 스토리보드는 화면 설계서, UI문서, 스펙 문서, 기획서 등 부르는 말이 다양하다. 여기서는 구성요소, 콘텐츠 설명, 페이지간 이동과 로직 등을 제작한다. 그런데 이런 식의 storyboard는 한국에서만 쓰인다고 한다.

외국에서는 사용자가 서비스와 어떤 인터렉션을 하는지 그림으로 시각적 흐름을 보여주는 방식이다.

출처: https://uxstudioteam.com/ux-blog/ux-storyboard/

 

● Mockup

 

디자인이 거의 완료된 상태다.

따라서 시연 및 평가를 위한 최종 버전이다.

 

 

● Prototype

 

프로토타임은 외국에서 특히 중요하게 쓰인다고 한다.

디자인이 완료되고 서비스에 대한 전반적인 테스트를 위해 제작되는 영상 같은 것을 말한다.

Prototype은 개발자와 디자이너의 시각적 커뮤니케이션 역할을 하고 사용성 테스트에 사용된다.

 

 

● Affordance

 

사용자가 서비스를 접했을 때 직관적으로 어떻게 사용해야 하는지 알게 된다는 의미, 디자이너의 의도대로 사용자의 행동을 유도하는 것을 의미한다.

예를 들어, 우리가 스위치를 봤을 때 어떻게 하면 끄고 키는지를 누가 알려주지 않아도 우리는 바로 사용할 수 있다. 이게 affordance가 좋다고 한다. 대표적으로 affordance가 좋은 앱은 토스, 옛날 아이폰 잠금화면 등이 있다.

 

 

● IA (Information Architecture)

 

IA는 서비스를 구성하는 구조, 흐름의 설계다. 쉽게 생각해서 사이트맵도 IA 중 하나가 될 수 있다.

 

 

● CTA (Call to Action)

 

사용자의 반응을 유도하는 요소를 말한다. 보통 그 부분을 눈에 띄게 디자인한다.

 

● Native app, Hybrid app, Mobile web  3가지 비교

※ 추가로, 네이버가 하이브리드 앱의 대표적인 예가 될 수 있다.

 

 

 

 

---