🍒모바일 웹 사이트, 'Red flavor Diary' 프로젝트 회고록!

안녕하세요😊

브랜드 디자인과 프론트엔드 개발자로 취업 준비 중인 김다은, 정채빈입니다.

저희가 제작한 프로젝트의 회고록을 작성하며, 'Red flavor Diary' 를 소개합니다.

Red flavor Diary란?

‘Red flavor Diary’는 걸그룹 레드벨벳의 앨범 ‘The Red Summer - 빨간 맛’을 리디자인하여 시각적으로 다양한 즐길거리를 제공하는 모바일 웹 사이트입니다.

레드벨벳 멤버의 프로필을 볼 수 있는 ‘프로필 보기’, 다양한 스티커와 브러쉬로 멤버의 이미지를 꾸밀 수 있는 ‘포토카드 꾸미기’, 원하는 캐릭터의 공간을 자유롭게 꾸밀 수 있는 ‘마이룸’ 그리고 레드벨벳의 노래를 들을 수 있는 ‘Playlist’가 있습니다. 

디자인 콘셉트는 비밀 다이어리입니다. 비밀 다이어리는 오직 나 혹은 단짝 친구와 공유하던 세상에 하나밖에 없는 것입니다. 이것에 착안하여 레드벨벳을 좋아하는 마음을 나만의 비밀 다이어리에 꼭꼭 숨겨두었습니다. 사용자는 ‘Red flavor Diary’를 펼쳐 곳곳에 숨겨둔 팬심을 발견하며 공감과 즐거움을 찾을 수 있습니다.

기획 배경

‘Red flavor Diary’는 레드벨벳에 대한 팬심으로 시작된 프로젝트입니다. 최근 트렌드인 y2k를 콘셉트로 정해 레드벨벳의 곡과 접목시켜 리디자인 하였습니다. 대중들에게 가장 잘 알려진 ‘빨간맛’ 노래로 친숙하게 접근할 수 있고, 다양한 즐길 거리로 참여를 유도할 수 있습니다. 

시행 착오

✅ 디자인

UI/UX 외주 작업 경험이 있어 크게 다르지 않을 것이라고 생각했지만, 실제로는 처음부터 백지 상태로 시작하는 것이 조금 어려웠습니다. 기획서를 작성했음에도 불구하고, 중간에 콘셉트를 추가하고 살을 붙이며 수정에 수정을 더하는 등의 작업이 이어졌습니다. 또한, 타깃으로 삼은 레드벨벳 팬들이 좋아할지에 대한 고민부터 디자인에 관한 다양한 의견까지 끊임없이 논의되었습니다. 하지만 외주 작업이 아닌 새로운 장르로 내 작업물을 만들어내는 과정이 흥미로웠고, 서로가 시도해보고 싶은 것을 프로젝트에 반영할 수 있다는 점이 특히 즐거웠습니다.

✅ 개발

프로젝트의 목표는 시각적인 즐길거리를 제공하는 것입니다. 따라서 디자인은 매우 중요한 요소입니다. 하지만 디자인에만 중점을 맞춘다면 기능과 성능이 좋지 않아 사용자들이 기대하는 경험에서 매우 벗어날 수 있는 문제점이 있습니다. 프론트엔드 개발자는 디자이너와 협업하여 요구사항을 잘 구현하는 것은 물론, 사용자와 상호작용하여 잘 동작하고 성능이 우수한 웹 애플리케이션을 개발해야 합니다. 제한된 시간 안에 Figma의 구현 사항을 최대한 잘 구현하고, 기능이 잘 동작할 수 있도록 다양한 도구를 적절히 사용하려 노력하였습니다. 예를 들어, ‘포토카드 꾸미기’에는 그림을 그리고 스티커를 붙일 수 있는 캔버스 기능이 필요합니다. HTML의 canvas는 웹페이지에 그래픽을 그릴 수 있지만, 모바일 환경에서는 추가적인 함수를 작성해야 합니다. 이러한 문제를 해결하기 위해 Fabric.js와 같은 다양한 인터렉션을 지원하는 라이브러리를 사용하여 시간을 단축하고 효율적으로 작업하였습니다.

배운 점

✅ 디자인

코딩에 맞춰진 디자인이 따로 있다는 것을 배웠습니다. 그동안 그래픽과 BI/BX 직무로 취업 준비하면서 UI/UX에는 대략적인 이해만 가지고 있었습니다. 이 프로젝트를 시작하면서 UI/UX를 집중적으로 공부했지만, 최종 작업물을 넘겼음에도 불구하고 계속해서 수정할 부분이 나타났습니다. 이러한 과정에서 개발자의 입장을 엿볼 수 있었고, 서로 의견을 나누며 매우 유익한 경험을 얻을 수 있었습니다.

✅ 개발

