FE Github README updated!
Server Github README updated!

DJ블랙버니 신년카드 만들어보기(2023.01.26. 서비스 종료) 🔗

2023년 계묘년을 맞이하여, 주변 친구와 지인에게 마음을 전달할 수 있는 핑계거리를 만들어 보았습니다. DJ블랙버니에서 예쁜 검은 토끼 카드도 커스텀해보고 새해첫곡도 골라 선물해보세요.

시작은 별다른 이유가 없었다.

프론트엔드 개발자로 일을 하게 된지 만 2년, 이제 새로운 피쳐를 따고, 버그를 픽스하는 것은 익숙한 일이 되었고, 점점 초반의 열정이 식어가던 시점이었다. 뭔가 전환이 필요하다고 느꼈다.

언제 개발이 재미가 있었고, 실력이 늘었나?

질문해보았다. 내가 만들고 싶은 것을 만들 때, 그 과정에서 마주하는 새로운 이슈들을 해결해나가며 나의 컴포트존을 늘려갔던게 기억이 났다.

그래! 내가 만들고 싶은 걸 한번 만들어보자!

다소 소녀만화같은 시작이지만 그러했다. 오랜만에 만들고 싶은게 뭔지 하루종일 생각했다. 나는 미대를 나왔는데, 학부시절 과제 주제를 고민하던 나의 모습이 오버랩됐다. 학생 때는 "무엇을 작업해야할까"에 대해 생각하는게 너무 어려웠는데, 지금은 프론트엔드 개발이라는 도구가 생기니 내가 구현 가능한 주제들이 마구 떠올랐다!

(사실 크리스마스 관련 프로젝트였으나 시간상 문제로 신년 프로젝트로 바뀌게 되었다 ^^...)

이 과정에서 디자이너 친구를 상당히 귀찮게 했는데 개의치않고 다 받아줘서 고맙다고 전하고 싶다.

아래에서는 프로젝트 기획과 운영, 디자인, 그리고 프론트, 백엔드 개발 마지막 배포까지의 모든 과정에 대해 시간순으로 이야기해보려고 한다. 글이 굉장히 길어질 것 같다.. 다들 숨참고 LOVE DEV ❤

프로젝트 과정

01 기획

회사에는 프로젝트를 관리하는 PM이 존재하지만, .. 오늘! 여기! 무법지! 그 말인 즉슨, 내맘대로 하면 되지만 책임도 내가 지는 것... 일정 관리가 안된다면 열심히 디자인하고 개발도 다 했는데 제때 배포를 하지 못하는 불상사가 생길 수 있다. 프로젝트 관리가 정말 중요했다.

12월 중순 쯤 작업을 시작하였기 때문에 완벽한 디자인을 받고 웹개발을 시작하기에는 시간이 촉박한 상황이었다. 프로젝트에서 그래픽을 맡은 친구에게 완성된 디자인을 12월 25일까지 받기로 하고 디자인이 없어도 작업할 수 있는 서버 및 DB를 먼저 작업하기로 했다.

필요한 API 계획이랑 DB 구성은 그냥 대충 노션 테이블 사용해서 했다.

아래는 처음 프로젝트를 시작했을 때 만들었던 계획표다. 회사와 병행해야하니 대부분 퇴근 후, 주말에 개발했다. 이제와서 말하지만 필자의 게으름으로 인해 계속 일정이 밀려 배포 주엔 죽는줄 알았다.

02 레이아웃, UXUI 디자인

친구는 레터링과 카드 그래픽 작업을 하기로 해서 앱 전반적인 UXUI 작업은 나의 몫이었다. 어플리케이션이 어떤 플로우로 진행되어야 유저가 무사히 카드를 완성하고 친구에게 공유할 수 있을지를 고민했다. 이전에 비슷한 프로젝트를 진행해보았기 때문에 이 부분은 빠르게 진행했고, 이상이 있는 부분은 개발하며 고쳐가기로 했다.

레이아웃과 유저 플로우 기획은 피그마를 사용하였다. 디자인이나 CSS 변수는 그래픽이 나오면 변경될 여지가 있기 때문에 디자인이 나오고 나면 작업하기로 했다.

