미리보기

시각 디자인(명함, ppt 템플릿, 패키지, 캐릭터, 이모티콘 등 작업 진행)

사내 프랜차이즈 브랜딩 디자인 및 사인물, SNS 홍보 컨텐츠 제작

브랜드 디자인 및 웹디자인, 캐릭터 디자인(캐릭터 저작권 등록), 굿즈 디자인(폰 액세서리 및 스티커, 키링, 반지 등), SNS 홍보물 제작, 판매 상세페이지 관리, 상품 포장 및 출고, 재고 관리 등

울산항만공사 SNS 계정관리 및 프로젝트 기획·시행

프론트엔드 개발자

• 3위 수상

• 10일 간의 짧은 시간 동안 기획부터 배포까지 완료

• 우리 동네 길냥이들 올바른 돌봄 문화의 시작, 이냥저냥 서비스 출시

• 카카오 지도 API 연결 및 비즈니스 로직 적용 지도 컴포넌트

  • 현재 위치 표시 애니메이션 제작 및 핀, 클러스터 커스텀 적용

  • 거리 계산 함수

• ToolTip 컴포넌트

• Toast 커스텀 훅 제작

• 캐릭터 아이콘 디자인

개요

• 한국 춘란 산채품 직거래 장터

• Github

• 배포 사이트

스택

Javascript Typescript React.js Next.js TailwindCSS MUI React-query Zustand Nest.js postgreSQL Github AWS EC2 AWS ECR Docker nginx

주요 기능 및 구현 내용

✅ 프론트엔드 개발

• 반응형 UI 적용으로 다양한 기기에서도 일관된 사용자 경험 제공

• 게시판에 필터 및 페이지네이션 기능 적용하여 데이터 탐색 편의성 개선

• Next.js의 동적 sitemap.xml 및 robots.txt 생성 기능을 활용한 SEO 최적화

  • sitemap.xml: 검색 엔진 크롤링 최적화

  • robots.txt: 검색 허용 범위 설정

  • metadata 설정: 페이지별 title, description, Open Graph 데이터 추가

  • 국내 주요 검색 포털 3곳(Naver, Google 등)에 검색 노출 신청 완료

✅ 백엔드 및 서버 인프라

• Nest.js 기반 RESTful API 설계 및 구현

• 초기 Firebase 서버 사용 → Nest.js + PostgreSQL 마이그레이션

  • Firebase 사용 시 페이지네이션 구현 어려움 및 데이터 처리 속도 저하 발생(약 3s)

  • Nest.js + PostgreSQL 도입 후 offset pagination 적용하여 데이터 패칭 속도를 3배 이상 개선 (0.5~0.7s)

• AWS와 Docker를 활용해 프론트엔드, 백엔드, 데이터베이스를 컨테이너 기반으로 배포 및 운영

• 초기 프론트엔드에서 이미지 리사이징 후 Firebase Bucket에 저장
  → 서버에서 이미지 리사이징 후 AWS S3에 업로드하는 방식으로 개선

✅ SEO 및 사용자 분석

• Naver Search Advisor 및 Google Analytics 연동

  • 사용자 유입 경로, 디바이스 유형, 방문 패턴 분석

  • 데이터 기반 UX/UI 개선 진행

개요

• 반려동물의 예방접종, 미용 예약 등 일정을 달력에 기록하고 관리할 수 있는 서비스

• Github

• 배포 사이트

스택

Javascript Typescript React.js Next.js TailwindCSS Recoil Axios React-query Nest.js Github AWS Docker

주요 기능 및 구현 내용

✅ 프로젝트 협업 및 기획

• 디자이너, 프론트엔드 및 백엔드 개발자 협업 프로젝트 (기획 참여)

✅ 프론트엔드 개발

• Kakao API를 활용한 지도 및 위치 검색 기능 구현

  • 카카오 지도 키워드 검색 API에서 받아오는 서버 데이터를 useInfiniteQuery를 활용하여 무한 스크롤 기능 구현

• Compound Components Pattern을 적용한 Input 컴포넌트 개발

  • 회원가입, 반려동물 정보 및 일정 추가·수정 등 다양한 화면에서 통일된 디자인 패턴 유지

  • 컴포넌트의 재사용성을 높이고, 유지보수성을 향상

✅ 백엔드 및 서버 인프라

• Nest.js 기반 RESTful API 설계 및 구현

• AWS 및 Docker를 활용한 프론트엔드 배포

• 도메인 간 쿠키 접근 제한 문제 해결

  • Next.js의 SSR 환경에서 쿠키 값을 읽을 수 없는 undefined 에러 발생

  • Next.js의 rewrite 기능을 활용하여 프록시 서버를 설정, 도메인 간 안전한 통신 및 로그인 인증 기능 개선

개요

• 우리 동네 길고양이의 위치와 정보를 공유하여 올바른 길고양이 돌봄 문화를 만드는 서비스

• Github

• Notion

• 배포 사이트

스택

Javascript Typescript React.js Next.js TailwindCSS Zustand React-query Github

주요 기능 및 구현 내용

✅ 프로젝트 협업 및 기획

• 기획자, 디자이너, 프론트엔드 및 백엔드 개발자 협업 프로젝트

✅ 프론트엔드 개발

• 공통 지도 컴포넌트 구현 (Kakao Map API 활용)

  • kakao-map-sdk 라이브러리를 사용하여 공통 지도 컴포넌트 개발

• 커스텀 위치 아이콘 및 클러스터 기능 추가

  • 길고양이 위치 표시 아이콘을 선택 유무에 따라 동적으로 스타일 변경

  • 현재 위치 아이콘에 TailwindCSS를 활용한 애니메이션 적용

  • 두 위치 사이의 거리 계산 함수 구현

✅ 상태 관리 및 UI 개선

• Zustand 도입 및 글로벌 상태 관리

  • React Hook과 유사한 선언 방식 및 간결한 store 생성 방식으로 채택

  • 사용 빈도가 높은 커스텀 메소드를 store에 등록하여 관리 효율성 향상

• Toast 커스텀 훅 개발 및 상태 관리 적용

  • 정보 알림, 확인, 에러 등 다양한 메시지를 동적으로 관리

  • Zustand를 활용하여 Toast 메시지를 글로벌 상태에서 관리

  • setTimeout을 이용하여 일정 시간 후 자동으로 메시지 사라지도록 구현

  • UI 상태에 따라 아이콘, 색상, 메시지 스타일을 동적으로 변경

  const { addToast } = useToast();
  addToast.check('새로운 소식을 등록했어요!');

✅ 소셜 로그인 및 인증 처리 개선

• Social Login + Middleware 적용

  • Pet Diary 프로젝트와 동일한 방식으로 SSR 환경에서의 토큰 전달 문제 해결

  • 로그인 후 토큰 값을 서버에서 직접 설정하고, 미들웨어에서 페이지 리디렉션을 수행하도록 구현