AI와 함께 아이디어를 구현하는
프론트엔드 개발자 전태현입니다.
아이디어를 사용자가 직접 이용하는 화면으로 구현하는 과정에 흥미를 느낍니다. React·TypeScript를 중심으로 웹과 모바일 서비스를 만들고, 실제 사용과 피드백을 바탕으로 개선합니다.
AI를 개발 과정에 적극적으로 활용하며, 작업에 맞게 활용 방식을 고민합니다. 구현할 방향을 정하고 결과를 확인하며, 필요한 부분을 개선해 나갑니다.
보유 구독 모델과 작업 규모에 맞춘 개인용 AI 하네스를 구성하고 있습니다. 에이전트별 모델 배분과 요구사항 인터뷰를 연결하고, 간단한 작업은 간결하게 진행하도록 지속적으로 보완하고 있습니다.
Activity.
구직자가 채용 공고를 탐색하고 AI가 이력서를 자동 최적화해 외부 채용 사이트까지 자동 지원하는 구직 관리 대시보드를 프론트엔드 단독으로 설계·구현
PICT — 맞춤형 취업 AI Agent 프론트엔드
- 8주간 FE 1인으로 16개 화면 구현 · 33개 PR 병합. AI·SW중심대학 디지털 경진대회 학교 대표 참가 및 57개 대학 중 29위 기록
- Swagger 기반 mock으로 화면 구성 후 기능별 실제 API 연동. 백엔드 요청사항과 API 변경에 맞춰 응답 데이터 매핑·화면 동작 수정
- AI 이력서 수정 제안의 적용·거절 UI와 외부 채용 사이트 세션 연결·자동 지원 진행 상태 표시 구현
- AI가 Figma 디자인을 읽어 구현을 보조하도록 구성. 디자인·구현·디버깅 전반에 AI 활용
AWS 기반 AI 웹서비스 교육 과정을 수료하며 중고차 가격을 예측하는 웹 서비스를 개발
AI 기반 중고차 가격 예측 웹 서비스
- 학습용 공개 데이터셋 확보의 어려움으로 Selenium 기반 엔카 크롤러 제작 및 데이터 수집. 900페이지·중고차 매물 62,000개 수집
- 차량 정보를 입력하고 모델의 예측 가격을 확인할 수 있는 React 프론트엔드 개발 담당
- 짧은 개발 기간에 맞춰 컴포넌트를 빠르게 조합할 수 있는 shadcn/ui 선택
멋쟁이 사자처럼 대학 14기
IT 연합동아리 · 프론트엔드
2026.03 - 활동 중
다양한 전공의 팀원들과 함께 프론트엔드 기초 이론 및 React 학습, 팀 프로젝트 진행
아트민
2026.07팀 프로젝트 (Frontend) · 무박 2일 해커톤 (FE 1인 · BE 3인)
카페·식당처럼 다른 용도로 쓰이는 공간의 유휴시간을 예술인 클래스 공간으로 재활용하는 매칭 앱
- 무박 2일 동안 FE 1인으로 사용자·공간 제공자 화면 9개 구현
- 짧은 개발 기간에 맞춰 빠른 구현과 기존 Figma 디자인의 충실한 재현을 우선. Figma MCP로 디자인을 읽어 AI와 대화하며 프론트엔드 전 과정 구현
- 백엔드에서 전달받은 Swagger 명세를 바탕으로 AI를 활용해 API 연동
- Claude 크롬 확장을 활용해 전체 기능의 정상 동작 확인. 구현부터 브라우저 기능 검증까지 AI 활용
Clican
2026.05아이디어톤 · MVP 구현 (Frontend)
구글 검색 결과의 신뢰도를 AI로 분석해 별점으로 보여주는 크롬 확장 프로그램
- 백엔드와 소통하며 초기 구조 설계 후, AI와 대화하는 바이브 코딩 방식으로 MVP 구현
- 검색 결과 수집·분석 API 연동 및 신뢰도 별점과 분석 근거를 보여주는 핵심 UI 구현
Side Projects.
개인적인 관심과 일상의 불편함에서 출발한 사이드 프로젝트입니다.
보유 구독 모델과 작업 규모에 맞춰 에이전트 역할·모델·진행 방식을 구성한 개인용 AI 개발 하네스
- 공개 하네스 사용 중 간단한 작업에도 많은 토큰과 시간이 소요되는 불편함 경험. 보유 구독 모델을 작업에 맞게 활용하기 위해 개인용 하네스 구성
- 불필요한 작업 확대를 줄이기 위해 작은 작업은 오케스트레이터가 직접 처리, 필요한 경우에만 전문 에이전트로 위임. 하위 에이전트의 재위임 제한
- 프론트엔드 구현은 ChatGPT Plus, 요구사항 정리·백엔드·QA·Figma 분석은 OpenCode Go 모델로 배분. Figma MCP 분석과 읽기 전용 QA를 구현 역할에서 분리
- deep-interview 스킬로 모호한 요구사항과 부족한 정보를 먼저 질문하고, 답변을 바탕으로 작업을 진행하도록 구성
- 실제 사용 과정에서 간단한 작업의 처리 절차가 간결해진 점 체감. 개인 작업 방식에 맞춰 지속 보완 중
드라이브 경로 기록, 방문 지역 사진 등록, SNS 주행 기록 공유가 가능한 드라이브 기록 앱
- 애플 앱스토어 출시 및 자동차 동호회 공유, 동호회 이용자들의 긍정적인 반응 확인
- 출시 후 한 달간 90회 이상 다운로드 · 사용자 47명 · 주행 392회 · 누적 13,418.3km
- 매번 주행 시작 버튼을 눌러야 하는 불편함을 줄이기 위해 사용자 피드백을 반영한 주행 시작 위젯 추가
- GPS 수신 간격으로 100km/h 도달 감지가 늦어지는 문제 확인. 최근 구간의 평균 가속률로 도달 시각을 추정하는 방식 직접 제안 및 AI를 통한 구현
- 실측값과 앱 기록 비교 검증으로 고정 지연 보정 적용 시 약 0.2초 빠른 기록 확인. 보정값 980 → 780ms 조 정 직접 제안 및 반영. 기기·GPS 환경에 따른 잔여 오차 존재
공주대학교 천안캠퍼스 학생 전용 소모임 앱 — 지도 기반으로 소모임을 찾고 만들고 참여할 수 있는 서비스
- 개발 대부분을 담당하고 개발 전반에 AI 활용
- 캠퍼스 구성원만 이용할 수 있도록 반경 2km 위치 인증과 학교 이메일 도메인 인증 적용
- 네이버 지도 API를 활용한 지도·목록 기반 소모임 탐색과 지도 핀 기반 소모임 관리 구현. 참여 신청 및 수락·거절 흐름 연결
개인 데이터를 기반으로 흥미로운 통계를 시각적으로 보여주는 웹 서비스
- SNS에서의 유행과 공유를 목표로 기획. 개인 통계 결과를 깔끔하게 보여주는 공유 카드 디자인에 집중
- 인스타그램 스토리에 편리하게 공유할 수 있도록 카드 공유 흐름 구현. Web Share API 미지원 환경에서는 이미지 다운로드로 대체
- shadcn/ui를 활용해 디자인 진행. 기능 구현·디버깅에 AI 활용
- Vercel을 활용해 서비스 배포 진행
프로젝트를 빠르게 실행하고 개발 시간을 자동으로 기록하는 프로젝트 매니저
- 매번 에디터를 열고 프로젝트를 찾아 여는 불편함을 줄이기 위해 등록한 프로젝트를 VS Code로 바로 실행하는 도구 개발
- Chromium 기반의 리소스 부담을 감수하더라도 웹 기술로 빠르게 데스크톱 앱을 만들 수 있는 Electron 선택
- 별도 타이머 조작 없이 작업 시간이 자연스럽게 기록되도록 자동 기록 구현. lsof로 VS Code 프로세스와 열린 경로를 확인해 해당 프로젝트 실행 중에만 시간 기록
- 카드의 그림자·광택·애니메이션 반복 조정. 개발 중 궁금한 점은 채팅형 LLM에 질문하며 해결
Gatsby 기반으로 제작한 개인 일상·기술 블로그
- 원하는 디자인과 구조를 직접 구성할 수 있는 개인 블로그 제작. Gatsby·GraphQL 기반으로 Markdown 글 작성·관리 환경 구축
- Tech·Daily 전환 버튼으로 기술·일상 블로그를 오가는 구조 구상 및 구현. 선택에 따라 글 목록과 테마 전환, 마지막 선택 상태 저장
- Markdown으로 글 작성 후 GitHub Actions로 빌드·배포하는 흐름 구성. GitHub Pages를 통해 블로그 공개
Other Experience.
- 공주대학교 정보통신공학과 (2021.03 ~ 2024.11)
- 공주대학교 소프트웨어학과 (2025.03 ~ 현재)
- 군 복무 중 여단 인트라넷 D-day 카운터 개발 → 포상휴가 획득
- 군 복무 중 당직 현황판 개발 및 당직 근무자 피드백 기반 개선 경험
- Striking Arts 게임 개발 동아리 활동 / C 언어 강의 (2022.03 ~ 2024.06)
- AWS 기반 AI 웹서비스 교육 과정 수료 (2025.07)
Skill.
Frontend
- React, TypeScript를 기반으로 컴포넌트 단위의 웹 서비스를 구축할 수 있습니다.
- Vite, Tailwind CSS, shadcn/ui 등 프론트엔드 개발 도구를 설정하고 활용할 수 있습니다.
- Zustand를 활용해 클라이언트 상태를 관리하고 화면 간 상태를 공유할 수 있습니다.
- React Native와 Expo를 활용해 모바일 앱 화면과 라우팅을 구현할 수 있습니다.
Backend
- Express, MySQL을 활용해 간단한 API 서버와 데이터베이스를 구축한 경험이 있습니다.
- Supabase를 활용해 인증, 데이터베이스, Storage를 연동한 경험이 있습니다.
DevOps
- Docker, AWS S3·CloudFront를 활용한 배포 환경을 구성한 경험이 있습니다.
- GitHub Actions를 활용해 빌드 및 배포 자동화 파이프라인을 구성할 수 있습니다.
- Vercel과 같은 서버리스 플랫폼을 통해 배포 환경을 구축할 수 있습니다.
Interest
- 개인용 AI 하네스를 구성해 PM·FE·BE·QA 등 역할이 다른 에이전트를 작업에 맞게 활용하고, 각 에이전트의 결과를 검증·조합하는 개발 워크플로에 관심이 있습니다.