오늘의 생각
"디자인"에 대해 배웠다.
프론트엔드, 나아가 개발자로서 가져야 할 굉장히 중요한 소양 중 하나라고 생각해서 매우 집중해서 수업을 듣고 공부했던 것 같다.
관련해서 블로깅을 해야하는데 아직도 다 못했다...온전히 이해하고 적고 싶은 개념들이 많고 설명하기 위한 말을 정리하려니 생각보다 어려운 것 같다.
근본적인 질문인 "좋은 디자인"에 대해서도 생각이 많아졌다.
Figma를 통해 나이키의 웹 페이지를 클론하는 페어 프로젝트를 진행했다. 무언가를 본떠서 만들고 간단한 기능을 구현하는 것은 매우 재밌고 즐거운 일이었지만, 기능 하나하나를 구현하면서 간단해 보이는 웹 페이지에도 정말 많은 기능들이 있다는 것을 알게 됐다. 또한, 필요한 기능들을 적절히 구현하면서 소비자가 보기 편한 디자인을 만든다는 것이 참 어려운 일이라고 생각했다.
클론 이후에는 우리가 만든 와이어프레임을 토대로 한 나이티 웹 페이지의 UI/UX 분석을 했다.
이를 통해 나이키가 추구하는 모토와 타겟으로 정한 주 고객층들이 누구인지, 그리고 그들이 중요하게 여기는 디자인적 요소와 웹 페이지가 가져야 할 성능에 대해 알아볼 수 있었던 것 같다.
이 부분에서 사용자 흐름(user flow)을 만드는 과정이 매우 유익했다. 특히 사용자 흐름을 통해 웹 페이지가 구현해야할 "기본적인 기능"들이 매우 많고, 이를 구현하지 못하면 제이콥 닐슨의 10가지 사용성 평가 기준을 충족하지 못한다는 것을 깨달았다.
소비자가 만족할 수 있는 좋은 UX를 제공하는 것이 정말 어려운 일인 것 같다.
오늘의 키워드
와이어프레임Wireframe, 프로토타입Prototype, 피델리티Fidelity, 피그마Figma
오늘의 학습내용
- 와이어프레임의 정의와 피델리티에 따른 3단계 구분법
- 프로토타입의 정의와 피델리티에 따른 3단계 구분법
- 와이어프레임과 프로토타입의 차이점
- 피그마 웹사이트 이용법과 UI 디자인 튜토리얼
어려웠던 keyword / 활용한 질문
Q. 왜 높은 단계의 피델리티 와이어프레임(High Fidelity Wireframe)은 잘 안 만드나요?
A. 시간 소비가 심하기 때문입니다. 와이어프레임은 페이지를 어떻게 구상할 것인지 구조를 잡기위한 목적으로 만드는 시안입니다. 하지만 높은 단계의 피델리티는 완성본에 가깝게 작성한 와이어프레임이므로 목업에 가까운 형태를 가져야 하고, 이를 위해서는 많은 시간이 투자되어야 합니다. 즉, 지나치게 많은 시간을 투자해 시안을 만들면 본제품을 만드는데 시간이 부족할 수 있기 때문에 높은 단계의 피델리티는 구현하지 않습니다.
Q. 그렇다면 왜 프로토타입은 낮은 단계의 피델리티를 잘 안 만드나요?
A. 사용성 테스트에 적합하지 않기 때문입니다. 프로토타입은 실제 제품과 거의 흡사하게 구현한 시안으로, 페이지 이동과 상호 작용이 가능해야 합니다. 하지만 낮은 단계의 피델리티에서는 구체적인 내용 없이 간단한 상호 작용이나 페이지 이동 정도만 테스트가 가능합니다. 이는 사용성 테스트에 적합하지 않습니다. 즉, 낮은 단계의 피델리티는 프로토타입 본래의 목적인 유저 사용성 테스트에 적합하지 않기 때문에 구현하지 않습니다.
'개발자 일기 > 일일회고 (TIL)' 카테고리의 다른 글
| 부트캠프 47, 48일차 (React Custom Component 과제) (0) | 2022.11.01 |
|---|---|
| 부트캠프 46일차 (컴포넌트 주도 개발 (CDD), Styled Components ) (0) | 2022.10.27 |
| 부트캠프 43일차 (UI/UX) (0) | 2022.10.25 |
| 부트캠프 42일차 (JSON.stringify) (0) | 2022.10.21 |
| 부트캠프 41일차 (재귀) (0) | 2022.10.20 |
댓글