마치 된 것 같아 개발자 - SayTheUnit!

🙂 서비스 요약 - SayTheUnit!

• 💃🏻 saytheunit.com
• 📅 2023.12.29~ 24.01.10 출시 완료
• 개요
  : 13인조 아이돌 세븐틴에서 가능한 유닛 총 8,177가지 조합 이름 짓기 플랫폼
• 부제
  : 세세세...세더네임! 세더유닛!
• 기술
  - Front-End: React+TailwindCSS
  - Back-End: Node.js+Express.js+MySQL
  - Infra: AWS EC2, AWS Route53, Nginx
  

---

심상치 않은 제목을 보고 들어오신 분은 높은 확률로 저의 첫번째 회고글을 보셨겠죠? 아무래도요...😘

이번에는 저의 두번째 회고글이자, 스스로 처음으로 여러 방면으로 기술적 고민과 도전을 한 소중한 프로젝트를 소개하려고 합니다.

💡 퇴사 이후 처음으로 시작한 기분전환 프로젝트.

---

🎯 왜 세더유닛을 기획했는가?

좋아하는 아이돌이 있다면! 그룹 내 유닛 하나쯤은 다들 알고 계실겁니다
고양이상 멤버와 강아지상 멤버가 있으면 멍냥즈,
나이가 어린 멤버로 구성된 막내즈,
등등 있죠.

하지만 덕후들은 벅차오르는 팬심으로 창의적이고 정말 재밌는 유닛 이름도 붙이는 걸 알게 된 저는, 프로젝트를 시작하게 됩니다.

1️⃣ 뉴진스 민지+해린+혜인의 유닛명은?

정답: 강하다즈
강해린 + 하니 + 다니엘의 앞 글자를 딴 조합명

2️⃣ 세븐틴 원우+호시+디에잇의 유닛명은?

정답: 전과8범즈
전원우 + THE8 + 호(🐯)시의 글자를 딴 조합명

이렇게 멤버들 이름과 조합만으로도 신박하고 유쾌하게 노는 팬들의 모습을 보실 수 있습니다...

세븐틴 조합 총 8,177가지? 당장 서비스 만들어.

🖍️ 와이어프레임 샤샤샥 그리기

와이어프레임으로 간단하게 밑그림을 그리고 개발하면서 디자인을 적용하는 방식으로 빠르게 진행하기.

💎 본인의 UX 가치관

• 최대한 간단하고, 메인 기능이 무엇인지 바로 알 수 있도록 직관적으로 구성하기
• 왜? 조금 복잡해지면 사용자가 서비스를 이탈할 가능성이 높다..!
• 그렇기 때문에, 간단한 UX를 위해서 기획 또한 간단하게 구성한다

🔧 메인 기능 먼저 구현하기

🎨 이미지맵 태그

본 프로젝트의 주요 기능은,
메인에 있는 "세븐틴 단체 사진"에서 특정 멤버를 선택하여 조합 이름을 보여주는 것.

사진 내의 특정 영역을 지정하고 이벤트를 작동하기 위해서 이미지맵 태그 map과 area 요소를 사용합니다.

이미지맵 태그를 지정할 때 필요한 링크 요소가 많은 경우 이미지맵 사이트를 활용해서 손쉽게 해당 좌표 값을 구할 수 있지만...!

저는 반응형을 고려하면서 단체 사진과 선택할 때 추가되는 캐릭터 이미지 사진 모두 디바이스별로 크기 조정이 필요하기 때문에,
또한 13명 밖에(?) 되지 않아서 직접 사진 크기를 조정하면서 좌표 값을 구했습니다.

사진편집 프로그램 PhotoScape X를 사용하면 하단에 좌표값을 확인할 수 있고, 사진 크기 조정 등 다양한 편집이 가능해서 프로그램 자체도 추천합니다🙃

