[멋사12기] 챌린지로 시작하는 헌 옷 리사이클링 방법 공유 서비스 (REBORN) | 여기톤(HERETHON)

 

REBORN

 

 

멋쟁이 사자처럼 동아리 여대 연합으로 진행된 해커톤인 여기톤에서 모두 다른 학교의 새로운 팀원들을 만나 개발을 진행하게 되었다.

 

프론트엔드 역할을 맡았으며,

해커톤 조건인 HTML, CSS, JavaScript만을 이용해 개발을 진행했다.

 

 

백엔드에서 Django를 사용했기 때문에 템플릿이 존재하는 폴더 경로가 중요했고,

페이지 연결과 기능 연결은 대부분 장고 언어로 진행할 수 있었다.

 

여기톤을 진행하면서 가장 신경을 썼던 부분은

피그마 디자인으로 요구된 화면 크기와 비율, 폰트 등 모든 요소의 세부적인 디테일이었다.

 

 

너무 감사하게도 기획/디자인을 맡은 팀원분이 꼼꼼하게 개발 화면에 대한 피드백을 주셨고,

여백, 폰트 두께 등 디테일함을 놓치지 않고 작업을 이어나갈 수 있었다.

 

 

개발을 진행하다가 놓칠 수 있는 부분에서도 팀원의 피드백을 통해 정확하게 보완해낼 수 있었다.

 

예를들어,
폰트를 한번에 적용하기 위해 가장 마지막에 css 코드를 작성했는데 깜빡하고 HTML에 폰트 링크를 걸지 않는 실수가 있었다.

이 부분에 대해서 기획/디자인 분이 확인하시고 폰트가 적용되지 않은 것 같다라는 피드백을 주어 코드를 다시 살펴보다가 실수를 확인할 수 있었다.
열정적인 피드백에 너무 감사했고, 자칫하면 화면의 구현 완성도를 떨어뜨릴 수 있는 실수를 바로잡고 완벽하게 개발을 끝낼 수 있어서 좋았다.

 

 

728x90

---

 

 

구현한 기능에 대해 간단하게 소개해보겠다.

 

메인페이지, 커뮤니티 페이지, 마이페이지를 담당해 개발을 했고,

먼저, 메인페이지 부터 이야기해보려 한다.

 

 

1. 메인페이지

 

메인페이지는 리사이클링 주제를 소개하고 주변 리폼샵의 정보를 전달하는 메인 배너를 중심으로 주요 기능인 랭킹 페이지, MZ를 타겟으로 한 숏폼 콘텐츠까지 구성해보았다.

 

메인배너는 swiper를 이용해 구현했으며,

각 랭킹 요소들은 클릭 시 해당 상세 페이지로 넘어가게끔 링크를 걸어놓았다.

 

 

swiper는 pagination과 next, prev 버튼의 위치를 position으로 원하는 위치에 맞게 조정해주었으며,

보드 아이템은 가로 스크롤이 가능하게끔 overflow: scroll을 사용해 기능을 구현했다.

 

 

또한 숏폼 콘텐츠도 클릭시 해당 링크로 이동해 확인할 수 있도록 a태그를 활용해 링크를 걸어주었다.

 

글 작성 버튼은 자연스러운 클릭과 열림 효과를 주기 위해

animation, tranform, translate를 활용해 움직임의 변화를 주었다.

 

메인페이지

 

---

 

 

2. 커뮤니티

 

커뮤니티 페이지는 카테고리를 나누는 것에 초점을 두고 진행했으며,

select 박스 드롭다운으로 정렬을 구분하고, CSS로 커스텀하여 원하는 디자인으로 변경해주었다.

 

 

또한 커뮤니티의 주요 기능 중 하나라고 볼 수 있는 좋아요 기능도 구현했으며,

좋아요를 눌렀을 시 채워진 하트, 취소 시 다시 빈 하트로 돌아오도록 조건을 나누어 주었다.

 

 

알림창을 만들어 사용자가 자신에게 온 알림을 모아볼 수 있도록 했고,

읽은 알림과 읽지 않은 알림을 구분하는 요소를 추가해 사용자가 확인할 수 있도록 구현했다.

 

커뮤니티 페이지

알림창

 

---

 

 

3. 마이페이지

 

마이페이지에서는 내가 쓴 글, 좋아요 한 글을 모아 볼 수 있으며,

커뮤니티와 마찬가지로 카테고리를 구분하는 것에 초점을 두고 작업했다.

 

커뮤니티 페이지처럼 카테고리가 구분되어 있는 것을 눈으로 직접 확인할 수 없기 때문에 카테고리 뱃지를 달아 구분할 수 있도록 페이지를 구성했다. 

 

 

또한 내정보를 수정할 수 있도록 버튼을 추가해 마이페이지를 완성시킬 수 있었다.

 

마이페이지

 

 

 

 

마지막으로 완성된 코드가 있는 깃허브 주소를 올리면서 글을 마무리하겠다.

 

https://github.com/BB545/REBORN