이렇게 간단하게라도 레이아웃을 잡게 되면, 실제 개발에 들어가기 전에 플로우에 어떤 오류가 있는지, 화면을 마주한 유저가 어떤 감정을 느낄지를 미리 파악할 수 있다. 라우팅 작업 다 하고, 로직도 다 만들었는데 막상 서비스를 테스트할때 "음..? 이게... 뭐지?" 하는 사태를 방지할 수 있다.

또 디자이너에게도 이런 요청을 할 수 있다.

반대로 디자이너의 피드백을 받을 수도 있다.

이 과정에서는 디자이너가 원하는 애니메이션, 모션 등을 캐치해서 미리 구현이 가능할지 검토하는 것도 포함되었다. 혼자 프로젝트를 하시는 분들이라도 꼭 UI는 미리 구상하고 나서 개발에 들어가시길 강권하는 바이다! 특히 피그마는 무료로 사용할 수 있고, 매우 쉬운 툴이기 때문에 추천한다.

03 서버 개발

미리 이야기하자면, 필자는 node.js로 간단한 스크립트 정도만 작성해보았지 웹 서버 작업을 해본 적은 없었다. 때문에 이것 저것 구글링을 하다 그냥 유튜브 보고 따라했다. ㅋㅋㅋ 조코딩 유튜브 좋았음..

Spotify Search API

초반 기획은 Spotify API를 사용하여 유저가 음악을 검색하여 고르게끔 하려 했다. 실제로 구현하고 보니 선택지를 주는게 유저 경험에 더 낫겠다는 판단이 되었고, 음악 리스트를 프론트에서 가지고 있는 방향으로 변경하였다.

또 프로젝트에서는 브금을 재생해야 했는데, 스포티파이는 저작권 이슈가 있어 스포티파이보다는 유튜브 플레이어를 활용하는 쪽으로 변경하였다.

Spotify API로 만든 검색 함수는 수정하여 이후 새해 첫곡 데이터를 만들 때 유용하게 사용했다.

카드 POST, GET API

서버는 express를 사용하였고, 카드 등록, 카드 조회 두 개의 API만 작업하면 되었기 때문에 생각보다 많은 코드가 필요하진 않았다. 사실 에러 핸들링을 더 세세하게 해보고 싶었는데, 막판에 더 우선순위 이슈를 처리하느라 데드라인 안에 작업하지 못했다.

우리 서비스는 1월 1일부터 카드 조회가 가능하게끔 했기 때문에, 해당 id의 카드가 존재하지만, 새해가 아닌 경우에는 보내는 이와 받는 이의 정보만을 내려보내 프론트에 노출하도록 했다.

이렇게 하면, 카드를 받은 사람은 링크에 접속했을 때 자신의 이름이 노출되는 페이지를 보고 '나'에게 편지가 왔다는 직접적인 느낌을 받을 수 있을 것이라 생각했기 때문이다. (갑자기 UX 얘기..)

여기까지는 별 문제 없이 진행되었으나, 배포 후에 내가 엄청난 실수를 했다는 것을 발견하게 된다. 이건 배포 섹션에서 이야기 해보겠다.

나를 괴롭혔던 것은 이 다음 문제였다.

04 mongoDB Atlas

대망의 몽고디비.. 서버 개발까지는 어깨 너머로 많이 봐와서 익숙했지만, DB는 뭔가 다른 세상이라고 생각했던 것 같다. 프론트엔드 개발만 한다면 DB를 직접적으로 다룰 일은 없기 때문이다. 여러 선택지가 있었지만 가장 자료가 많은 mongoDB Atlas를 사용하기로 했다.

돌이켜보면 어이없으리만큼 간단한 이슈였는데, 답을 못찾아서 한참을 헤맸다...

이슈 1

MongooseError [MongooseServerSelectionError]: connection <monitor> to ip address closed