이렇게.... 총 6가지의 반응형 레이아웃에 맞춰서 13명의 멤버에 대해서 이미지맵 좌표와 선택 이벤트 함수 모두 적용하기...
당시에는 기능 구현이 우선 목표라서 노가다로 작업했는데 다음에는 더 효율적인 방법을 찾아봐야겠어요....
하지만 멤버들 얼굴 보면서 작업해서 좋았죠?

이렇게 해서 원하는 멤버를 선택했을 때, 하단에 멤버의 이름이 표시되고 토글하면 선택에 해제되는 첫번째 주요 기능 구현을 진행했습니다.
(선택한 멤버들을 표시하기 위해 귀여운 봉봉이 캐릭터 이미지도 적당하게 배치했습니다. 진짜 팬심 가득ㅎㅎ💍)

🏸 카테고리 (tag)로 Filtering

이제 DB를 설계해서 멤버 여러 명을 선택했을 때, 공통으로 속한 유닛 이름 데이터를 표시하는 로직을 구성합니다.
그 전에, 멤버가 13명이기 때문에 유닛은 최대 4명까지만 조합하기로 스스로 약속했어요...
유닛 5명이 넘어가면 그건 팀이라고 부를게요...

💡 조합이 너무 많아지면 테이블 간의 Join이 늘어나서 서비스 성능 저하와 UI가 안 예뻐짐 이슈라는 기술적인 이유가 있답니다.

• MySQL을 사용해서 멤버 이름으로 테이블 13개를 지정하고,
  UNION과 Search Query를 사용해서 선택한 멤버 이름 (테이블)에 대한 검색 쿼리를 설정하고 post 처리합니다.

• 유닛이 다양하기 때문에 unit_name 칼럼에서 중복이 없도록 unique 처리를 하고, unit_member 칼럼인 유닛 조합 멤버 이름도 고유 순서대로 정렬되도록 설정했습니다.

• 그리고 백엔드(Node.js)에서는 영어 대문자 이름을 사용하고, 프론트에서는 한글 이름으로 처리까지!

• 선택한 멤버가 4명이 초과되면, react-toastify로 토스트 메세지 또한 설정해줍니다.

메인 기능 다 구현 끝났어요...Simple is Best!

⚙️ AWS EC2 배포하기

회사에서 가장 잘 배운 AWS EC2 배포 를 복습하면서 사용하기로 했습니다.
정말 첫번째로 사용자한테 출시하는 서비스니까 정성스럽게 AWS를 선택하며 프리티어 요금제를 야무지게 써먹기 위함입니다.

• DB 어플리케이션 Sequel Ace의 외부 접속과 Express.js 서버 접속을 위해서 AWS EC2 보안정책의 인바운드 규칙에 포트 추가

• pm2 서버로 무중단 배포 적용

• CORS, proxy, nginx 설정

• https 인증 추가

• 마지막으로 AWS Route53에서 구매한 도메인 연결하기

🫶 Ngninx 이미지 서버로 에러 페이지 커스텀하기

팬심으로 나름 잘 만든 거 같아서 조금 더 욕심을 내봤습니다.
바로 점검중 페이지와 404 에러 페이지!

✅ Back-End Error Handling

AWS EC2 인스턴스에 올라간 Nginx를 설정할 때

• /etc/nginx/html 디렉토리 내에 html과 Img 파일을 지정하고

• /etc/nginx/sites-enables/saytheunit.com 디렉토리에서 설정 파일에 error_page에 해당하는 html 파일을 추가합니다.

• 또한 작업 시 인스턴스틔 pm2 서버를 중단할 때도 에러 페이지가 보이도록 설정

✅ Front-End Error Handling

잘못된 경로에 접근하면 404 에러 페이지 띄워줍니다

참고로 404 페이지의 주인공인 세븐틴 멤버, 우리 부승관은 저의 8년째 최애랍니다...🧡

📢 컨텐츠 중독자의 마케팅

모든 개발과 배포가 끝난 후, 컨텐츠 중독자인 저는 또 열심히 포스터와 컨텐츠를 제작하고 홍보를 진행합니다.

세븐틴 데뷔 앨범과 'Your Choice' 앨범을 오마주한 컨셉 포스터.

서비스 카드뉴스 사용 가이드 카드뉴스

주기적인 유닛 업데이트 안내

실제 팬들이 설문조사를 통해서 제보 받은 유닛 이름 업데이트 내용을 안내합니다.
설문조사에 대해서는 마지막에 추가 설명할게요
(할 말이 많은데 정리가 잘 안돼 도와줘 SOS)

멤버 생일 에디션 이벤트

생일 주간에 전반적인 디자인이 바뀌는 나만의 이벤트 ON

야무지게 서비스 중간점검까지...!

💝 인생 최초로 받은 사용자 피드백

바야흐로 24년 1월 14일...
인생 처음으로 서비스를 출시하고,
최초로 받은 사용자 피드백으로 기능을 업데이트하다

팬 커뮤니티 위버스 세븐틴 채널에 서비스 홍보글을 작성했는데 실시간으로 여러 팬들(캐럿이라고 부를게요)이 사용해주셨어요.
어떻게 아냐고요? 실시간으로 GA랑 Clarity로 사용자 모니터링을 했거든요,,,

설문조사 구글폼으로 받은 첫번째 피드백은 바로 외국인 캐럿!

팬덤 서비스인만큼 다국어 지원 기능에 대해서 고려하고 있었지만, 천천히 추가하려고 했는데 인생 첫 유저 피드백으로 받으면서 너무 신나고 설레서 바로 공부해버리기~

🌐 i18n을 이용한 다국어 지원 기능

접속 IP에 따라서 자동으로 설정하거나, 토글 버튼을 사용해서 번역하는 방법이 있는데 첫번째 학습이기 때문에 후자의 방법을 선택했습니다.

토글 버튼 이름은
I Don’t Understand But I Luv U, 이는 세븐틴 노래 제목인데요.

실제로 해당 노래 제목은 세븐틴 멤버들이 라이브 방송으로 한국어를 할 때, 외국인 팬이 채팅으로 "I Don’t Understand But I Luv U" 라고 작성하여 팬심을 표했고, 이에 크게 감동받은 멤버들 에피소드로 시작되었답니다 ㅎㅎ

아무튼
Internationalization(국제화)를 줄여서 i18n을 적용하기 위하여 react-i18next 라이브러리 사용합니다.

그리고 이렇게 번역 내용을 JSON으로 작성해줍니다.

👩‍💻 일해라 개발자! - 어쩔 수 없는 수작업

처음 서비스를 출시할 때 20개 정도 유닛 이름을 추가했고,
이후 다른 유닛 이름은 설문조사 구글폼을 통해서 팬들한테 제보를 받도록 구성했습니다.

나름 개발자로서 이런 번거로운 수작업을 조금이라도 편하게 자동화를 하고 싶었는데 설문조사로 받은 유닛 이름 답변들을 보니까 이런저런 이유로 개발자선에서 적당히 필터링과 보정 및 검열하는 수작업을 결정했습니다.

• 중복된 내용과 맥락의 유닛 이름이 많음

• 개인적인 의견이 난무하거나, 적합하지 않은 유닛 이름 존재

---

🙃 마무리

하지만 재밌죠?

이번 프로젝트 회고글에서는 특히나 팬심뿜뿜하는 자기만족 및 기분전환으로 즐기면서 작업했습니다.
타겟 사용자층은 그냥 내 자신이고, 너무나 잘 알고 있는 대상이였기 때문에 조금씩 세븐틴 관련 키워드나 요소를 추가하거나,
조금 더 직관적이고 사용하기 편한 UX를 설계하거나,
필요한 기능에 대해서 직접 학습하고 구현하면서 배워나갔습니다.
특히나, 역시나,
저의 첫번째 사용자인 외국인 캐럿분의 소중한 피드백이 아직도 기억에 남네요.

개발자라면 모두, 나만의 즐길 수 있는 힐링용 사이드 프로젝트 하나 해보시는걸 꼭 추천드립니다!

세븐틴 입덕도 환영해요🤗