S3U2 W10D2 6월 마지막주였구나...
어제보다 몸이 한결낫다
기침이 잦아서 보약 먹는중...
✅ TIL
- 와이어프레임 & 프로토타입
피델리티 - Figma
와이어프레임 (wireframe)
선으로 틀을 잡는다는 뜻
화면 구조 설계 (정적)
제품의 기획 단계에서 페이지 구조를 잡기 위한 목적
피델리티(fidelity) : 품질 수준, 3가지 단계
1. Low Fidelity Wireframe (Lo-Fi Wireframe)
손으로 빠르게 그린 수준
새로운 의견을 반영하기 쉽다.
아이디어를 구체화 시키며 큰 그림을 잡을 때 사용한다.
2. Middle Fidelity Wireframe (Mid-Fi Wireframe)
와이어프레임을 봤을 때 해당 페이지가 어떻게 작동할지 예상할 수 있는 수준
Lo-Fi 와이어프레임을 그리면서 아이디어가 어느정도 구체화되고 확정된 후에 보기 좋게 다듬어 주면 Mid-Fi 와어프레임이 된다.
3. High Fidelity Wireframe (Hi-Fi Wireframe)
완성본에 가깝게 작성한 와이어프레임
목업에 가까운 형태
작성하는데 시간도 많이 들고 수정도 어렵기 때문에 와이어프레임을 작성하는 목적과는 맞지 않다고 할 수 있다.
->Hi-Fi 와이어프레임까지 만드는 경우는 거의 없다.
프로토타입(Prototype)
실제 제품과 거의 흡사하게 구현한 것
페이지 이동과 상호작용이 가능하다. (동적)
개발 전 단계에서 UI의 상호작용을 시뮬레이션 하는 것이 목적이다.
1. Low Fidelity Prototype (Lo-Fi Prototype)
간단한 상호작용과 페이지 이동 정도만 테스트해볼 수 있는 수준의 프로토타입
User Flow 상에서 빠지거나 어색한 기능 등을 빠르게 검토할 수 있다.
2. Middle Fidelity Prototype (Mid-Fi Prototype)
Lo-Fi와 Hi-Fi 중간의 단계
사용성 테스트를 하기 위해서는 적어도 Mid-Fi 수준의 프로토타입이 필요하다.
3. High Fidelity Prototype (Hi-Fi Prototype)
최종 결과물과 거의 유사한 수준으로 만든 프로토타입
디자인을 거의 확정하게 되며, 실제 제품과 거의 유사하게 작동한다.
사용성 테스트가 가능하다.
개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있다.
Figma
2016년 9월에 출시된 UI 디자인 & 프로토타이핑 툴
- 실시간 협업 기능
- 다양한 환경 지원 (웹 브라우저 기반 프로그램)
- 자동 저장 및 버전 관리 (히스토리 기능)
- 다양한 무료 폰트 지원 (구글 폰트 및 사용자PC 로컬 폰트)
- 오토 레이아웃 가능
- 프로토타이핑
단축키 확인: 컨트롤 + 쉬프트 + ?