이번 경험을 통해 다시 배운다. 에러가 나면 에러 문구를 제발.. 읽자.
해당 이슈는 현재 MongoDB에 접근하려는 ip가 허용된 ip가 아니기 때문에 일어나는 이슈이다. 이는 몽고디비에서 ip를 추가해주기만 하면 해결이 된다.

Project - Network Access - [ ADD IP ADDRESS ] 버튼 클릭 후 노출되는 팝업에서 [ ADD CURRENT IP ADDRESS ] 클릭해주면 된다.

여기서 ip address에 0.0.0.0 을 입력하면 모든 ip를 허용할 수 있다.

이슈 2

근데, 이렇게 했는데도 접근이 안된다구요? 네 잘 오셨습니다. ^^. ... ... .. .. .... .. ...

{ Error: querySrv ENODATA _mongodb._tcp.blog-cluster-0hb5z.mongodb.net
    at QueryReqWrap.onresolve [as oncomplete] (dns.js:197:19)
  errno: 'ENODATA',
  code: 'ENODATA',
  syscall: 'querySrv',                                           Blog/app.js:54:14
  hostname: '_mongodb._tcp.blog-cluster-0hb5z.mongodb.net' }

hoxy... .. .... 카페에 계신가요? 혹시.. ... .... 별다방인가요?

스타벅스 wifi 환경에서 mongoDB에 접근 시 위와 같은 에러가 뜬다. 이는 해외에서도 동일하게 발생하는 이슈라고 한다. 이를 해결하기 위해서는 DNS를 수정하는 방법도 있고 그냥 집에서 개발을 한다...는 것도 좋은 초이스..

암튼 나는 위 이슈 때문에 소중한.. ㅠ_ㅠ 피같은 주말을 하루 날렸다. 너무 슬펐지만 이후 개발 기간 동안에는 스벅 얼씬도 안한 탓에 커피값을 아낄 수 있었다는 후문이.

스택오버플로우 - 스타벅스에서 몽고디비 접속이 안돼요 흑흑!

여러 시간의 삽질 때문인지 처음 백엔드에서 몽고디비로 insert 요청이 성공했을 때 짜릿함은, 처음 프론트엔드 개발을 배우고 서버와 핑퐁을 성공했을 때와 같았다...! 다음 프로젝트는 한 시간이면 뚝딱 하겠지? 하핳

05 Frontend

프론트엔드... 가장 많은 시간을 쏟았다. 개발하면서 밤도 많이 새고, 원하는 애니메이션이 구현되지 않아 같은 테스트를 수십번 돌린 시간.

프레임워크는 앵귤러🫶를 사용했고, 카드를 커스텀할 때 카드, 레터링, 배경색, 배경 효과, 카드의 내용, 음악 모두 폼으로 관리하도록 작업했다. 앵귤러는 폼(form)을 작업하기에 너무 편하게 셋팅되어 있기 때문이다. (여기 앵발자 있어요...!)

시간이 좀 더 많았다면 아키텍쳐를 좀 더 고민해보고 컴포넌트로 잘 쪼개어 작업했을텐데, 그러지 못한게 좀 아쉽다. 24일에 그래픽 자료들을 받고 그때부터 UI 구성을 시작했기 때문에 마크업만 하기에도 시간이 촉박했다. 거의 작업하면서 반복되는 UI를 그때그때 따로 컴포넌트로 분리했다. 미리 중복될 것들을 생각해두고 시작했다면 좀 더 효율적으로 작업했을 것 같다.

SVG

이번에 작업하면서 가장 나를 힘들게 했던 SVG... 영상이 아닌 순수 코드로 애니메이션을 구성하고 싶었기 때문에, 디자이너 친구에게 모든 자료를 SVG로 전달해 줄 것을 요청했다. (왜그랬냐)

DJ블랙버니의 동작 방식을 보면, 카드를 만들 때 단계적으로 카드에 요소를 추가하는 방식으로 동작한다. 처음에는 카드의 모양, 그 다음엔 카드에 올라갈 레터링, 배경, 음악, 편지 순이다. 때문에 이 모든 것을 각각의 이미지로 관리한다면 많은 에셋이 필요하다.