이번 프로젝트를 진행하면서 프론트엔드 개발이 단순히 기능을 구현하는 것을 넘어 복잡한 과정이 필요하다는 것을 알게 되었습니다. 이미지를 불러오는 과정에서 발생하는 CORS 에러, iOS에서 특히 많이 발생하는 크로스 브라우징 문제, 이미지가 많아 로딩 시간이 길어져 성능이 떨어지는 문제, SEO를 최적화 하려면 어떻게 해야 하는지 등 여러 문제에 직면하였습니다. 이 문제들을 해결하면서 프론트엔드 개발자로서 다양한 측면들을 고려하고 더 나은 사용자 경험과 효율적인 웹 애플리케이션을 제공하기 위해 지속적으로 노력해야 한다는 것을 배울 수 있었습니다.

도전

✅ 디자인

UI/UX 작업을 더불어 디자인 면에서도 새로운 장르를 시도했습니다. 세리프 서체와 무채색에 가까운 낮은 채도의 분위기가 주를 이루는 작업물이 대부분이라 이게 나의 특징이구나 생각했습니다. 그러나 이번 프로젝트를 시작하면서 정반대의 분위기를 표현하여 다양한 작업물로 스펙트럼을 확장하고자 했습니다. 처음부터 끝까지 채운 일러스트와 여러 인물, 높은 채도의 색감 등을 활용하여 모바일 웹사이트에 맞춰 제작했습니다. 이번 프로젝트를 통해 다양한 활동의 시작점을 찍은 것 같습니다.

✅ 개발

프로젝트의 전 개발 과정을 담당하면서 다양한 기술 스택들을 사용해 보았습니다. 이를 통해 타입 안정성을 높이는 TypeScript, 효과적인 상태 관리를 위한 Redux, CSS와 React 컴포넌트를 함께 관리할 수 있는 styled-components, 실시간 데이터베이스를 제공하는 Firebase 그리고 html2canvas와 FileSaver.js 등과 같은 다양한 라이브러리들을 사용하였습니다. 처음에는 새로운 기술들을 사용하는 것에 대한 부담감이 있었지만, 프로젝트를 진행하면서 이러한 부담이 사라지고 오히려 새로운 기술에 대한 호기심과 열정이 생기게 되었습니다.

다음 계획

✅ 프로젝트

프로젝트의 특성상 사용자는 레드벨벳 팬 및 K-pop 팬으로 한정되어 있으며, 일회성으로 방문하는 유저가 다수입니다. 안정적이고 다양한 유저 수 확보를 위해 상업적으로 성장 가능성이 있는 ‘포토카드 꾸미기’를 웹에서 앱으로 전환하고, 다양한 기능을 추가하여 출시할 예정입니다. 이를 통해 사용자들이 보다 편리하게 서비스를 이용할 수 있도록 개선하고자 합니다.

또한 해당 프로젝트는 디자인이 중요하므로 고용량, 고품질의 이미지가 다수 포함되어 있습니다. 이는 웹 애플리케이션의 성능을 저하시켜 사용자 경험에 영향을 줄 수 있습니다. 이에 따라 Lighthouse의 레포트를 참고하여 이미지의 품질을 최대한 유지하면서도 성능을 최적화할 수 있는 방법을 고민하고 있습니다. 

✅ 디자인
현실적으로는 취업을 하고 싶지만 보다 궁극적인 목표는 제 개성을 살린 느낌을 담은 여러 작품을 탄생시켜 나가는 것입니다. 또한, 다양한 활동을 통해 사람들에게 시각적인 감동을 줄 수 있는 디자이너가 되고 싶습니다.

✅ 개발

한정된 시간에 많은 코드를 작성하는 것은 도전적인 과제입니다. 특히 이번 프로젝트에서는 빠르게 다양한 기능을 개발해야 했기 때문에 코드의 신뢰성과 안전성에 대한 고민이 필요합니다. 프로젝트의 품질을 향상시키기 위해 테스트에 대해 공부하고 테스트 코드를 작성하려고 합니다. 이를 통해 버그를 줄이고 유지보수를 용이하게 할 수 있을 것입니다.

🍒Red flavor Diary (모바일 환경 권장) 바로가기🍒

🔗서비스 피드백 구글폼 링크

'Red flavor Diary' 에 대한 의견, 응원, 피드백 등 아래 구글폼 링크에 자유롭게 남겨주세요 🤗 감사합니다

📍 더 자세한 글이 보고 싶다면 클릭해 주세요!

참고 링크

🔗디스콰이엇 프로덕트 소개: https://disquiet.io/product/red-flavor-diary

🔗Github : GitHub - chaevivin/RedFlavor
🔗 notefolio : dani님의 컬렉션 - 노트폴리오 (notefolio.net)

with. 개발자 @도브