미리보기

국립 과학관 주관의 "과학 유산 플랫폼" 은 국가가 관리하는 약 58점의 문화유산을 소개하는 웹 서비스의 핵심 관리 도구입니다.

Stack.
Next.js, React, TypeScript, react-query, axios, zustand, zod, react-hook-form, tailwind-css, shadcn/ui

[목표]

새로운 문화 유산을 등록하고 기존 데이터를 수정 및 삭제할 수 있는 웹 서비스 어드민 페이지 개발

[주요 업무]

1. 재사용 가능한 코드 작성

   • shad/cn, tailwind를 활용한 공통 디자인 시스템 구성

   • 확장성 있는 공통 레이아웃 및 컴포넌트 개발

2. 과학 유산 등록 페이지 개발

   • react-hook-form과 zod resolver를 결합한 데이터 검증 시스템 구현

   • react-arborist 라이브러리를 활용한 유산 목록 트리 구조 시각화

3. 사용자 경험 개선

   • Escape Modal 구현으로 페이지 이탈 시 데이터 손실 방지 기능 추가

AI 영상 자막/번역 서비스 스내피(Snappi)는 사용자들이 영상 컨텐츠를 손쉽게 자막화하고 다양한 언어로 번역하여 공유할 수 있도록 지원합니다.
스내피의 초기 기획 단계와 베타 오픈 기간 까지 개발에 참여하였으며, 스내피는 오픈 이후 지속적으로 사용자와 매출이 성장하고 있습니다.
▶ Snappi 웹 사이트 바로가기

Stack.
Next.js, React, TypeScript, react-query, axios, zustand, zod, react-hook-form, tailwind-css, shadcn/ui

[목표]

사용자들이 영상 컨텐츠를 쉽게 자막화하고 다양한 언어로 번역할 수 있는 서비스 개발

[주요 업무]

1. 사용자 마이페이지 및 설정 페이지 개발

   • Nice 본인인증 API 연동으로 실명 인증 및 사용자 식별 정보 조회 기능 구현

   • tanstack table을 활용한 서비스 이용 내역 테이블 및 페이지네이션 구현

2. 고객센터 기능 개발

   • lexical 문서 편집 라이브러리를 활용한 공지사항 편집 기능 개선

   • 문의 작성 및 조회 페이지 구현

3. AI 자막/번역 기능 개선

   • 실시간 진행률 제공 기능 구현

4. 웹 애플리케이션 최적화

   • 반응형 웹 디자인 적용

그래버스는 클라이머를 대상으로 클라이밍에 관련된 챌린지와 주변 암장 정보를 제공하여 보다 클라이밍을 재밌게 즐길 수 있도록 동기부여를 해주는 서비스입니다.

Stack.

Next.js 13, ReactNative, typescript, swr, react-native-webview, react-navigation

[목표]

• 네이티브 기능을 활용하여 내 주변 암장조회, 사진 업로드를 통한 챌린지 인증 기능 등을 구현

• 하이브리드 앱 구현 및 앱스토어 배포

• 추후 클라이머들간의 문제를 푸는 정보를 공유하는 플랫폼으로 확장성을 염두

[주요 업무]

1. 아키텍처 설계 및 구현

   • FSD(Feature Sliced Design) 아키텍처 도입으로 유연하고 확장 가능한 구조 설계

   • React Native Webview를 활용한 하이브리드 앱 개발

2. 위치 기반 서비스 구현

   • 사용자 위치 정보를 활용한 주변 암장 목록 조회 및 지도 표시 기능 개발

3. 챌린지 인증 기능 개발

   • 사진 업로드를 통한 챌린지 인증 시스템 구현

4. 사용자 인증 시스템 구축

   • OAuth 2.0을 활용한 애플, 카카오 등 소셜 로그인 구현

열다컴퍼니는 옷장 정리 및 중고 의류 판매 대행 서비스를 제공합니다. 해당 프로젝트는 기업 연계 프로젝트로 기존 열다의 문제점을 파악하고 개선 된 페이지를 도출하기 위해 진행되었습니다.

▶ Demo Page
▶ Github

Stack.
Next.js, zustand, emotion, axios, react-query, react-hook-form, framer-motion, msw

[목표]

기존 열다의 분산되어 있던 업무 프로세스를 통합하고 구조화하기 위한 사용자 페이지와 어드민 페이지 제작

[주요 업무]

1. 프론트엔드 팀 리드

   • 직군 간 효과적인 커뮤니케이션 주도 및 프론트엔드 팀 일정 관리

   • API 우선순위 설정을 통한 백엔드 팀과의 협업 최적화

   • 디자인 및 기획팀과 긴밀한 협력을 통해 구현 가능성 평가 및 최적의 해결책 도출

2. 기술 구현

   • OAuth 2.0 프로토콜 기반 사용자 인증 시스템 및 카카오 소셜 로그인 구현

   • 고객 후기 페이지, 서비스 완료 폼 등 핵심 사용자 인터페이스 개발

   • 고객 관리 및 후기 관리 기능을 포함한 어드민 대시보드 구축

3. 성능 및 사용자 경험 최적화

   • Framer Motion 라이브러리를 활용한 인터랙티브 UI/UX 구현

   • 반응형 웹 디자인 적용으로 다양한 디바이스 호환성 확보

4. 서비스 플로우 최적화

   • 4개 페이지를 2개 채널로 통합하여 사용자 여정을 50% 간소화, 이탈률 감소에 기여

RMSoft는 기록관리 소프트웨어 개발 및 SI 사업을 주로 수행하는 업체입니다.

• 매주 코드리뷰를 진행하며 더 나은 코드 작성에 대해 고민하였습니다.
• 단위 테스트 및 UI 테스트를 통해 프로젝트의 완성도를 높혔습니다.
• 주도적으로 의견을 제시하며 더 나은 개발 환경을 위해 고민하였습니다.
• 모든 프로젝트에서 서비스 초기 설계부터 디자인 작업 등에 직접 기여하며 웹사이트 제작에 필요한 전체 프로세스를 경험해 볼 수 있었습니다.

• 주로 Nextjs 13, Typescript, Tailwind, Figma, Github 를 활용하여 업무를 진행하였습니다.