요즘 사이드 프로젝트가 유행이라며? ㅋㅋ
개발자가 직접 기획, 디자인도 해보고 tailwind도 사용해본 후기
평소처럼 개발 일을 하고 있었다. 개발팀 사람들과 얘기를 나누는데 사이드 프로젝트를 해보자는 얘기가 나왔다. 우리 회사의 개발자분들은 '새로운 것'에 목말라 있다. 회사 프로젝트에서 진행하기 힘든 써보지 않았던 프레임워크도 써보고, 우리끼리 재밌는 기획으로도 개발해 보고, 이거 생각만 해도 재밌겠잖아? 바로 시작했다!
※ 사이드 프로젝트란?
회사 업무가 아닌 개인적으로 진행하는 개발 프로젝트로 수익성과는 상관없이 자기가 적용해보고 싶은 기술 스택을 적용해 보며 개발하는 프로젝트를 말합니다.
아이디어 모으기
논현 맛집 지도, 마니또, 크리스마스 트리(산타파이브와 비슷한), 담화박스 구독자들이 구독 날에 입장해서 얘기를 나눌 수 있는 채팅방, 역대 담화박스에 담긴 술들을 정리한 박물관 등이 있었다.
※ 담화박스란?
제가 다니고 있는 회사 술담화에서 3,9000원을 내면 매달 전통주 소믈리에가 엄선한 전통주를 집으로 보내주는 박스를 담화박스라고 합니다.
개인적으로는 회사와 관련 있는 프로젝트를 하고 싶었는데, 업무처럼 되는 게 싫다는 의견이 있어서 회사와 무관한 프로젝트로 하기로 했다. 회사 동료분이 '배달의 민족'에서 진행했던 연말 보고서인 '먹어 보고서'를 비슷하게 만들어보자는 의견이 나왔다.
프런트엔드 백엔드 모두 할 일이 적당히 있을 것 같았다. '먹어 보고서'는 '마셔 보고서'라는 이름으로 패러디했다. 연말에 종무식 때 술담화 직원분들이 로그인해서 자신이 술담화 쇼핑몰에서 구매한 다양한 정보들을 2022년 연말 결산으로 볼 수 있게 하면 재밌을 것 같았다.
추가적으로 회사에서는 매주 금요일 모든 사람들이 모여서 서로를 칭찬하는 문화가 있다.
이름은 가렸습니다연말결산 콘텐츠가 끝나면 올 한 해 자신이 받은 칭찬을 볼 수 있는 페이지를 만들어 보자는 이야기도 나왔다. 종무식 때 훈훈한 분위기가 될 것 같아서 이것도 추가하기로 했다.
개발 시작!
어쩌다 보니 개발팀 모든 사람이 참가하는 거대한(?) 프로젝트가 되었다. 먼저 어떤 페이지를 만들지 기획했다. 개발만 하다가 기획을 해보니 다들 신선한 경험이었다. 그렇게 모두가 아이디어를 자유롭게 냈고 가장 주문을 많이 한 요일, 주문한 맛의 순위, 가장 많이 주문한 전통주, 올해 이용한 담화배송 횟수, 전체 주문 중 선물하기 주문의 비율, 가장 많이 주문한 주종, 작성한 리뷰 비율, 올해 받은 칭찬들, 스타워즈 엔딩 페이지를 만들기로 했다.
프런트엔드 입장에서는 복잡한 기능이나 api 호출은 없는 서비스여서 주로 애니메이션이나 CSS 위주로 개발하게 되었다. 현업에서는 납기에 맞춰 빠르게 개발하는 게 중요하여 애니메이션은 하고 싶어도 못하는 상황이 많았다. 그래서 하고 싶었던 애니메이션들을 마음껏 적용해 보았다. (사실 이거 말고는 할 게 없었다)
Tailwind
내가 새로 써본 프레임워크는 tailwind였다.
출처 : https://2022.stateofcss.com/en-US/css-frameworks/stateofcss에서 tailwind css 가 항상 높은 순위에 있고 카카오 엔터테인먼트에서도 tailwind를 도입했다는 기술 블로그 글을 본 적이 있어서 한번 써보고 싶었다. 써보니 장단점을 느낄 수 있었다.
구현한 페이지
작성한 코드장점
1) css 작성 없이 구현 가능하다.
별도의 css 파일을 만든다든지, css in js로 css를 작성할 필요 없이 tailwind에서 제공하는 class 명을 입력하면 손쉽게 css를 적용할 수 있다.
2) jsx 코드의 class명을 확인하면 css를 알 수 있어서 직관적이다.
예를 들어 70 라인을 보면 display는 flex를 적용하고 있고, flex-direction은 column이구나 나는걸 바로 알 수 있다.
단점
1) 외우기 전까지는 tailwind 홈페이지에서 수많은 검색이 필요하다.
tailwind를 개발하면서 가장 많이 보게 될 검색창내가 알고 있던 익숙한 css도 tailwind에 적용하기 위해서는 검색이 필요하다. 매번 검색해야 하니 처음에는 불편하고 진입 장벽이 있었다.
이 단점은 Tailwind CSS IntelliSense를 이용하면 어느 정도 해소가 된다.
Tailwind CSS IntelliSense2) 커스터마이징에 한계가 있다.
위의 카카오톡 대화창과 비슷한 형태를 만들기 위해 css로 삼각형을 만드려고 했다.
출처 : https://fromnowwon.tistory.com/entry/css-triangle-bubbleborder를 50px로 설정하고 싶었는데 tailwind css에서는 이를 지원해주지 않았다.
border-50을 class명에 입력해도 안되더라. 적용할 수 있는지 자세히 찾아보진 않았지만 border-8로 해결은 했다. 이렇게 세세한 커스터마이징은 바로 적용이 불가능해서 불편했다.
3) class명이 너무 길어져서 가독성이 떨어진다
나는 사이드 프로젝트여서 class명이 엄청 길진 않았지만, 실제 현업에서 쓰면 불을 보듯 길어질게 뻔했다.
이 정도 길이면 약과 아닐까이를 해결하기 위해 공통적으로 쓰이는 클래스들을 묶어서 (일종의 컴포넌트화 해서) 정의하는 방법이 있긴 했다. 하지만 이런 파일을 또 새로 만들어서 관리해줘야 해서 tailwind css의 장점이 퇴색되는 느낌을 받았다.
결론
기존 회사 프로젝트에 적용하는 건 힘들지만 간단한 개인 프로젝트에서는 적용하면 개발 생산성을 더 높여줄 수 있을 것 같다. css 파일 작성할 시간을 줄일 수 있고, 익숙해져서 검색하지 않고 사용하게 되면 개발 속도를 단축할 수 있을 것 같다.
Animate.css
다른 분들은 직접 js로 애니메이션을 만드시던데 그 정도의 열정이 없었던(?) 나는 animate.css라는 야매(?) 프레임워크로 애니메이션을 구현했다.
오른쪽에 있는 애니메이션들 하나씩 클릭해서 확인하고 import 해서 class 만 추가해주면 된다. 간편하게 애니메이션 추가하고 싶을 땐 좋은 듯!
<img
src="/images/gift/gift_close.png"
alt="선물"
className="cursor-pointer animate__animated animate__shakeX animate__infinite animate__slower"
onClick={handleClickGift}
/>
아니 브런치는 왜 코드 적는 형식 없나요 티스토리는 있던데 추가해 주세요!
마치 게임에서 보물 상자를 열기 전에 상자가 움직이는 모습을 표현해 보려고 상자가 좌우로 계속 움직이도록 했다.
내가 디자인 한 페이지
나름 페이지마다 기획 의도를 살려서 해보려고 했다.
선물하기 비율 알려주는 페이지
술담화 쇼핑몰에는 자체적으로 선물하기 기능이 있다. 선물 받는 사람의 전화번호를 입력하면 그 사람이 가입하지 않아도 선물을 받을 수 있는 편한 기능이다. 카카오톡 선물하기의 경우는 수수료가 드는데 우리는 수수료가 0원이라 매우 착하다.
전체 주문 중 선물하기 비율이 어느 정도인지 보여주는 페이지를 맡게 되었다. 어떻게 선물하기 비중을 재밌게 표현할까 생각하다 선물하기 기능이니 마치 선물을 받은 것처럼 선물 포장을 보여주면 괜찮겠다 싶었다. 꾸러미를 터치해서 열면 선물하기 주문의 비율이 나오도록 하고.
선물하기 주문의 비율에 따라 문구도 다르게 나오도록 했다.
60% 이상이면 '선물을 많이 하셨네요, 산타 할아버지가 직장을 잃겠어요. 고마운 마음씨 감사합니다!'
30% 이상 60% 미만이면 '선물도 하고 나도 마시고~ 주위 사람뿐만 아니라 나까지 챙기는 마음 좋습니다! :D'
29% 미만이면 '선물하기보다는 자신에게 많이 사셨나 봐요. 술은 자기가 먹는 게 이득이죠 :D'
으로 표시했다. 어느 비율이든 기분 좋은 멘트로 보여줘서 연말의 훈훈한 분위기를 만들려고 했다.
올해 받은 칭찬 보여주는 페이지
회사에는 매주 금요일 서로를 칭찬하는 자리가 있다. 익명으로 누군가에게 칭찬하는 글을 쓰면 대표님이 한 줄씩 읽어주시며 함께 박수를 친다. 동료 서버 개발자이신 powdercat 님께서 한 해 동안 받은 칭찬을 볼 수 있는 페이지를 만들어보고 싶다고 하셨다. 그래서 손수 매주 있었던 칭찬하기 노션 페이지를 크롤링하셨다! 이 페이지의 UI는 내가 맡게 되었다.
칭찬이 모여있는 페이지를 읽으며 누군가 나에게 직접 칭찬을 얘기해 주는 것처럼 들리면 좋을 것 같았다. 그래서 카카오톡 대화 UI로 디자인하여 칭찬을 듣는 기분이 들 수 있도록 하였다. 다른 페이지들은 대부분 술담화 서비스를 어떻게 이용했는지에 대한 연말결산 이야기라 이 페이지가 가장 훈훈한 페이지가 아니었나 싶었다. 크롤링 노가다를 해주신 powdercat님에게 감사를!
개발 결과물
종무식 공개
개발팀에서 연말결산 사이드 프로젝트를 진행하고 있다는 사실은 공개 직전까지 비밀이었다. 종무식 때 깜짝 공개하였더니 반응이 좋았다 ㅎㅎ
종무식을 진행하신 잘생긴 기획 능력자 연님
특정 페이지에 나온 횟수가 가장 많은 사람에게 술잔을 선물로 드렸다사이드 프로젝트를 해보고 느낀 점
평소에는 일이 주어진 대로 개발만 하면 되었는데 내가 직접 기획 아이디어를 내고, UI를 디자인하며 개발해 보니 특별한 경험이었다. 어렵기도 했지만 재미도 있었다. 평소에 개발 마감 기한이 급하다 보니 소홀했던 애니메이션도 개발해 봤고, tailwind css와 같은 트렌디한 프레임워크도 적용해 볼 수 있어서 좋았다.
사이드 프로젝트로 개발하는 거 은근히 어렵더라. 퇴근하고 나면 게을러지기 쉬워서 코딩을 시작하는 게 어려웠다. 그래도 같이 개발한 동료들, 종무식 때 발표하자는 일정이 있어서 이렇게 해내었다.
다음에도 재밌는 사이드 프로젝트 해봐야지!
https://github.com/Sdh-Side-Project/FE-MaSheo-Report
레퍼런스
https://2022.stateofcss.com/en-US/css-frameworks/
https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/
https://fromnowwon.tistory.com/entry/css-triangle-bubble
