멋쟁이 사자처럼 인하대학교 해커톤 [공구함]

순식간이었던 아이디어톤에 이어 이번에는 해커톤을 진행하게 되었다. 저번 아이디어톤 때 아쉬웠던 부분이 있어 더욱 열심히 해야겠다는 생각이 들었다. 이번에 만들게 된 웹사이트는 이웃 간에 공구를 할 수 있는 새로운 공구 플랫폼이다. 기존에 있던 공구 대행 서비스와 더불어 우리의 가까운 이웃에서도 손쉽게 공구를 하며 집 주변에 있는 사물함에 배송을 해주어 비대면 시대에도 손쉽게 배달이 가능하도록 했다.

01234

• 문제 : 공구는 대체로 전국 단위로 이루어지기 때문에 가까운 이웃과의 공구 거래가 어려움 
• 서비스명 : 공구함
• 대상 : 이웃 주변에서 공구를 원하는 이들
• 차별점 : 주변 거리의 설정을 통해 가까이 있는 이웃들과 손쉬운 거래 가능 & 회사에서 제공하는 지역별 사물함 제공을 통해 안전한 비대면 배송이 가능하다
• 비즈니스 : 해당 지역의 공구를 홍보하는 배너 광고 & 사람들과 거래 업체를 이어주는 역할 -> 중간 수수료

 

🎈메인 사이트에서는 인기 매물과 최신 매물 그리고 카테고리를 들어갈 수 있도록 세부 사항을 조절했고, 그날의 특가를 하는 상품이나 이벤트의 제품을 배너로 올릴수있도록 상단과 하단에 배치하였다. 저번에 디자인세션에서 배웠던 xd에 그림자를 하는 방법과 똑같이 진행했는데, 그림자를 만드는 작업은 이상하게 재미있었당 ㅋㅋㅋㅋ

• 가장 상단 : 쿠폰과 같은 가벼운 이벤트 소재의 열/닫힘창
• 전체 카테고리 / 인기매물 / 최신매물 : 카테고리를 상단에 모두 배치하면 너무 복잡해 보일 것 같았기에 카테고리에 한번에 정리했다. 인기매물과 최신매물은 하단의 필터기능에도 있지만 상단이 너무 허전한듯 해 카테고리 옆에 채워주었다.
• 물놀이 상단 배너 -> 배너가 들어가는 칸의 높이가 너무 컸는지 화질이 깨져 다음에는 주의를 해서 크기를 조절해야겠다.
• 핫딜 배너 : 입체감이 드는 원을 넣어 사이트의 운율감을 주고자 했다.
• 매물 : 카테고리별 분류된 매물이 아닌 가장 최신의 매물들이 표시되게끔 했다.

회원가입 창 ( XD 작업물을 그대로 넣었는데 왜 박스 선들이 깨지는지 모르겠다🤨 )

마이페이지 (수정)

 

상품 검색창

 

🧡제품에 대한 상세적인 설명이 들어있는 페이지로 제품의 설명 / 작성자의 설명 / 배송교환 환불에 대한 내용 / 구매를 하고자하는 사람들과 이야기를 할 수있는 Q&A 게시판 / 다른 고객이 함께 본 상품에 대한 더보기 섹션으로 나뉘어있다. 원래는 작성자와의 1:1 채팅이 가능한 기능도 있었지만 아쉽게도 개발팀에서는 힘들다고 판단하여 Q&A 게시판으로 바뀌게 되었다.

 

채팅창(공구문의)

결제창

 

매물 등록 페이지

사진 추가 등록창 (최대 6개 사진 가능)

 

지역 보관함 서칭 페이지

상단의 검색창 옆 지도 아이콘을 클릭하면 위의 페이지가 등장한다

 

이번에도 xd를 활용했는데, 나중에 목업툴로 웹사이트를 넣다 보니 생각보다 웹사이트의 크기가 너무 커서 내가 원하는 사이즈에 맞게 나오지 않았다. 왜 그건 생각을 못했는지ㅜ 다른 사이트들을 보다 보니 제대로 크기를 생각 안 하고 한 것 같은데, 다음번에 웹사이트를 하게 된다면은 다시 사이즈를 생각해보고 디자인을 해야겠다!😂 역시 최대한 많은 레퍼런스들을 참조하는 것이 좋을 듯 싶다. 또 다른 아쉬웠던 점은 디자인한 영역들의 대부분이 개발에서 제대로 이루어지지 않았다는 점인데, 다음에는 가능한 디자인과 비슷하게 기능이 구현되는 모습까지 보고싶다는 생각이 들었다 ㅜㅜ 💦