brunch

You can make anything
by writing

C.S.Lewis

by 도토리 Jan 23. 2022

Lo-fi vs hi-fi

프로토타이핑에서의 피델리티에 관하여 

Low-fidelity vs high-fidelity 

Prototyping



Fidelity는 설계의 충실도(혹은 정확도)를 의미하며 프로토타입에 포함된 디테일과 기능의 수준을 나타냅니다.  Fidelity는 인터랙션, 비주얼, 컨텐츠 및 명령 등 기타 영역에서 다양할 수 있습니다.



우선 프로토타이핑은 아래 4가지정도로 구분이 가능합니다. 

러프 스케치

스케치

화면 설계 관점: 와어어프레임(낮은 수준/중간/높은 수준의 화면 설계)

상호 작용 관점: 프로토타이핑(낮은 수준/중간/높은 수준) 


더블 다이아몬드 방식으로 보면 첫번째 그림에는,

1. 러프 스케치,
2. 스케치, 
3. 상황에 따라 와이어프레임(낮은 수준) > 아직 퍼소나 UX 컨셉, 방향성 도출되지 않은 단계에서는 와이어프레임보다는 스케치의 수준으로 그리는게 더 좋습니다. 만약 애자일 프로젝트 혹은 데이터 드리븐으로 보면 스케치 단계를 생략하고 낮은 수준의 와이어프레임을 그리는 것도 좋습니다.


더블다이아몬드 두번째 그림에는
1. 스케치: 이해관계자 공유 및 크리틱 목적
2. 와이어프레임(낮은/중간/높은 수준): 화면 설계에 대한 검토 목적  
3. 프로토타이핑(낮은 수준/중간 /높은 수준) : 인터랙션에 대한 검토 목적 


정리하면 로우-피델리티(Low-fidelity)는 러프 스케치, 스케치, 낮은(중간) 수준의 와이어프레임, 낮은(중간) 수준의 프로토타이핑을 말하고, 하이-피델리티(high-fidelity)는 높은 수준의 와이어프레임과 높은 수준의 프로토타이핑을 의미한다고 보면됩니다.




Low-fidelity Prototypes

간단한 수준의 충실도가 낮은 개념의 프로토타이핑

아이디어의 초기단계에서 주로 작성


High-fidelity Prototypes

꽤 기능적이고 인터랙티브한 수준으로 대화형에 가까움

최종 프로덕트와 가깝고 대부분의 필요한 디자인 에셋 및 컴포넌트들이 개발되어있는 수준

주로 사용성 테스트, 후반 단계에서 워크플로우 각 단계의 이슈를 판별하는데에 사용



Low-fidelity Prototypes의 장점

1. 디자인 및 컨셉에 집중 가능

: 모든 페이지의 링크나 클릭, 인터랙티브한 것들에 대한 부담없이 아이디어 구상에 더욱 집중

2. 실시간 반복 가능

: 스케치한 프로토타입에 대한 피드백을 기반으로 짧은 시간에 신속하게 일부를 다시 작성 가능

3. 누구나 접근 가능

: 디자이너가 아니더라도 프로세스에 참여하여 컨텐츠, 메뉴, 플로우를 고민할 수 있음



High-fidelity Prototypes의 장점

1. 사용자에게 조금 더 친숙함

: 사용자에게는 좀 더 완성된 소프트웨어처럼 보여서 유저가 테스트하는 동안 좀 더 자연스러운 액션을 이끌어낼 수 있음

2. 테스트할 특정 컴포넌트를 정확히 알 수 있음

: 유저 테스트를 진행하는 동안 단일 컴포넌트의 문제에 대해 더 자세히 살펴볼 수 있음 (플로우, 비주얼, 탐색 등)이를 통해 스케치 단계에서는 얻기 힘든 특정요소에 대한 피드백을 확인하는 것이 가능

3. 이해관계자들에게 더 많은 정보를 제공

: 고객과 팀원이 실제 작동 전 제품이 어떻게 보일지 명확히 알 수 있음. 초기 단계에서 개발자에게 해당 제품을 만드는데 필요한 자원과 시간에 대한 명확한 기대치를 설정하는 것이 가능



결론

잘못된 Fidelity로 프로토타이핑하는 것이 가장 큰 프로토타이핑 실수 중 하나임.

속도와 유연성을 생각한다면 Lo-fi 프로토타입이 가장 좋은 방법으로 만약 이미 고객의 의견을 수렴하여 특정 영역에 대한 데이터를 더 많이 수집하려는 경우에는 Hi-fi 프로토타입을 선택할 수 있음.

프로토타이핑은 늘 같은 수준의 피델리티를 기본으로 생각해서는 안되며 상황에 따른 선택이 필요한 부분








* 원본 자료의 글을 번역 및 가공한 글입니다. 

https://www.invisionapp.com/inside-design/low-fi-vs-hi-fi-prototyping/


매거진의 이전글 UI 디자인 가이드 : Text fields
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari