온라인 롤링페이퍼 서비스 "롤링페이퍼" 개발기
FE개발자가 얘기하는 2달 간의 론칭 과정 및 개인적인 회고
NEXTERS는 디자이너와 개발자가 모여 2달의 활동기간 동안 원하는 서비스를 만드는 동아리입니다. 주로 6-8명 정도 팀을 이루어 프로젝트를 진행하는데, 저희 팀이 이번에 론칭하게 된 서비스는 온라인으로 편리하게 롤링페이퍼를 작성할 수 있는 웹 서비스 "롤링페이퍼"입니다.
이번 포스팅에서는 저희 서비스에 대한 간단한 소개와 더불어, 제가 맡은 파트였던 프론트엔드 개발 파트에서는 어떤 작업이 이루어졌는지 개인적인 회고를 적어볼까 합니다.
3번 갈아엎은 기획
처음부터 저희 팀이 롤링페이퍼 서비스를 기획한 것은 아니었습니다. 기획단계에서 잡음이 많았고, 처음에는 선물을 주는 서비스였다가 갑자기 선물을 몰래 물어보는 거였다가, 막판에는 한 친구의 의견으로 롤링페이퍼를 만들기로 확정이 된 거죠. 보통 2 달이라는 시간이면 1-2주에는 기획의 틀이 잡힌 상태였어야 했는데 저희 팀은 정신을 차려보니 순수 개발 시간만 2-3주밖에 남지 않았습니다.
빠듯한 시간이었음에도 불구하고 팀원들 모두 최선을 다했고 마침내 개발 기간에 맞춰 서비스를 론칭했습니다.
그렇게 나온 서비스
다들 학창 시절에 롤링페이퍼 써 본 경험 있으신가요? 고마웠던 일 해주고 싶은 말들을 쑥스럽지만 몇 자 적어보고 전달했을 때의 뿌듯함, 또는 내가 주인공이 되어 가득 메워진 마음들을 봤을 때 느꼈던 감동은 그냥 편지가 아닌 다양한 사람들의 정성이 있었기에 더 특별하게 느껴진 것 같습니다.
그때의 감성을 되살려보자는 취지에서 온라인 롤링페이퍼 서비스 "롤링페이퍼"가 탄생했습니다.
이름과 암호를 설정하여 간단하게 방을 생성할 수 있고, 카카오톡으로 링크를 공유하여 친구들과 함께 작성할 수 있습니다. 60종의 스티커로 특별한 롤링페이퍼 페이지를 꾸미면 보는 사람에게도 더 감동이겠죠?
작성일 기준으로 현재는 1.0.0 버전을 릴리즈 중입니다.
2달 동안 함께한 팀원들
열정 가득한 디자이너 2명, 우당탕탕 프론트엔드 개발자 2명, 든든한 백엔드 개발자 2명, 그리고 만능 풀 스택 개발자 1명이 모여 지금의 팀이 만들어졌습니다.
개인적으로 인턴 업무 만으로도 빠듯했는데 거기에 사이드 프로젝트까지 얹으니 하루가 정말 짧게 느껴지더라고요. 다시금 이 땅의 모든 직장인들에게 경의를 표합니다.
Front-end 개발을 했습니다.
저는 제가 그나마 잘할 수 있는 웹 프론트엔드 개발을 맡았습니다.
개발 환경을 간단하게 설명드리자면 아래와 같습니다.
Language : JavaScript
FrameWork & Library : React, Next.js, Material UI
Linter : Prettier
CI/CD : Vercel
회의 및 커뮤니케이션은 코로나 19의 영향으로 카카오톡과 zoom을 활용했고 Figma 화면을 함께 공유하며 디자인 파트와 소통했습니다. 브랜치 관리 전략으로는 github flow를 차용했고 개발 일정 관리는 github project의 칸반 보드를 이용했습니다.
아래부터는 프론트엔드 작업을 하면서 기술적으로 느꼈던 경험들을 일부 소개합니다.
스티커를 붙이고 싶었어요.
Drag and Drop. 줄여서 dnd기능은 구글링을 해보면 레퍼런스가 꽤 나왔는데, 문제는 정말 스티커처럼 dnd기능과 더불어 rotate나 resize 기능이 추가된 라이브러리는 전무했습니다.
고민 끝에 자잘한 기능들은 빼고 react-draggable을 사용하여 스티커가 움직일 수 있게 하고, 스티커 붙이기 버튼을 클릭하면 그때의 x, y좌표를 DB에 전송하는 플로우로 제작했습니다.
카드는 적당히 불규칙하게 뿌려주세요!
자유분방하게 놓인 글자들의 주는 특유의 감성을 살리기 위해 온라인 롤링페이퍼도 메인 페이지를 흩어진 카드 레이아웃으로 정했습니다. 불규칙하지만 너무 튀지 않는 선에서 어떻게 배열할지 고민이 많았습니다.
적당히 불규칙하게 뿌려진 느낌이 드시나요?원래는 Math.random으로 rotate, transition의 값을 받으려 했으나 그렇게 될 경우 DB에 css 속성 값을 담아놓지 않는 한 렌더링이 될 때마다 스타일이 변경된다는 문제가 있었습니다.
그래서 고민한 결과 map으로 카드를 뿌릴 때 받는 index 인자로 간단한 수식을 짜서 스타일 값을 만들었습니다. 아까도 언급한 '적당히 불규칙한' 느낌을 살리기 위해 야매로 짠 부분이 없지 않아 있습니다...
const styledRandom = (idx) => {
const hashKey = (13 / (idx + 1) + 0.2) % 1;
const x =Math.floor(hashKey * 40);
const y = Math.floor(hashKey * 40);
const rotate = Math.floor(hashKey * (idx % 2 === 0 ? 30 : -30));
return {
transform: 'rotate(' + rotate + 'deg)' + ' translateX(' + x + 'px)' + ' translateY(' + y + 'px)',
};
};
잊지 않겠다 SSR
다른 프론트엔드 개발자분이 짜신 프로토타입이 Next.js로 되어 있었는데 새로 환경을 갈아엎는 건 시간 상 비효율적이라 판단하여 (어쩌다 보니) SSR 환경에서 개발을 하게 되었습니다.
문제는 둘 다 SSR 개발은 거의 처음이라 초기 렌더링에서 css 스타일링이 안 먹는다거나 spa에서만 가능한 라이브러리를 사용하는 데 문제가 생긴다거나 하는 자잘한 이슈들이 계속 터졌습니다.
그 결과 SPA 개발보다 더 신경 써야 하는 부분들이 생기게 되었고 다시금 어설프게 아는 상태에서 개발을 하면 크게 다칠 수 있다는 교훈을 얻었습니다.
어찌어찌 론칭!
이런저런 우여곡절도 많았는데 그래도 무사히 기간 내 론칭을 했습니다. 아래는 NEXTERS 공식 홈페이지 메인 화면인데 저기에 저희 서비스가 올라간 걸 보고 그제야 실감이 나더라고요.
맨 왼쪽이 저희 서비스입니다.보통 팀 프로젝트를 하고 나면 많은 것을 얻게 되는데 특히 이번 활동은 더 의미가 컸던 것 같습니다. 간략히 정리하자면 아래와 같습니다.
기술적으로 얻은 경험
github flow를 기반으로 한 협업 방법
react-draggable, react-slick 등 평소 써보지 못했던 라이브러리 사용
재사용성이 있는 컴포넌트 만드는 방법
성과
동아리 최우수상 팀 선정
현재 기준 약 4500명의 사용자 경험
그럼에도 아쉬움 한 스푼
기획 요구 정의서 중 일부지금 버전에 있는 기능 이외에도 기획 단계에 있었지만 사라져 버린 비운의 기능들이 꽤 있었습니다. 그중 몇 개를 꼽자면 아래와 같습니다.
GIFHY 라이브러리에서 gif를 가져와 스티커처럼 쓸 수 있는 기능
(좀 전에도 언급한) 스티커 scale + rotate 기능
사진을 추가할 때 액자를 추가할 수 있는 기능
좀 더 욕심을 냈다면 추가되었을 수도 있는데 시간 상의 문제와 더불어 제 역량의 한계로 빼야 한 기능들이었기에 그 부분은 아직도 미련이 남습니다.
또 론칭에만 집중하다 보니 코드 리뷰처럼 서로 개발 지식을 공유하는 시간을 가지지 못한 점도 아쉬웠습니다. 그래서 만약 다음에도 비슷한 프로젝트를 진행한다면 기획이나 디자인 단계에서 개발을 마냥 손 놓고 있기보다는 함께 공부하며 협업에 대비하면 좋을 것 같다고 생각했습니다.
마무리
팀원들에게 받은 롤링페이퍼눈에 보이는 성과도 많았지만 가장 의미 있던 던 건 멋있는 사람들과 함께 2달 동안 밀도 있는 협업을 했다는 것입니다.
팀원 7명 각자 성격도, 취향도 달랐지만 함께 있다 보면 다들 멋있는 사람들이라는 걸 느꼈습니다. 항상 새벽까지 회의를 하던 디자인 팀, 번거로운 요구들이었을 수도 있는데 흔쾌히 작업해주던 백엔드 팀, 자고 일어나면 이미 작업을 끝내 놨던 열정 가득한 프론트엔드 동료 등. 그런 사람들을 보며 저도 제 몫을 해내고 싶었기에 한 줄이라도 더 코드를 보고 좋은 사용자 경험을 위해 고민했습니다.
결국 이런 경험들이 제 안에 쌓여 또 다른 만남을 기대하게 하는 것 같습니다. 나에겐 없는 능력을 가진, 그래서 더 매력적인 사람들과의 만남이 말이죠.
그런 사람들에게 저 또한 좋은 사람일 수 있도록 앞으로도 계속 공부하고 고민해야겠습니다.
