Clein's Portfolio

목차

1. 프로젝트 소개
   • 정보 구조도
   • 시연 영상
   • 역할
2. 사용 기술
   • 기술적 고민
   • 아쉬웠던 점
3. 트러블 슈팅
   • URI 기반 이미지 공유 기능 관련 414 상태 코드 이슈
   • HTML2Canvas 라이브러리 관련 스타일 충돌 이슈
   • Zustand Selector 관련 이슈
4. 인사이트

프로젝트 소개

응원 참 잘하는 집은 제공되는 부적 템플릿을 통하여 사용자가 원하는 부적을 손쉽게 만들어낸 후 공유까지 해볼 수 있는 커스텀 부적 메이커 서비스입니다.

• 언제, 어디서나 쉽게 발행할 수 있는 디지털 부적
• 자유롭게 원하는 형태 및 문구를 고를 수 있는 부적

을 통해 주변 사람들에게 부담되지 않는 소소한 응원을 전달해 보고자 시작하게 되었습니다.

정보 구조도

시연 영상

역할

랜덤 이름 생성 기능과 부적 생성 횟수 누적 기능 중 노션 API를 활용한 부분을 제외한 거의 대부분의 핵심 로직에 기여했으며, 프로젝트 배포를 전담하였습니다.

(GitHub Insights Contributors 기준 커밋 1위, 코드 추가 2위, 코드 삭제 1위입니다.)

프로젝트 기획 단계에서 구두로만 결정된 MVP 작업 단위를 와이어 프레임으로 시각화하여 제공함으로써 팀원 분들의 서비스 이해도를 높여 실 개발 단계 이전의 의견 조율을 원활하게 이끌었습니다.

(아래 이미지 참조)

전반적인 UI/UX 디자인을 총괄하였으며, 서비스 내에서 사용되는 부적 템플릿 또한 전부 직접 디자인 하였습니다. UI 디자인은 짧은 시간 동안 혼자 시안 제작과 기능 개발을 모두 수행하기는 힘들었기 때문에 서비스의 메인 키 비주얼을 제외한 나머지는 전반적인 UI 디자인 컨셉을 정한 후 공용 디자인 컴포넌트를 먼저 작업하여 사용하는 방식으로 진행하였습니다.

(아래 이미지 참조)

사용 기술

기술적 고민

저희는 프론트엔드 개발자만 5명으로 구성된 팀이었습니다.

DB 필요 기능

1. 편집한 부적 이미지를 타인에게 공유하는 기능
2. 지금까지 생성된 부적 갯수 누적 기능

아쉬웠던 점

트러블 슈팅

URI 기반 이미지 공유 기능 관련 414 상태 코드 이슈

HTML2Canvas 라이브러리 관련 스타일 충돌 이슈

이미 HTML2Canvas 라이브러리를 통해 부적 이미지 출력 기능을 개발한 상태에서, 나중에 구현한 부적 템플릿 결과물을 실제로 출력해보니 부적 이미지가 아래와 같은 형태로 스타일이 올바르게 적용되지 않는 문제가 있었습니다.

관련 이슈를 찾아보니 HTML2Canvas 라이브러리에서 HTML 요소의 위치 값 계산에 사용하는 스타일 중 하나가 TailWindCSS의 기본 Preflight 스타일과 충돌되는 이슈가 있어 아래 CSS를 적용하여 해결하였습니다. 또한 템플릿에 사용했던 스타일 중 라이브러리가 지원하지 않는 스타일도 여럿 발견되어서 정식 출시 전에 조속히 수정할 수 있었습니다.

@layer base {
  img {
    @apply inline-block;
  }
}

Zustand Selector 관련 이슈

Zustand를 사용하여 부적 편집 기능을 개발하던 도중 아래와 같은 형태의 코드에서 Selector 함수에 명시한 상태가 올바르게 반환되지 않는 문제가 있었습니다.

import { create } from 'zustand'
 
const useTemplateStore = create<TemplateStore>((set) => ({})) // 상세한 스토어 코드는 생략하였습니다.
 
export const useTemplate = (): TemplateState =>
  useTemplateStore((store) => ({
    currentId: store.currentId,
    ratio: store.ratio,
    backgroundURL: store.backgroundURL,
    contentsLength: store.contentsLength,
  }))

원인은 Selector 함수 내부에서 기존의 상태가 아닌 새로운 객체를 생성하여 반환할 경우 새로운 상태를 Dispatch 받았을 때 변경된 값을 올바르게 비교하여 적시에 렌더링 시키지 못해 발생하는 문제였습니다. 결국 사용자 이슈였죠. 이후부터 전역 상태를 객체의 형태로 반환하고 싶을 때는 아래와 같은 형태로 작성하게 되었습니다.

export const useTemplate = (): TemplateState => ({
  currentId: useTemplateStore((store) => store.currentId),
  ratio: useTemplateStore((store) => store.ratio),
  backgroundURL: useTemplateStore((store) => store.backgroundURL),
  contentsLength: useTemplateStore((store) => store.contentsLength),
})

인사이트

해당 프로젝트는 테오의 스프린트 18기 진행 중 구성되었으며, 1주일 간의 짧은 기간(기획 5일, 개발 2일)동안 MVP를 만든 후 배포까지 완수하는 목적으로 진행되었습니다.