Mr. Egg Sushi
Kimpuro Docs

ArtMap

2024.10 ~ 2024.10

고용노동부에서 주관하는 미래내일 일경험 사업의 일환으로 진행된 프로젝트 캠프에 참여하며 ArtMap을 개발하게 되었습니다. 이 캠프는 교육보다는 실제 프로젝트 진행에 초점을 맞추고 있어, 일정 수준 이상의 프론트엔드 개발 경험이 있는 사람들이 모여 협업을 진행했습니다. 덕분에 서로에게 배울 점이 많은 의미 있는 과정이었습니다.

ArtMap은 똑똑한개발자라는 기업에서 제공한 프로젝트로, 해당 기업과 협력하여 개발을 진행했습니다. 본격적인 개발을 시작하기 전에 똑똑한개발자의 프론트엔드 신입 온보딩 과정을 진행하였습니다. 이 과정은 신입 입사자가 회사의 업무를 익히기 위해 수행하는 과제들로 구성되어 있었습니다. 이를 통해 실무에서 사용하는 기술과 최적화 방식을 배우는 기회가 되었습니다.

프로젝트 소개

GitHub Figma

ArtMap이라는 현재 서비스 중인 위치 기반 전시회 추천 모바일 애플리케이션을 웹 버전으로 구현하였습니다. ArtMap은 실시간 전시회 데이터베이스 애플리케이션이자 아트 큐레이션 플랫폼입니다. 작품 및 전시회 선호도, 미술 취향에 대한 메타데이터를 구축하여 작가, 전시관, 관람객 등 세 주체가 모두 만족하는 서비스를 제공합니다.

목적

ArtMap 모바일 애플리케이션의 UI와 기능을 최대한 동일하게 웹에서 구현하는 것

팀 구성

프론트엔드 3명

기술 스택

React, Next.js, TypeScript, Supabase, Prisma, Tailwind CSS, Zustand, Vercel

기여

  • Figma를 기반으로 Tailwind CSS를 활용하여 UI 구현

  • Auth.js 및 Next.js middleware를 사용한 OAuth 소셜 로그인 기능 개발

    login

  • 개발 환경에서 MSW(Mock Service Worker)를 활용하여 이메일 로그인 기능을 Express 서버로 Mocking 처리

  • Zod를 사용한 입력값 유효성 검증 구현

    • 회원 관련 로직 validation 체크 수행 nickname

  • Prisma와 PostgreSQL을 이용한 취향 분석 기능 구현

    • Prisma Client를 사용하여 PostgreSQL DB에서 이미지 불러오기

    • 불러온 데이터를 컴포넌트로 생성하고, 선택한 작품 정보를 React에서 상태 관리 후 취향 분석 DB로 전송

      prisma

  • GitHub 레포지토리, Git Workflow, 커밋 규칙 관리

  • Vercel을 이용한 배포

해결한 문제

  • Figma 에셋의 아이콘을 Next.js 프로젝트 디렉토리에 옮겼으나, 각 아이콘의 경로를 알 수 없어 작업에 어려움이 있었음
    • public 디렉토리에 있는 아이콘들을 fs와 path 모듈을 활용하여 자동으로 컴포넌트를 생성하는 스크립트 제작
import fs from 'fs'
import path from 'path'

import Image from 'next/image'

function getAllFiles(dirPath: string, arrayOfFiles: string[] = []): string[] {
  const files = fs.readdirSync(dirPath)

  files.forEach((file) => {
    const filePath = path.join(dirPath, file)
    if (fs.statSync(filePath).isDirectory()) {
      getAllFiles(filePath, arrayOfFiles)
    } else if (/\.(png|jpe?g|svg|gif)$/.test(file)) {
      arrayOfFiles.push(filePath)
    }
  })

  return arrayOfFiles
}

export default function AllIconsPage() {
  const iconsDirectory = path.join(process.cwd(), 'public/icons')
  const iconFiles = getAllFiles(iconsDirectory).map((file) =>
    file.replace(path.join(process.cwd(), 'public'), ''),
  )

  return (
    <div className="grid w-full grid-cols-4 gap-4 bg-primary_sub p-4">
      {iconFiles.map((file, index) => (
        <div key={index}>
          <Image src={file} alt={path.basename(file)} width={50} height={50} />
          <p>
            {path.dirname(file)}/{path.basename(file)}
          </p>
        </div>
      ))}
    </div>
  )
}

icon 이렇게 생성된 컴포넌트를 통해 Figma에 있는 아이콘의 경로를 바로 알 수 있었고, 팀원들과 멘토분들에게 긍정적인 피드백을 받음

  • 팀의 Git Commit Convention을 정하고 프로젝트를 시작했으나, 오타 등의 이유로 매번 완벽하게 지켜지지 않았음
    • Husky를 사용하여 pre-commit 단계에서 커밋 컨벤션을 검증하고, 이를 통해 일관된 커밋 메시지를 유지
    • 이를 기반으로 버전별 CHANGELOG.md를 자동 생성

성과

웅진싱크빅 대표이사님이 수여해 주시는 우수상 수상

회고

한 달이라는 매우 짧은 기간 동안 해당 기업의 온보딩 프로젝트에 참여하면서 진행하다 보니, 상당히 짧은 기간에 구현하지 못한 기능들이 많아 아쉬움이 많이 남았습니다.

프론트엔드 현업에서 종사하시던 분들과 함께 팀 프로젝트를 진행해보니, 피드백을 받은 부분도 많았고 배워가는 점이 많아 좋은 경험이 되었습니다.

배운 점

  • 실제 프론트엔드 신입 온보딩 프로젝트에 참여하여 현업 업무 프로세스를 학습
  • 개발 작업에서의 패키지 매니저의 적극적인 활용법
  • 주어진 디자인 시스템을 바탕으로 UI를 개발하는 방식에 대해 학습
  • 반응형 디자인에 대해 학습

개선할 점

반응형 UI를 개발하면서 여러 가지 실수를 하며, 평소에 PC 유저를 주로 고려한 나머지 모바일 기기용 반응형 UI에 대해 소홀히 하지 않았나 돌아보게 되었습니다.

빠르게 개발을 진행하다 보니 팀원 모두가 Dev 모드에서만 테스트하고, 빌드 테스트를 해보지 않은 상태로 배포 시작일에 다다랐습니다. 그 결과 배포 단계에서 처음 빌드를 해보고 여러 문제가 한꺼번에 발생하는 상황을 마주하게 되었습니다. 다음 프로젝트에서는 이런 일이 반복되지 않도록 철저한 테스트와 빌드 과정 관리에 신경 쓰겠다고 다짐했습니다.

이 페이지가 도움이 되었나요?