이현준

머신 비전 하드웨어(카메라, 렌즈, 조명, 프레임그래버, 소프트웨어 등) 제품 카탈로그를 제공하는 B2B 기업 웹사이트입니다.

고객과 직접 미팅하며 요구사항을 정의하고, 스토리보드를 작성하여 디자이너와 협업했습니다. 디자인을 제외한 전체 개발 과정을 혼자 진행했으며, 데이터베이스 설계부터 프론트엔드/백엔드 개발, AWS 인프라 구축 및 CI/CD 파이프라인까지 end-to-end로 구현했습니다.

Turborepo 기반 모노레포 아키텍처를 적용하여 프론트엔드와 백엔드 간 타입 안정성을 확보하고, 공통 로직을 효율적으로 관리했습니다. 관리자는 제품을 등록/수정/삭제하고, 고객 문의를 관리할 수 있으며, 방문자는 다양한 제품을 탐색하고 문의를 남길 수 있습니다.

이 프로젝트는 처음으로 요구사항 정의부터 배포까지 전 과정을 혼자 담당한 프로젝트로, 실제 고객과의 미팅을 통해 비즈니스 요구사항을 기술로 구현하는 과정을 경험할 수 있었습니다. 디자이너와의 협업을 위해 직접 스토리보드를 작성하며 기획자의 관점에서 프로젝트를 바라보는 시야를 넓힐 수 있었습니다.

NestJS를 사용한 백엔드 개발은 이 프로젝트에서 처음 시도한 부분으로, 의존성 주입(DI), 데코레이터 기반 라우팅, 미들웨어 등 백엔드 아키텍처 패턴을 실제로 적용하며 배울 수 있었습니다. 특히 TypeORM을 통해 엔티티 간 관계 설정, 마이그레이션 관리, 트랜잭션 처리 등 데이터베이스 설계의 실무적인 측면을 경험했습니다.

Turborepo 기반 모노레포 구조를 처음 도입하면서, NestJS 백엔드에서 Swagger 데코레이터로 생성한 OpenAPI 스펙을 자동으로 TypeScript 타입 정의로 변환하여 shared 패키지에 배포하는 시스템을 구축했습니다. 이를 통해 프론트엔드에서 API 응답 타입을 수동으로 작성할 필요 없이 백엔드와 프론트엔드 간 타입 안정성을 자동으로 보장하는 방법을 배웠고, 모노레포 환경에서의 코드 재사용과 타입 공유의 장점을 체감할 수 있었습니다.

Next.js의 SEO 최적화 기능을 활용하여 동적 Sitemap 생성 시스템을 구축했습니다. 백엔드 API에서 실제 제품 데이터를 가져와 모든 제품 페이지의 URL을 자동으로 생성하고, 각 페이지마다 generateMetadata를 통해 Open Graph 메타데이터와 Canonical URL을 동적으로 설정하여 검색 엔진 최적화를 구현했습니다. 이를 통해 B2B 웹사이트에서의 SEO 중요성과Next.js의 메타데이터 API를 활용한 실무적인 SEO 전략을 배울 수 있었습니다

AWS EC2에 직접 인프라를 구축하고 Docker로 컨테이너화하는 과정에서 멀티 스테이지 빌드를 통한 이미지 최적화, 보안을 위한 non-root 사용자 설정 등 프로덕션 환경 구축의 실무적인 고려사항을 배웠습니다. 특히 GitHub Actions로 CI/CD 파이프라인을 직접 구성 DevOps의 중요성과 자동화의 가치를 깊이 이해하게 하며 코드 푸시부터 배포까지 자동화하는 과정을 경험했고, 이를 통해 되었습니다.

이 프로젝트를 통해 단순히 기능을 구현하는 것을 넘어서,비즈니스 요구사항을 기술로 해결하는 전체 프로세스와 실제 운영 환경에서 안정적으로 서비스를 제공하기 위한 아키텍처 설계의 중요성을 배울 수 있었습니다. 특히 프론트엔드 개발자로서 백엔드와 인프라까지 경험하며 개발자로서의 시야를 넓힐 수 있었던 의미 있는 프로젝트였습니다.

댄서와 수강생을 연결해주는 웹 플랫폼으로 유저의 요구를 이해하기 위해 설문조사 결과를 기반으로 기획됐습니다.

강사들이 자신의 클래스를 종합적으로 관리하고 효과적으로 홍보할 수 있도록 지원함으로써, 강사들의 업무 효율성을 높여줍니다.
수강생들은 다양한 클래스와 강사들 중에서 자신의 필요와 취향에 맞는 수업을 자유롭게 선택할 수 있는 기회를 얻게 됩니다.

대부분 처음 사용해 본 기술 스택과 구현해 본 기능들로 구성된 프로젝트였습니다. 이 프로젝트를 통해 SSR(Server-Side Rendering) 환경에 대해 배울 수 있었으며, Next.js (App router)를 적극적으로 공부하고 활용해 볼 기회가 되었습니다. 또한 React-Query와 React-Hook-Form 등 개발의 편의를 돕는 여러 라이브러리도 활용해 볼 수 있었습니다.

그러나 프로젝트를 진행하면서 기획 변경과 기술 스택의 개발 과정에서 여러 차례 변경이 있었습니다. 예를 들어, Emotion에서 Tailwind로, Recoil에서 Zustand로 전환하거나 React-query를 중간에 도입하는 등의 변경 사항이 있었습니다. 이러한 변경으로 인해 마이그레이션이 반복되어 프로젝트 개발에 상당한 시간이 소요되었고, 이는 프로젝트 시작 전 철저한 기획과 기술 스택 선정의 중요성을 깨닫게 해주었습니다.

사용자의 질병 정보와 음식 및 의약품의 성분을 입력 받아, GPT-3.5 Turbo를 기반으로 하여 식품과 의약품의 성분을 분석합니다. 이를 통해 사용자 개개인의 건강 상태에 적합한 섭취 여부를 판단하는 데 도움을 주는 서비스입니다.

사용자가 보유한 질병 및 알레르기 정보와 입력된 원재료명을 바탕으로, GPT 모델을 활용하여 성분 특징과 권장 1일 섭취량 등을 포함한 결과를 제공합니다.

Prompt-er Day Seoul 2023 해커톤에서 200팀이 넘는 참가 팀 중 상위 40팀 안에 들어 예선을 통과하는 성과를 이루었습니다.

React의 라우팅과 CSR(Client-Side Rendering)에 대한 이해를 깊게 할 수 있었고, JavaScript의 비동기 처리와 고차 함수에 대한 지식을 숙지할 수 있었습니다. UI/UX의 중요성에 대해 깊이 이해하게 되었고, 사용자 중심의 서비스 개발에 대한 인식을 높일 수 있었습니다.