[프로젝트] 네 컷 아카이브 (FourCut Archive) 📸

사진을 온라인으로도 저장할 수 있는데 왜 네 컷 전용 온라인 앨범은 없을까..?
네 컷 사진 기록 및 인생 네 컷 프레임 공유 서비스를 소개합니다!

 

💡 기획 배경

QR을 통해 다운로드한 네 컷 사진, 동영상이 항상 갤러리에서 다른 사진들과 섞이는 것이 항상 아쉬웠습니다. 따라서 다운로드한 네 컷 사진을 한 공간에서 모아볼 수 있으면 어떨까 하는 생각으로부터 네 컷 사진 앨범의 아이디어가 나오게 되었습니다.

 

최근 네 컷 사진 업체들의 기능이 늘어났으며 그중 하나인 인생 네 컷 프레임 만들기 기능을 활용하고자 하였습니다. 인생 네 컷 프레임 만들기 기능은 직접 제작한 프레임을 적용하여 사진을 찍을 수 있는 기능입니다. 직접 제작한 프레임을 각자의 개인 공간에 게시하다 보니 원하는 프레임을 찾기까지의 과정이 길었으며 한 번에 볼 수 없는 것이 아쉬웠습니다. 따라서 이를 쉽게 게시하고 한 번에 모아 볼 수 있는 커뮤니티의 기능이 있었으면 좋겠다고 생각하여 인생 네 컷 제작 프레임 공유 기능을 가진 서비스를 만들고 싶었습니다.

 

따라서 네 컷 사진이라는 공통점을 가지고 두 아쉬움을 해소할 수 있는 서비스를 만들고자 하는 생각으로부터 네 컷 사진 앨범과 인생 네 컷 제작 프레임 공유 기능을 가진 ‘네 컷 Archive’가 탄생하게 되었습니다.

 

사이트 배포 링크: https://fourcutarchive.com/

노션 링크: https://six-puppy-7ec.notion.site/Archive-abcee6de877049228af3df93252e905c

 

🙌 팀원 소개

이도윤	박예진	문석범	김태윤
팀장, 프론트엔드, 디자인	프론트엔드, 디자인	백엔드	백엔드

개발 기간  2022.07.30 ~ 2022.08.23 (약 4주)

 

⚒️ 사용한 협업 툴

Prototype: Figma

Framework: Django

Deployment: AWS

Collaboration: Slack, Notion, Gather, GitHub issue, project

GitHub - piro17-Archive/FilmArchive: 피로그래밍 17기 최종 프로젝트 FourCutArchive

Figma

Slack

Issue

Pull Request

Git Flow를 통한 브랜치 관리

📝 ERD

https://www.erdcloud.com/d/6WdD3yvkjMcjYyaJ6

ERD

🔥사이트 소개

1. 메인 페이지

 FourCut Archive 서비스 설명 및 각 기능별 메인페이지로 이동

- 상단의 메뉴바를 통해 각 기능의 메인페이지로 이동할 수 있다.
- 가장 상단의 swipe의 ‘자세히보기' 버튼을 통해 각 기능의 메인 페이지로 이동할 수 있다.
- 로그인 이전에는 로그인과 회원가입이, 로그인 이후에는 로그아웃과 마이페이지의 메뉴로 이동할 수 있다.
- 메인페이지 하단에는 Four Cut Archive의 기능과 관련된 설명을 확인할 수 있다.

 

2. 로그인 페이지

로그인, 소셜 로그인, 아이디 찾기, 비밀번호 찾기, 회원가입/(유저 관리)

- 회원가입 : 해당 서비스의 전체 기능을 사용하기 위해서는 회원가입이 필요하다.
- 로그인 : 회원가입을 한 뒤 아이디와 비밀번호를 통해 로그인이 가능하다.
- 소셜 로그인 : 구글, 네이버, 카카오 소셜 로그인을 통해 서비스 이용이 가능하다.
- 아이디 찾기 : 회원가입 시 작성한 이름과 이메일을 통해 아이디 찾기가 가능하다.
- 비밀번호 찾기: 회원가입 시 작성한 이메일을 통해 비밀번호 재설정이 가능하다.

 

3. 마이 페이지

회원정보와 비밀번호 수정, 회원 탈퇴, 저장 목록 확인, 프로필 사진 변경/(유저 관리)

- 회원정보 수정 : 이름과 이메일, 닉네임에 한해서 회원정보 수정이 가능하다.
- 비밀번호 수정 회원정보 수정 창을 이용하여 들어갈 수 있으며, 기존의 비밀번호가 맞다고 확인되면 새로운 비밀번호를 입력하여 수정할 수 있다.
- 프로필 사진 변경 : 본인의 프로필 사진을 원하는 사진으로 변경할 수 있다.
- 회원 탈퇴 : 유의사항에 동의한 유저에 한해 비밀번호 확인 후 회원 탈퇴가 진행된다.
- 저장 목록 : 제작 프레임 공유 게시판에서 저장한 글을 마이페이지에서 한 번에 모아볼 수 있다.

 

4. My 네 컷 앨범

네 컷 앨범 글 작성 및 수정, 캘린더 모아보기/(CRUD, 캘린더)

- QR코드로 다운로드한 본인의 네 컷 사진과 동영상을 게시하는 공간이다.
- 메인 페이지에서는 사진, 날짜, 장소를 확인할 수 있으며, 글 작성 최신순, 사진을 찍은 날짜 순으로 정렬해서 볼 수 있다.
- 디테일 페이지에서는 사진과 동영상을 swipe 기능을 통해 모두 확인 가능하며, 글 작성 시 적어뒀던 날짜, 메모, 장소, 포토부스 종류를 확인할 수 있다.
- 캘린더 페이지에서는 월 별 본인이 찍은 네 컷 사진을 한눈에 확인할 수 있다.

 

