와이어프레임 & 프로토타입
- 와이어프레임 & 프로토타입은 UI/UX를 디자인할 때 꼭 작성해봐야함 .
- 제품 개발 이전에 화면 구조를 설계하기 위해 작성하는 것이라는 공통점을 가짐.
- 두 개념을 혼동해서 사용하는 경우도 있으나 , 둘은 작성 시점도 작성 목적도 완전히 다름!
와이어프레임(wireframe)
- 선(wire)으로 틀(frame)을 잡는다는 뜻
- 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적
- 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨로 나뉨.
1. Low Fidelity Wireframe (Lo-Fi Wireframe)
- 손으로 빠르게 그린 수준의 와이어프레임
- 작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉽고, 아이디어를 구체화 시키며 큰 그림을 잡을 때 좋음.
2. Middle Fidelity Wireframe (Mid-Fi Wireframe)
- Lo-Fi 와이어프레임에서 아이디어가 어느정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-Fi 와이어프레임이 됨.
- Mid-Fi 수준에서는 해당 페이지가 어떻게 작동하게 될 지 예상할 수 있음
3. High Fidelity Wireframe (Hi-Fi Wireframe)
- 완성본에 가깝게 작성한 것
- 와이어프레임이라기 보다는 목업에 가까운 형태이며, 작성하는데 시간도 많이 들고 수정도 어렵기 때문에 Hi-Fi한 수준까지 만드는 경우는 거의 없음.
프로토타입(prototype)
- 실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능
- 본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적
- 프로토타입 역시 피델리티 레벨이 나뉨.
1. Low Fidelity Prototype (Lo-Fi Prototype)
- 구체적인 내용이 작성되어있지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해볼 수 있는 수준
- User flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토가능
2. High Fidelity Prototype (Hi-Fi Prototype)
- 최종 결과물과 거의 유사한 수준으로 만든 프로토타입
- 이 단계에서는 디자인을 거의 확정하게 되며, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능
- 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있음.
3. Middle Fidelity Prototype (Mid-Fi Prototype)
- Lo-Fi 프로토타입보다는 최종 결과물에 가까운 프로토타입
- 사용성 테스트를 하기위해서는 적어도 Mid-Fi 수준의 프로토타입을 작성하는 것이 좋음
와이어프레임 & 프로토타입 차이점
과제 진행 방법
-
페어 중 한 사람이 새로운 Figma 파일을 생성.
-
Figma 파일 우측 상단의 (1)Share 버튼을 누르고, (2)페어의 이메일을 입력한 다음 (3) can edit를 선택하여 파일 수정 권한을 부여하고 (4) 초대를 보냄.
-
초대했을 때 다음과 같은 창이 뜬다면, (1), (2)의 순서로 클릭하여 파일을 팀 프로젝트에 추가
-
다시 (1)Share 버튼을 눌러 확인했을 때, (2)처럼 can edit 상태로 페어의 이메일이 추가되어 있으면 됨. (3) Copy link를 눌러 Figma 링크를 복사한 다음, 페어에게 링크를 공유하기. 링크를 공유받은 페어는 공유받은 링크로 접속하여 같은 화면에서 과제진행.
과제1 - Figma 클론
Bare Minimum Requirements
- Figma로 프로토타입을 제작해봅니다.
- 최소한 Lo-Fi 수준의 프로토타입을 구현해야 합니다.
- 페이지 이동이 가능해야 합니다.
- 스크롤 이벤트가 있어야 합니다.
- 최소한 1개의 컴포넌트와 인스턴스를 만들어야 합니다.
- Figma를 이용해 원하는 사이트를 클론하는 과제였다. 페어분이랑 상의해서
idus라는 사이트를 클론했는데 튜토리얼 영상에서 나온 홈페이지 구조랑 비슷해 캐러셀을 구현할때 참고했다.처음 다뤄봐서 어렵고 낯설었는데 페어분이 많이 도와주셨다.
배운점
- 팀원에게 Figma 링크 공유 후 권한 허용(can edit)해서 함께 작업하는 방법
- interactions으로 click 같은 다양한 액션을 주는 방법 (이벤트 함수랑 비슷한 느낌)
- wireframe, iconify,unsplash 같은 플러그인 사용방법
느낀점
- 낯설고 어렵다.. 사용방법을 더 숙지해야 겠다.
- 나중에 프로젝트나 협업할때 기획부터 하면 피그마로 프로토타입 만드는 과정이 꼭 필요할듯..
Frontend Developer