TR-2, Prototype Design

less than 1 minute read

이번 프로젝트에서는 Front-end를 맡았기 때문에

기본 UI, UX 등의 상의와 Prototype Design까지 해보았다.

평소 공부하며 Figma를 사용했던게 아주 유용하게 잘 쓰였던것 같다.

기본적으로 앱과 웹으로 나누어 반응형을 적용하기로 했다.

메인 페이지

메인 페이지에서는 My Card라는 Content를 이용해 나의 구독 정보를 전반적으로 나타내 준다.
또한 Top5 Content를 통해 현재 Subllet을 사용하는 이용자들에게 가장 긍정도가 높은 서비스들을 내림차순으로 정리해주고,
Video, Music, Shopping 등으로 카테고리를 나누어 보여준다.

메인 페이지에서는 My Card라는 Content를 이용해 나의 구독 정보를 전반적으로 나타내 준다. 또한 Top5 Content를 통해 현재 Subllet을 사용하는 이용자들에게 가장 긍정도가 높은 서비스들을 내림차순으로 정리해주고, Video, Music, Shopping 등으로 카테고리를 나누어 보여준다.

상세 페이지

상세페이지 에서는 해당 서비스의 Price에 따른 Service 내용을 상세하게 전달해주고, 스크랩 기능 및 구독하러 가기 버튼을
클릭할 시 해당 서비스의 웹페이지로 연결해준다.
또한 댓글과 함께 긍정, 비긍정 표시를 통해 서비스를 평가할 수 있다.

상세페이지 에서는 해당 서비스의 Price에 따른 Service 내용을 상세하게 전달해주고, 스크랩 기능 및 구독하러 가기 버튼을 클릭할 시 해당 서비스의 웹페이지로 연결해준다. 또한 댓글과 함께 긍정, 비긍정 표시를 통해 서비스를 평가할 수 있다.

모두보기 페이지

모두보기 페이지에서는 카테고리, 가격, 체험하기 유무별로 Filtering을 할 수 있다.
Filtering 된 Content를 클릭하면 해당 서비스의 상세 페이지로 이동한다.

모두보기 페이지에서는 카테고리, 가격, 체험하기 유무별로 Filtering을 할 수 있다. Filtering 된 Content를 클릭하면 해당 서비스의 상세 페이지로 이동한다.

MySubllet 페이지

My Subllet 페이지에서는 나의 정보 관리와 My Scribe 관리를 할 수 있고, My Scrap을 확인할 수 있다.
My Scribe에서 언제든지 내가 이용중인 Scribe를 추가, 삭제할 수 있다.
나중에 기회가 된다면 공인인증을 통해 API를 받아와 정보를 업데이트 해보고 싶다.

My Subllet 페이지에서는 나의 정보 관리와 My Scribe 관리를 할 수 있고, My Scrap을 확인할 수 있다. My Scribe에서 언제든지 내가 이용중인 Scribe를 추가, 삭제할 수 있다. 나중에 기회가 된다면 공인인증을 통해 API를 받아와 정보를 업데이트 해보고 싶다.