걸그룹 레드벨벳의 앨범 'The Red Summer - 빨간 맛'을 리디자인하여 시각적으로 다양한 즐길거리를 제공합니다.

🔗 링크: www.red-flavor-diary.shop

1. 사용 기술
2. 기획 의도
3. 기능 설명
4. 기능 개선
5. 기타

• 프론트엔드: React.js / TypeScript / Redux / React-Query / styled-components
• Database: Firebase Storage / Firestore Database
• 기타: Fabric.js(Canvas Library) / html2canvas(Screenshots) / FileSaver.js(Saving files)
• 협업: Figma / Notion

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

• Main 페이지에 들어가기 전, 0.5초 간격으로 이미지 3개를 보여주어 다이어리 열쇠가 풀리는 모션을 구현하였습니다.

• 다양한 메뉴를 보여주는 페이지입니다.
• 메뉴 종류에는 '프로필 보기', '포토카드 꾸미기', '마이룸', 'playlist'가 있고 버튼을 클릭하면 해당 페이지로 이동합니다.

• 레드벨벳 멤버의 프로필을 보여주는 페이지입니다.
• 멤버 아이콘을 클릭하면 해당 멤버의 상세 프로필 페이지로 이동합니다.
• 프로필 상세 페이지에서 멤버의 다양한 정보를 알 수 있습니다.

• 레드벨벳 멤버의 이미지를 다양한 도구로 꾸밀 수 있는 페이지입니다.
• 꾸미기 버튼을 클릭하면 하단에 꾸밀 수 있는 패널이 나타납니다. 패널에서 멤버, 배경을 변경하고 스티커, 브러쉬로 이미지 위에 꾸밀 수 있습니다.
  • 멤버: 원하는 멤버의 이미지로 변경할 수 있습니다.
  • 배경: 이미지의 배경을 변경할 수 있습니다.
  • 스티커: 27개의 스티커가 제공됩니다. 스티커는 이동, 크기 조절, 방향 조절, 삭제가 가능합니다.
  • 브러쉬: 10개의 브러쉬가 제공됩니다. 브러쉬는 색, 크기 조절이 가능합니다. 실행 취소, 다시 실행 버튼을 사용할 수 있습니다.
• 예시 버튼을 클릭하면 포토카드 예시 화면을 볼 수 있습니다.
• 초기화 버튼을 클릭하면 꾸몄던 화면이 초기화됩니다.
• 저장 버튼을 클릭하면 꾸민 포토카드를 이미지로 저장할 수 있습니다.

• My Room 페이지에 들어가기 전 로딩 화면입니다.
• 아이콘들이 위아래로 움직이는 재미있는 애니메이션을 추가하였습니다.

• 원하는 캐릭터의 공간을 자유롭게 꾸밀 수 있습니다.
• 캐릭터를 클릭하면 좌측 상단의 하트 게이지가 올라갑니다.
• 말풍선을 클릭하면 말풍선을 변경할 수 있습니다.
• 상태창에 텍스트를 입력하여 자신의 상태를 나타낼 수 있습니다.
• 메뉴를 클릭하여 원하는 멤버의 캐릭터로 변경할 수 있습니다.
  • 캐릭터를 변경하면 하트 게이지가 초기화됩니다.
• (추가) 마이룸에서 어떤 일을 할 수 있는 지 잘 모르겠다는 피드백을 받아들여 도움말을 추가하였습니다.
  • 캐릭터, 말풍선, 상태창, 메뉴에 각각 도움말을 추가하여 사용자 경험을 개선하였습니다.

• 'The Red Summer'에 있는 노래 뿐만 아니라 다양한 노래를 들을 수 있습니다. (저작권 이슈로 노래 플레이 불가능, 버튼은 조작 가능)
• 위, 아래 버튼(▲, ▼)으로 노래를 변경할 수 있습니다.
  • 노래가 변경되면 오른쪽 상단의 트랙 숫자(TrackNum)가 변경됩니다.
• 재생, 멈춤 버튼(↠, ||)으로 노래를 재생하고 멈출 수 있습니다.
  • 노래를 재생하면 상단의 주파수가 움직입니다.
  • 노래를 재생하면 프로그레스바가 이동합니다.
  • 노래를 멈추면 상단의 주파수가 멈춥니다.
  • 노래를 멈추면 프로그레스바가 멈춥니다.

• 문제점: 이미지 양이 많아 이미지 로딩 시간이 긴 문제점이 있었습니다.
• 이미지를 비동기적으로 다운받아 이미지 로드 시간을 약 50% 단축시켜 사용자 경험을 개선하였습니다.

• Intro
• Main
• Profile - MemberButton
• ProfileDetail
• Photocard
  • PhotocardSave
  • PhotocardImg
  • PhotocardExample
  • PhotocardFooter
  • PhotocardPanel
    • PanelButtons
    • MemberPanel
    • FramePanel
    • StickerPanel
    • BrushPanel
      • UndoRedo
      • BrushSize
      • BrushType
    • ErrorPage
• Loading
• MyRoom
  • Character
  • SpeechBubble
  • HeartBar
  • StatusBar
  • MyRoomModal
• PlayList
  • Frequency
  • ProgressBar
  • LikeMusic
  • TrackList - ListButtons
• Back

• 프론트엔드(Front-end): 정채빈
• 디자이너(Designer): 김다은