5. 포토부스 위치

현 위치 주변 포토부스 검색, 장소 검색을 통한 주변 포토부스 위치 확인/(Kakao 지도)

- 현 위치 버튼을 클릭하면 본인 주변의 포토부스의 위치를 모두 확인할 수 있다.
- 현 위치가 아닌 다른 장소의 포토부스 위치를 알고 싶다면 장소 검색을 통해 확인할 수 있다.
- 원하는 업체의 포토부스만을 선택해서 위치를 알 수 있다.

 

6. 제작 프레임 공유

제작 프레임 글 작성 및 수정, 키워드를 통한 필터링, 글 추천 및 저장/(CRUD, Tagify)

- 키워드 태그를 다중 선택하여 or 연산으로 검색할 수 있다.
- 글 작성 시 원하는 키워드를 선택할 수 있으며, 원하는 키워드가 없는 경우 직접 입력이 가능하다.
- 로그인 한 user에 한해 추천과 저장 기능을 제공한다.
- 여기에서 저장한 게시글들은 마이페이지에서 모아볼 수 있다.
- 추천 수를 기준으로 한 인기순 정렬과 최신순 정렬이 가능하다.

7. 한정판 프레임

한정판 프레임 및 이달의 프레임 확인, 인스타그램 글 모아보기/(크롤링)

- 인생 네 컷, 포토이즘, 포토 시그니처에 한해 한정판 프레임 혹은 인스타그램 게시글을 모아볼 수 있다.
- 인생 네 컷에서는 프레임에 마우스를 올리면 몇 월의 한정판 프레임인지 확인이 가능하다.
- 포토이즘과 포토 시그니처의 경우 게시글을 클릭하면 해당 인스타그램 게시물로 연결된다.

 

😊 소감

처음으로 진행한 프로젝트라 맡은 역할을 잘 해낼 수 있을지 걱정이 많았습니다. 그러나 팀장인 도윤 언니가 잘 이끌어줬기 때문에 끝까지 잘 마무리할 수 있었다고 생각합니다! 또한 석범오빠와 태윤이도 백엔드 파트를 미리 잘 해주었기 때문에 프론트엔드 파트를 수월하게 할 수 있었다고 생각합니다. 약 4주 가까이 되는 시간 동안 매일 게더에 모여 코딩하며 소통하는 법과 갈등이 있을 땐 어떻게 해결해 나가야하는지, 협업하는 방법을 배울 수 있었던 뜻 깊은 시간이었습니다!

1. 깃허브 브랜치 보호를 위한 이슈나, 프로젝트 기능
2. 프론트엔드와 디자인을 위한 피그마
3. 프로젝트 협업을 위한 슬랙

위와 같이 협업 툴을 사용해보며 프론트엔드와 백엔드 소통하는 법을 알게 되어 배운 점이 많은 프로젝트입니다!

 

🤞프로젝트내 나의 파트

1. 프론트
네 컷 앨범은 특성상 웹보다 모바일에서 더 많이 사용하기 때문에

웹과 모바일에서 다 사용할 수 있도록 Media query를 사용해 반응형으로 구현했습니다.

2. 웹 디자인
인원이 부족해서 디자이너까지 없었기 때문에 프론트 역할을 하면서 웹 디자인도 했습니다.

3. 기획 조금 (포즈 컨셉 추천 -> 포토부스 위치)
원래는 네컷사진을 찍을 때 포즈나 컨셉을 추천해주는 커뮤니티였지만 그것보다는 포토부스 위치를 알려주는 것이 더 실용적일 것 같아 위치 페이지를 넣는 건 어떤지 팀장에게 제안했던 경험이 있습니다.

 

❗힘들었던 점 & 배운 점

• 네 컷 앨범은 특성상 웹보다 모바일에서 더 많이 사용하기 때문에 반응형으로 할지, 모바일로만 할지 고민이 많았습니다. 욕심이 생겨 반응형으로 구현했지만 한 페이지 당 media를 활용하여 3개의 css 코드를 짜게 되어 힘들었습니다.
• 피그마를 사용하며 디자인을 짜는 과정에서, 웹 디자인은 처음 해봐서 어려움을 느꼈습니다. 처음에는 심플한 느낌으로 디자인했지만 웹과 모바일을 같이 하는 만큼 웹에서는 많이 허전해보이기도 했습니다. 그래서 디자인을 많이 갈아엎었는데 창작의 고통이 엄청났습니다. 그러나 figma를 사용하여 웹 디자인을 어떻게 할지 프론트 팀원과 회의하며 디자이너와 프론트는 어떻게 소통하는지 배울 수 있었던 좋은 기회였습니다.
• Github Issue를 쓰기 시작할 때, 처음이라서 익숙하지 않아 많은 어려움을 느꼈지만 slack을 통해 여러 채널을 만들어 각 분야의 채널에서 소통하고, 깃허브와 연동하여 pull request 오거나 issue를 쓴다면 바로 알람이 뜨게 설정하며 효율을 높여 진행할 수 있었습니다.
• 프론트와 백엔드 소통이 잘 안 될 때, 한 코드를 가지고 여러번 수정하는 경우가 생겼습니다. 이를 통해 개발 프로젝트에 있어서 소통이 가장 중요하다는 것을 깨닫고 branch를 보호하기 위해 코드를 merge 할 때 review를 받도록 규칙 설정을 했습니다. 또한 깃허브의 issue와 프로젝트 기능을 사용해보며 코드 충돌을 줄이고 개발에 있어 협업을 잘하기 위해 노력했습니다.