카드가 총 여섯 종류,
두 가지 레터링,
네 가지 배경 색상

6 x 2 x 4 ...

경우의 수가 많아지는데, 나는 이를 최소화 하고 싶었다. 카드마다 레터링이 올라가는 위치나 크기가 달라지기에 카드 여섯 개를 두고 그 위에 레터링 에셋을 올릴 수는 없었다. 카드의 에셋이 바뀐다는 느낌을 유저가 느끼지 못하게 하고 싶었다. 이것을 SVG를 사용함으로 개선할 수 있었다.

이것이 내가 요청하여 받은 파일 에셋이다. 우측의 개발자도구를 보면 알 수 있듯이 총 4가지의 이미지 그래픽이 하나의 파일 안에 겹쳐있는 상태로 들어있다.

svg는 마치 iframe으로 화면을 그려주듯이 경로를 추가하여 해당 에셋을 로드하게 되는데, svg 내부의 style 태그를 활용하여 이를 편집해줄 수 있다. 스크립트 추가도 가능하다. 클래스 별로 각각의 4개의 이미지 visibility 만을 조정해줌으로써 이미지가 자연스럽게 같은 컨테이너 안에서 전환되도록 설정하였다.

아래와 같이 ngSwitch, ngSwitchCase 디렉티브를 사용하여 카드의 종류를 선택하고, 각 오브젝트는 내부 SVG 엘리먼트에 유저가 선택한 값에 따라 class를 달리 주어 노출할 카드의 visibility가 수정되도록 했다.

  objectLoaded(e: any) {
  	const svgElement = e.target?.contentDocument?.querySelector(
  		'svg'
  	) as SVGGraphicsElement;

  	this._svgElement = svgElement;

  	svgElement.classList.add(this.letteringClassName);
  }

<ng-container [ngSwitch]="typeClassName">
  <div class="svg-container" [ngClass]="letteringClassName">
    <object
      *ngSwitchCase="'bunnya'"
      data="./assets/card/bunnya.svg"
      height="100%"
      (load)="objectLoaded($event)"
    ></object>
    <object
      *ngSwitchCase="'bunnyb'"
      data="./assets/card/bunnyb.svg"
      height="100%"
      (load)="objectLoaded($event)"
    ></object>
    <object
      *ngSwitchCase="'bunnyc'"
      data="./assets/card/bunnyc.svg"
      height="100%"
      (load)="objectLoaded($event)"
    ></object>
    <object
      *ngSwitchCase="'heart'"
      data="./assets/card/heart.svg"
      height="100%"
      (load)="objectLoaded($event)"
    ></object>
    <object
      *ngSwitchCase="'cloud'"
      data="./assets/card/cloud.svg"
      height="100%"
      (load)="objectLoaded($event)"
    ></object>
    <object
      *ngSwitchCase="'oval'"
      data="./assets/card/oval.svg"
      height="100%"
      (load)="objectLoaded($event)"
    ></object>
  </div>
</ng-container>

사실 그냥 각각 에셋을 두면 간단하게 해결될 문제였고, 그렇게 중요도가 높은 파트는 아니었지만, 한번 시작하니 괜히 끝까지 가보자 싶었다. 코드는 심플하지만 그만큼 많은 고민을 했던 부분이다.

이외에도 카드의 봉투가 열리는 모션 역시 svg를 활용하여 작업했다.
다음에는 좀 더 복잡한 모션을 해보고 싶다.

모션 보러 가기
https://www.instagram.com/p/Cm1ngwbq3td/

06 배포

FE는 만만한 Netlify, 서버는 Heroku를 사용하였다.
Heroku는 현재 무료 플랜은 없고 최소 7$/mo 부터 시작한다.

혼자서 index 0 이 될 카드를 하나 완성하고 나서 DB에 잘 저장이 되었는지 확인을 하고, 공유하기 기능까지 테스트를 했다. 첫 카드는 같이 작업했던 디자이너 친구에게 전송했다.

테스트를 마치고 나서 인스타그램과 여러 소셜미디어에 홍보를 했다.

