피그마로 제작한 와이어프레임과 모바일 렌더링영상

이번글에서는 공모전에 나가게 되는 프로젝트의 와이어프레임이 완성되어 해당 프로젝트의 와이어프레임에 대해 정리해보고자 한다.

 

(자세한 리뷰는 프로젝트x 교내활동이 끝나면 정리할게요)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[로그인 화면]

 

API만을 사용한 로그인화면을 구현함

 

 

 

 

 

[메인 화면]

 

바로 장소를 검색하거나 추천장소와 주변 축제정보를 볼 수 있는 페이지를 구현함

 

 

 

 

 

 

[검색 화면]

 

하단 아이콘을 누르거나 메인화면에서 검색하기를 누르면 원하는 어르신들의 숙소를 검색할 수 있음

 

 

 

 

 

[숙소 정보 화면]

 

원하는 숙소를 누르면 해당 숙소에 대한 정보와 무료로 제공할 수 있는 서비스에 대한 아이콘을 같이 띄워주며 후기와 지도화면으로 넘어가 자세한 정보를 조회할 수 있고, 이 화면을 통해 해당 숙소를 예약할 수 잇음

 

 

 

 

 

[지도 보기화면 - 카카오 맵]

 

숙소 정보 화면에서 지도보기를 누르면 API로 연결된 카카오맵 어플로 이동하여 해당 숙소의 위치를 표시해줌

 

 

 

 

 

[후기 화면]

 

숙소 정보화면에서 후기버튼을 누르면 다른 사람들이 작선한 후기를 볼 수 있고, 오른쪽 상단 버튼으로 후기도 작성할 수 있음 수정은 목록표시버튼을 통해 구현할 예정 ( 이런 디테일한 부분들은 실제 구현하며 손보기로 했음)

 

 

 

 

 

 

 

[내정보 화면]

 

내정보뿐만 아니라 숙소등록 및 관리, 내가 슨 후기보러가기 등의 부가적인 기능들을 구현할 추가할 예정

 

 

 

 

 

[내정보 수정화면]

 

카드형식의 프로필 디자인을 하기 위해 내정보를 수정하는 화면은 따로 빼서 구현하기로 함

 

 

 

 

 

[예약하기 화면]

 

예약하기 버튼을 누르면 예약날짜와 예약할 때 호스트에게 전달되는 개안정보들을 입력하고 결제까지할 수 있게 함 + 유의사항을 명시하여 호스트와 게스트 서로에 대한 룰을 지정함

 

 

 

 

 

 

[찜목록 화면]

 

하단 아이콘을 통해 들어올 수 있고 현재 예약 상태가 담긴 예약현황 정보도 같이 제공하며 찜버튼을 누른 숙소들의 리스트를 볼 수 있어 찜한 숙소에 대한 정보확인 및 예약을 편하게 해줌

 

 

 

 

 

 

[숙소 등록 화면]

 

호스트가 숙소를 등록하려할 때 보게 되는 화면, 호스트에 대한 간단한 정보들을 포함해 소개글과 소개사진등을 첨부할 수 있게 하며 소개글에 표시될 호스트 관심도를 설정할 수도 있는 화

 

 

( 호스트 관심도에 따라 0이면 소극적으로, 5면 소극적이지도 적극적이지도 않게 티키타카하는정도로, 10이면 적극적으로 가이드해주고 케어해주는 정도를 표시하게함으로써 호스트의 성향을 알 수 있게함 )

 

 

 

 

 

 

현재까지 만들었던 와이어 프레임에 대해 기록을 남기는 걸 목적으로 정말 간략하고 대충 적어뒀지만, 추후 프로젝트를 완성하게 되면,  해당화면에 대해 왜 이렇게 디자인했는지와 관련해서 피그마는 어떤식으로 구현했는지, 어떤 목적으로 화면을 구현한건지 등에 대해 기술 추가적으로 기술하여 최종 발표본에 활용할 예정이다.