CONTACT

Let's work
together.

함께 성장할 수 있는 팀을 찾고 있습니다. 편하게 연락 주세요!

PROJECT

Project

유어스 프로젝트 화면 미리보기

유어스 (You, Us) - 팀 프로젝트 (4인)

GitHub ↗ Demo ↗
PM Frontend 팀 4인

AI 설문 기반 선물 추천 커머스 플랫폼

Next.jsTypeScriptTailwind CSSZustand
  • OpenAI API 기반 설문 응답 분석 및 추천 기능 구현
  • 인증(Auth) 기반 회원가입 및 로그인 기능 구현
  • 카드 결제 API 연동 및 주문·결제 흐름 구현
  • 선택형 설문 UI를 적용해 사용자 입력 흐름 개선
  • Intro / 인증 / 주문·결제 페이지 구현
  • 사용자 흐름 기반 상태 관리 및 API 연동
  • PM 및 프론트엔드 개발 담당
  • 프로젝트 일정 관리 및 기능 우선순위 조율
  • 데일리 스크럼 진행 및 협업 흐름 관리
  • 주요 사용자 흐름 및 화면 구조 설계

모바일 결제 리다이렉트 환경에서 주문 상태 유지 문제 해결

  • 모바일 결제 시 페이지 이동 과정에서 주문 상태가 초기화되는 문제 발생
  • 결제 요청 전 주문 데이터를 sessionStorage에 저장하도록 구현
  • /checkout/mobile-payment 리다이렉트 페이지에서 결제 성공 여부 확인 후 주문 처리 수행
  • 페이지 이동 상황에서도 결제 상태 및 주문 데이터를 안정적으로 유지하도록 개선
  • 사용자 경험과 서비스 흐름을 함께 고려하며 기능을 설계하는 경험의 중요성을 배웠습니다.
  • 기술 구현뿐 아니라 일정 조율과 협업 흐름 관리 역시 프로젝트 완성도에 큰 영향을 준다는 점을 경험했습니다.
ABOUT
소혜림 프로필 사진

안녕하세요,
프론트엔드 개발자
소혜림입니다.

"빠르게 이해하고, 끝까지 구현합니다."

서비스를 단순히 화면 단위로 구현하기보다, 사용자 흐름과 전체 구조를 함께 이해하며 문제를 해결하는 데 강점이 있습니다.

프로젝트를 진행할 때는 기능 구현에만 머무르지 않고 "왜 이 흐름이 필요한가", "사용자는 어디서 불편함을 느끼는가"를 함께 고민합니다. 실제 프로젝트에서는 OpenAI API, 인증(Auth), 결제 시스템, 지도 API 등을 직접 연동하며 서비스 전반의 흐름을 구현해왔습니다.

또한 팀 프로젝트에서는 PL·PM 역할을 맡아 일정 조율, 기능 우선순위 정리, 협업 흐름 관리까지 경험했습니다. 기술적인 문제뿐 아니라 프로젝트 전체가 안정적으로 완성될 수 있도록 방향을 정리하고 조율하는 역할에 흥미를 느낍니다.

새로운 기술 역시 단순히 학습하는 데 그치지 않고, 직접 구현하고 부딪히며 빠르게 이해하고 적용하는 개발자이고자 합니다.

Tech Experience

Frontend
HTML / CSS
10/10
  • 시맨틱 태그 기반 웹 페이지 구조 설계
  • Flex/Grid를 활용한 반응형 레이아웃 구현
  • 애니메이션 및 인터랙션 UI 구현
  • 접근성을 고려한 마크업 작성
Tailwind CSS
10/10
  • 반응형 UI 및 디자인 시스템 구성
  • 컴포넌트 단위 스타일 설계
  • 커스텀 클래스 및 유틸리티를 활용한 스타일 관리
JavaScript
8/10
  • 비동기 API 통신 및 데이터 처리
  • DOM 이벤트 기반 인터랙션 구현
  • 사용자 흐름 기반 동적 UI 제어
TypeScript
7/10
  • API 응답 타입 및 공통 타입 정의
  • Props 및 상태 타입 안정성 관리
  • 제네릭을 활용한 재사용 가능한 컴포넌트 설계
React
8/10
  • 컴포넌트 기반 UI 구조 설계
  • Custom Hook을 활용한 로직 분리
  • 상태 기반 동적 렌더링 구현
  • 폼 관리 및 사용자 입력 처리
Next.js
8/10
  • App Router 기반 프로젝트 구조 설계
  • CSR/SSR 렌더링 차이를 고려한 페이지 구성
  • 동적 라우팅 및 메타데이터 구성
  • Vercel 배포 및 빌드 이슈 해결
Zustand
7/10
  • 전역 상태 관리 구조 설계
  • 불필요한 렌더링 최소화
React Query
6/10
  • 서버 상태 캐싱 및 비동기 데이터 관리
  • 로딩/에러 상태 처리 및 UX 개선
Tools
Supabase
5/10
  • 인증(Auth) 및 로그인 기능 구현
  • Database 연동 및 CRUD 기능 구현
  • Storage를 활용한 이미지 업로드 구현
Git / GitHub
8/10
  • 브랜치 전략 기반 협업
  • PR 및 코드 리뷰 경험
  • Git Flow 기반 버전 관리
  • 충돌 해결 및 협업 이슈 관리
Figma
7/10
  • 와이어프레임 및 UI 설계
  • 디자인 시스템 및 컴포넌트 구조 설계
  • 기획 내용을 기반으로 직접 UI 구성
Vite
7/10
  • React 프로젝트 환경 구성
  • 환경 변수 및 빌드 설정 관리
Photoshop
7/10
  • 웹 서비스에 필요한 그래픽 리소스 제작 및 편집
  • UI 구성에 활용되는 이미지 보정 및 리사이징
  • 프로젝트 컨셉에 맞는 배너 및 비주얼 제작
Illustrator
8/10
  • 서비스 로고 및 아이콘 제작
  • 벡터 기반 그래픽 작업
  • 프로젝트 브랜딩에 필요한 디자인 요소 제작

교육사항

멋쟁이사자처럼 부트캠프 웹 프론트엔드 엔지니어 과정
2025.08 – 2026.02
  • React, Next.js, TypeScript 기반 프론트엔드 개발 학습
  • 두 번의 팀 프로젝트에서 PL/PM 역할 수행 및 협업 경험
  • API 연동, 상태 관리, 반응형 UI 구현 경험
  • 서비스 기획부터 구현·배포까지 전체 개발 과정 경험
아카데미정글 웹 퍼블리싱 과정
2022.05 – 2022.08
  • HTML/CSS 기반 웹 퍼블리싱 및 반응형 웹 구현 학습
  • 웹 접근성과 시맨틱 마크업 구조 작성 경험
  • UI 구현 및 인터랙션 퍼블리싱 경험

자격사항

컴퓨터그래픽스운용기능사 한국산업인력공단
웹디자인기능사 한국산업인력공단
GTQ 1급 한국생산성본부
GTQi 2급 한국생산성본부
INTRO

소혜림

Portfolio