12월 30일부터 트위터 실시간 트렌드에 새해 첫곡이 나왔는데, 이때 트위터 봇마냥 홍보를 겁나게 했다. 사실 트위터는 거의 정보 수집용 눈팅계였는데, 내 인생 가장 많은 트윗을 날린 날 ^^...

내년에는 홍보를 어떻게 할지 좀 고민해봐야 할 것 같다. 프로덕트도 중요한데, 홍보는 배로 더 중요한 것 같다.. 열심히 만들어도 아무도 안써주면 무슨 의미가 있겠어..

몽고디비는 UTC 기준으로 시간을 보여줘서 매트릭스에서 노출되는 시간에 9시간을 더해서 봐야한다.
30일 저녁 트위터 실트에 새해첫곡이 올라오고 나서부터 유입이 확 늘었고, 1월 1일 카운트다운 직전에 가장 많은 사람들이 들어왔다.

DB의 사이즈 변화를 보여주는 표. 1월 1일 이후에도 200 여개의 카드가 생성되었다.
프론트엔드만 하다가 이런 데이터 보니까 너무 재밌었다. 짜릿해 늘 새로워.

07 배포 후 이슈 대응

누가 배포하면 끝이래.. 배포하자마자 갤럭시 쓰는 엄마가 노래 재생이 안된다며 버그 제보를 해주었다. 앱등이인 나는 안드 폰 테스트도 불가능해서 그냥 구글링해서 수정해보고 배포하고 물어보고의 반복이었다. 다음 프로젝트때는 반드시..! 안드로이드 공기계를 구비해야겠다고 다짐했다.

버그 fix 뿐만 아니라 나도 테스트를 해보면서 불편하다고 느끼는 것들을 patch 했다. 카드가 저장될 때 로딩페이지를 추가하거나, UX writing을 수정하기도 했는데, 대표적인 것이 카드를 저장할 때 노출되는 얼럿의 문구였다.

PATCH: UX Writing

몇몇 친구들이 대뜸 내게 "카드 받았어?" 하고 물어보는 것이었다.
아니, 네가 링크를 안보냈는데 내가 어떻게 보냐구!!!!!!

내가 만든 앱의 플로우는 다음과 같았다.

카드를 만든다 → 카드를 완성하여 미리보기 한다 → 저장한다 → 카드 id path로 이동한다
→ 공유 버튼을 누른다 → 친구에게 링크 또는 카카오톡으로 공유한다.

그런데, 위의 [저장한다] 단계에서 POST 요청 성공 시 팝업으로 "저장을 성공했어요!" 얼럿을 띄워주는데, 자꾸 친구들이 문구만 보고 화면을 닫아버리는 것이다. id를 모르면 평생 그 카드를 찾을 수 없다구 친구야.. 그래서 여러 번 DB를 뒤져 카드 링크를 찾아 친구에게 알려주곤 했다.

원인이 뭘까 고민을 해보았는데, "저장을 성공했어요!"의 문구가 문제라는 생각을 했다. 카드를 저장은 했지만, 아직 모든 과정이 끝난 것은 아닌데 성공이라는 단어가 모든 과정이 끝났다는 느낌을 준다. 그래서 문구를 다음과 같이 수정했다.

성공이라는 단어를 저장이라고 수정하고, 아래에 확인을 하고 공유를 하러 가자는 내용을 덧붙여 모든 과정이 아직 끝나지 않았고, 다음 페이지에서 공유할 수 있다는 메세지를 던졌다. 이렇게 문구만 수정하니 위와 같이 실수하는 케이스가 거의 사라졌다. UX 라이팅의 중요성에 대해 다시금 깨달았다.

HOTFIX: 2023년은 오지 않아...

그리고 정말 큰 실수 한가지...
12월 31일 새해맞이를 기다리며 로그를 확인하고 있었는데, 현재시간이 바뀌지 않는 것을 확인했다. 실시간으로 로그는 찍히는데 계속 21시 52분 51초 ... 식은 땀이 났다.. 이게 뭐지?

