미리보기
기본 정보
저는 낯선 기술에도 주저하지 않고 도전하며, 매 순간 성장의 기회를 찾아내는 신입 프론트엔드 개발자입니다. 풀스택 개발 경험을 통해 프론트엔드는 물론 백엔드 시스템에 대한 이해를 쌓았고, 이를 통해 사용자와 서버 간의 효율적인 상호작용을 설계할 수 있습니다. 현재는 Next.js의 서버 컴포넌트와 API 라우트에 관심을 가지고 공부 중입니다. 저는 자신의 생각과 아이디어를 명확하게 전달하는 소통의 힘을 믿습니다. 질문하고 소통하는 것을 두려워하지 않으며, 긍정적인 에너지로 팀과 함께 성장해 나가겠습니다.
기술 스택
JavaScript, React, TailwindCSS, Python, MySQL, Git, Next.js, TypeScript, REST API
프로젝트
Daily24 - 무인 매장 관리 시스템
(주)신세계아이앤씨
2025.02. ~ 2025.04.
처음 기획부터 테이블 설계, 화면 구성, 배포까지 전 과정을 담당하면서 시스템 전체 흐름을 이해하는 것을 목표로 한 프로젝트입니다.
[프론트엔드 GitHub](https://github.com/hyeyeon9/frontend)
2인 팀 | 풀스택 50% 기여
역할 : 재고/폐기/발주/상품 관리 페이지, 실시간 알림, 챗봇
사용 기술 :
Frontend :
React
Tailwind CSS
Zustand
RESTful API
Backend :
Spring Boot
FastAPI
MySQL
AWS
Workflow Tools :
Git
GitHub
Notion
Slack
수행업무
장바구니 연관 분석 데이터를 히트맵+라인차트로 데이터 시각화 (Nivo 활용)
React Table에서 렌더링 최적화를 위해 useMemo 적용 -> 무한 렌더링/플리커링 현상 제거
재고 리스트 무한스크롤 구현 중 필터와 충돌 발생 -> 컴포넌트 분리 구조의 필요성 체감
유통기한 임박 재고 -> 발주/할인 연동 흐름 구성 ( 실제 운영 시나리오 고려 )
SSE 기반 알림 시스템 구현
단방향 전송이 필요한 상황에서 웹소켓보다 간단하고 안정적인 SSE 선택
FastAPI 기반 LangChain 챗봇 서버 직접 구축
챗봇 위젯 UI 구현 + 프롬프트 튜닝으로 도메인 특화 응답 흐름 구성
[배포] 프론트: S3 + CloudFront 정적 호스팅 | 챗봇 서버: Elastic Beanstalk로 배포
[협업] 일일 스크럼시 진행 사항과 기능의 목적을 공유해, 피드백 기반으로 개선 반복
[UI] Tailwind css를 통해 점주를 위한 태블릿 반응형 UI 구성
[UX] 데이터 -> 인사이트 -> 행동 흐름을 고려한 사용자 중심 화면 구성에 집중
배운점
기능 중심보다 실제 사용 흐름을 고려한 화면 설계 및 API 연동
문제 해결 과정에서 상태 관리, 성능 고려, 컴포넌트 분리 설계에 대한 고민을 직접 경험
협업 과정에서의 활발한 소통, 공유의 중요성 체감
새로운 기술(SSE, LangChain 등)을 비판적으로 선택하고 구현해보며 실행력 향상
Groupie - 스터디 모집 플랫폼
개인
2025.05. ~ 진행 중
Next.js와 Typescript의 구조적인 타입 시스템과 App Router 기반 라우팅 흐름을 실제 프로젝트에 적용하며, 사용자가 주제별 스터디를 등록하고 조건에 맞는 스터디를 탐색하고 신청할 수 있는 플랫폼을 구현 중입니다.
[GitHub](https://github.com/hyeyeon9/Groupie)
개인 | 100% 기여
사용 기술 :
Frontend :
Next.js
TypeScript
Tailwind CSS
Prisma
진행 업무
Next.js App Router 기반 SPA 구현
Prisma ORM을 활용한 CRUD 전반 구현
-> 스터디 등록/수정/삭제를 직접 구현하며 Next.js 풀스택 구조에 대한 이해도 향상
Prisma 모델 타입을 활용한 API 응답 구조 설계
-> include 옵션과 함께 prisma의 타입 시스템을 활용해 프론트-백엔드 간 타입 일관성 유지
조건 기반 필터링 + 검색 기능 (카테고리, 키워드)
Intersection Observer를 활용한 무한스크롤 구현
-> 상태 충돌 이슈 해결을 위해 컴포넌트 분리 구조 적용
react-calendar
기반 스터디 일정 시각화 UI 구성Tailwind CSS로 반응형 UI 구성 (모바일 대응)
SogeumStory
개인
2024.08. ~ 2024.08.
AI와 협업해 창의적인 콘텐츠를 제작해 보자는 목표로 시작한 단기 토이 프로젝트입니다.
Gemini API를 활용해 AI와 어떻게 상호작용을 해야 원하는 답을 얻을 수 있는지 실험해 보며 만들었습니다.
[GitHub](https://github.com/hyeyeon9/SogeumStory)
사용 기술
Frontend :
React
React Router
Materialize CSS
Backend :
Flask
Flask-CORS
AI 연동 :
Google Generative AI
(Gemini-Pro, Gemini-1.5 Flash)
수행 업무
[FE] React + React Router로 SPA 구현, Materialize CSS로 빠른 UI 구축
[FE/BE] 사용자 입력(텍스트/이미지)를 백엔드(Flask)로 전송 -> 응답 처리 흐름
[AI 연동] Gemini-Pro / Gemini 1.5-Flash API 연동 -> 프롬프트 튜닝을 통해 결과 품질 비교
[UX] 이야기 생성 후 '이어쓰기' 기능 구현 -> AI의 맥락 기억 유도해보기
배운점
AI를 ‘도구’로 적극 활용하기 위한 실험과 학습을 주도적으로 진행
백엔드-프론트 간 비동기 데이터 흐름 이해
SundayGame - 자바스크립트로 구현한 미니게임
개인
2023.11. ~ 2023.11.
바닐라 JavaScript의 기초를 탄탄히 다지기 위해 시작한 토이 프로젝트로, 모달/타이머/반응형 UI를 구현하며 DOM제어와 사용자 반응 처리를 학습했습니다.
이 과정을 통해 React의 컴포넌트 기반 구조의 필요성을 체감했고, 어떻게 작동하는지 명확히 이해할 수 있었습니다.
[GitHub](https://github.com/hyeyeon9/sunday_game)
수행 업무
[JS] 순수 JavaScript로 DOM 조작, 이벤트 흐름, 타이머, 모달 등 게임 흐름 전반 설계
[UI] 공통 구조(모달, 점수, 리셋)를 반복 구현 -> 컴포넌트화 필요성 체감
[UX] 난이도 조절, 실시간 점수/시간 표시, 자동 모달 닫힘 등 사용자 흐름을 고려한 설계
배운점
React 도입 시점에서 구조 분리와 재사용성의 이점을 명확히 이해하는 계기가 됨
포트폴리오
교육
부경대학교
대학교(학사) | 컴퓨터공학과
2020.03. ~ 2025.03. | 졸업
(주)신세계아이앤씨
사설 교육 | AI플랫폼을 활용한 (리테일)서비스 개발 과정
2024.10. ~ 2025.04. | 수료
자격증
정보처리기사
합격 | 한국산업인력공단
2023.09.
SQL개발자(SQLD자격)
합격 | 한국데이터베이스진흥센터
2023.10.
자기소개
"도전과 협업으로 다져온 기본기"
저는 다양한 기술 스택에 도전하는 것을 즐기며, 빠르게 변화하는 프론트엔드 트렌드를 따라잡기 위해 새로운 기술 학습을 게을리하지 않습니다.
백엔드(Python, Spring), 프론트엔드(React, Next.js), 딥러닝까지 다양한 기술에 도전하면서 시스템 전반에 대한 이해를 넓혔습니다. React Hook을 학습하며 클래스 컴포넌트에서 함수 컴포넌트로 리팩토링하는 과정에서 코드 가독성과 재사용성이 크게 향상되는 것을 경험할 수 있었습니다.
혼자서 흐지부지하는 단점을 해결하기 위해, 구글미트를 통한 12시간 오픈 스터디를 기획하고 현재까지 운영하고 있습니다. 아침 10시부터 밤 10시까지 취준생들과 함께하는 가상 스터디 공간을 만들어, 꾸준한 학습 분위기를 조성하고 있습니다. 적극적인 소통으로 서로의 동기부여와 책임감을 높이며 함께 성장하는 공간으로 발전시키고 있습니다.
함께하는 환경이 서로의 책임감을 키워주었고, 약속한 목표를 끝까지 완주하는 원동력이 되었습니다. 이런 경험으로 개발자에게 필요한 커뮤니케이션 리더십을 기를 수 있었습니다. 또한 꾸준한 학습과 도전 정신으로 다져온 기본기는, 앞으로의 성장에도 큰 밑거름이 될 것이라 믿습니다.
"어떤 상황에서도 문제를 풀어내는 실행력"
프로젝트 중 팀원 이탈 위기에서 핵심 기능 중심의 우선순위를 재설정했습니다. 스프린트 단위로 개발을 진행하고 노션으로 진행 상황을 시각화하여 효율적으로 프로젝트를 관리했습니다. 위기 상황에 대비해 이탈한 팀원들의 진행 상황과 코드를 상세히 문서화해둔 덕분에, 이후 작업을 원활하게 복구하고 이어받을 수 있었습니다.
이 경험을 통해 팀 소통의 중요성을 깨닫고, 이후 프로젝트에서는 적극적으로 질문하고 의견을 나누며 문제를 해결해 나가는 자세를 기를 수 있었습니다. 아침 일일 스크럼에서 서로의 컨디션과 진행 상황을 투명하게 공유하며, 혼자 고민하지 않고 함께 해결해 나가는 분위기를 만들어 나갔습니다.
결국 작은 목표들을 차근차근 달성하며 프로젝트를 성공적으로 완료했고, 어려운 상황에서도 끝까지 해내는 실행력을 기를 수 있었습니다.
"사용자의 경험을 우선하는 설계"
‘Daily24’ 프로젝트에서는 무인 매장 점주의 실제 니즈를 파악하기 위해 팀장님의 부모님의 15년 편의점 운영 경험을 바탕으로 사용자 관점의 문제를 정의했습니다. 커뮤니티와 SNS 사례도 참고해 반복되는 불편에 공감하며 기능 방향을 구체화했습니다.
유통기한이 짧은 상품에 대해 판매 데이터를 기반으로 발주량을 자동 추천하고, ‘N일 후 소진’이라는 직관적인 정보를 함께 제공하여 점주의 의사결정을 도왔습니다. 또한 태블릿 사용 환경을 고려한 반응형 UI로 설계하여 실사용성을 높였습니다.
사용자 테스트를 직접 진행해 UI/UX 개선점을 도출했고, 발표에서 재고 기능 중 “가장 흥미로운 기능”이라는 피드백을 받았습니다. 이 경험을 통해 사용자 중심의 문제 해결 능력이 제 강점임을 확인할 수 있었습니다.