알고보니, node.js에서 함수 밖에서 현재 로컬 시간을 할당하고 이를 2023-01-01 ... 새해와 비교를 하고 있었던 것이다. 함수 밖에서 로컬 시간을 할당하고 있으니, 로컬 시간은 딱 한번, 서버가 빌드되고 배포되는 그 시점에 머물러 있었던 것이었다. 앞서 말했듯이 새해가 되기 전에는 서버에서 카드 내용을 내려주지 않고 있는데, 이대로면 새해가 되어도 아직 새해가 되지 않았다는 문구가 노출될 일이었다.

새해 직전이었기에 많은 유입이 있었지만 눈물을 머금고 이를 수정, 배포할 수 밖에 없었다.
이런 바보같은 실수를 하다니 자괴감이 밀려왔지만, 프론트 개발하느라 초반에 만든 서버를 더블 체크하지 못한 내 잘못이었다. 그래도 새해 되기 한시간반 전에 찾았으니 얼마나 다행인지. 현재 시간 콘솔로그로 찍은 나 칭찬해..

코어자바스크립트 다시 배우자 ^^;

프로젝트 리뷰

처음 프로젝트를 기획할 때, 나의 목표는 500개의 카드 생성이었다. 적어도 내 인스타그램 친구들 정도는 해주지 않을까 싶었다. 하지만 현재 시간 기준 총 1,916명이 우리의 서비스를 통해 카드를 만들고 지인에게 공유했다. (목표 3배 이상 달성!) 많은 사람들이 다른 누군가의 새해를 응원해주고 힘이 될 노래를 골라 주고 받는걸 서버로그로 보았고, 그 모든 카드를 내가 받은 양 감동 받는 시간이었다.

처음 프로젝트 아이디어를 떠올린 것이 12월 8일, 위 모든 과정을 3주 안에 해내야 했다. 주중에는 회사 일로 시간을 거의 내지 못했고 막판에 배포 전 3-4일은 매일 새벽 다섯시까지 작업하고 쪽잠을 자며 달렸다. 매일 가던 운동도 가지 못하고 여러모로 사람꼴이 말이 아니었다. ㅋㅋㅋ

서버, DB를 다뤄보면서 내 경험치를 키웠다는게 의미가 있는 것 같다. 어려운 기술을 사용한 것은 아니지만 내가 기획부터 디자인, 개발, 홍보...까지 하며 하나의 서비스를 A-Z 온전히 책임지는 경험이었다. 실제 유저들이 사용하는 것도 보고 직접적인 반응과 피드백을 얻으니 짜릿했다. 첫 회사에 입사하고 첫 배포를 했을 때 마치 오랜 기간 연습생 생활을 마치고 무대에 서는 아이돌이 된 것 같은 느낌을 받았는데, 그 기분이 되게 오랜만에 느껴졌다.

앞으로의 계획

연초에는 DJBB 프로젝트를 리팩토링 해볼 생각이다. 바쁜 일정에 지저분한 코드도 외면하며 달렸다! 21일 서비스 종료 후 하나씩 뜯어 개선해보고 싶다. 앞으로도 틈틈이 내가 해보고 싶었던 것을 만들어보려 한다. 디자인에도 더 욕심이 나고, 유저들이 재미있게 갖고 놀 수 있는 장난감을 만들어보고 싶다.

디자이너로 참여한 친구도 이번 프로젝트가 만족스러웠는지 벌써 2024 푸른 용 🐉 의 해를 준비하자고 이야기를 하고 있다! 2024 신년 프로젝트는 10월부터 긴 호흡으로 준비해서 더 멋진 디자인과 개선된 사용성으로 더 많은 사람들의 이야기를 담고 싶다.

토이프로젝트? 그거 별거 아님! 걍 혼자해도 됨! ㅇㅇ

3주만에 만든 DJ블랙버니 해보기 (2023.01.26 서비스 종료) 🔗

개발에 도움이 되었던 링크들
https://velog.io/@hyounglee/DJBB-links

만든 사람들

웹개발 + UXUI 설계 및 디자인 : @playthings.kr
레터링 + 그래픽디자인 : @pot_works

FE Github README updated!
Server Github README updated!