Front-End Developer
2020. 12. ~ 2022. 03. 1년 4개월
중외정보기술 S&P 사업팀 근무
2022. 03. ~ 2023. 08. 1년 6개월
아이오비 플랫폼 개발팀 근무
2023. 11. ~ 2024. 02. 4개월
오케스트로 Platform Dev3팀 근무
2024. 04. ~ 2년 7개월
크리에이블 개발팀 근무중
2017. 11.
대학생 디지털 솔루션 챌린지(K-Hackathon) 워크숍 우수상 수상
2020. 06.
LINC+ 진로 설계 경진대회 장려상 수상
2020. 10.
LINC+ 현장실습 수기 공모전 최우수상 수상
2020. 11.
교내 창업 아이디어 경진대회 우수상 수상
2016. 02.
효원고등학교 졸업
2021. 02.
오산대학교 스마트IT과 졸업
Languages
TS
TypeScript
자바스크립트에 "이 값은 숫자, 이 값은 이런 모양의 객체"라는 타입을 미리 적어, 코드를 실행하기 전에 실수를 잡는 언어입니다. ClaudeBoard에서는 서버와 화면이 주고받는 메시지(세션 상태 5종, 요청·응답 종류 등)를 하나의 공용 타입 파일로 정의해 양쪽이 같은 규칙을 쓰게 했고, 한쪽만 고쳐서 생기는 불일치를 빌드 단계에서 막았습니다. .vue 파일까지 vue-tsc로 타입 검사했습니다.
JS
JavaScript
브라우저에서 실행되는 로직을 직접 작성했습니다. TaxKit은 업로드한 엑셀을 서버로 보내지 않고 브라우저 안에서 읽고 계산해 통장 거래와 세금계산서를 대조하고, 이 포트폴리오는 별도 라이브러리 없이 IntersectionObserver(화면에 보이는 구간 감지)와 ResizeObserver(크기 변화 감지) 같은 브라우저 내장 기능으로 스크롤 연동 메뉴와 줄 번호를 구현했습니다.
HT
HTML5
div만 쓰지 않고 nav, main, section, article 같은 의미 있는 태그로 문서 구조를 잡아, 스크린 리더(화면을 음성으로 읽어 주는 프로그램)와 검색 엔진이 구조를 이해하게 했습니다. 펼침 버튼에는 aria-expanded, 선택 버튼에는 aria-pressed를 달아 상태를 음성으로도 알리고, 마우스 없이 Tab 키만으로 모든 기능을 쓸 수 있게 했습니다.
CS
CSS3
화면 폭에 따라 배치가 바뀌는 반응형 레이아웃을 Grid, Flexbox, 미디어 쿼리로 만들었습니다. 색과 간격은 CSS 변수로 한곳에 모아 테마를 한 번에 바꿀 수 있게 했고, 이 포트폴리오의 타이핑·글자 등장 효과는 자바스크립트 없이 CSS 애니메이션만으로 구현했습니다. 움직임을 줄여 달라는 사용자 설정(prefers-reduced-motion)이 켜져 있으면 애니메이션을 끕니다.
Frameworks & Libraries
VU
Vue.js
Composition API(<script setup>)로 화면 로직을 composable이라는 함수 단위로 나눠 작성했습니다. 예를 들어 TaxKit은 엑셀 읽기, 거래 대사, 위험 거래 탐지, 독촉 문구 생성을 각각 별도 파일로 분리해 화면 컴포넌트는 보여 주는 일만 하고, 계산 로직은 따로 테스트할 수 있게 했습니다.
NX
Nuxt.js
Vue 기반 프레임워크로, 폴더 구조가 곧 페이지 주소가 됩니다. 서버 렌더링(서버가 완성된 HTML을 미리 만들어 보내는 방식)을 쓴 MoaCook과 이 포트폴리오는 첫 화면이 빠르고 검색 엔진도 내용을 읽을 수 있으며, 앱으로 포장하거나 정적 배포하는 ClaudeBoard, TaxKit, Camping&Joy는 브라우저에서만 도는 SPA로 구성했습니다. MoaCook에서는 Nuxt 서버 API로 레시피 등록, 검색, 이미지 업로드를 직접 만들었습니다.
PI
Pinia
여러 화면이 함께 쓰는 데이터를 한곳(스토어)에서 관리하는 Vue의 상태 관리 도구입니다. Camping&Joy에서 캠핑 일정(camp)과 장비 목록(gear) 스토어를 나눠 모든 화면이 같은 데이터를 보게 했고, persistedstate 플러그인으로 새로고침하거나 앱을 껐다 켜도 입력한 내용이 남도록 했습니다.
TW
Tailwind CSS
HTML 클래스에 flex, p-4, text-sm 같은 짧은 유틸리티 클래스를 조합해 스타일을 지정하는 방식입니다. CSS 파일을 오가지 않고 마크업 안에서 간격, 색, 반응형(md: 등)을 바로 정할 수 있어, 반복되는 화면을 빠르게 구현했습니다.
SC
SCSS
CSS에 중첩, 변수, 믹스인(재사용하는 스타일 묶음)을 더한 문법입니다. 컴포넌트마다 scoped로 스타일 범위를 가둬 다른 화면에 영향이 번지지 않게 했고, TaxKit, ClaudeBoard, Camping&Joy에서 공통 스타일을 믹스인으로 묶어 재사용했습니다.
SB
Supabase
서버를 직접 만들지 않고 Supabase(PostgreSQL 데이터베이스와 파일 저장소)를 백엔드로 썼습니다. Camping&Joy는 DB 구조 변경 이력을 남기는 마이그레이션 SQL 3개와 행 단위 접근 규칙(RLS)을 작성해 공유 캠핑 일정을 저장했고, MoaCook은 서버 API에서 서비스 키로 접속해 레시피 데이터와 이미지(저장소 버킷)를 관리했습니다.
CP
Capacitor
웹으로 만든 서비스를 거의 그대로 Android·iOS 앱으로 포장하는 도구입니다. Camping&Joy는 인터넷이 약한 캠핑장에서도 열리도록 정적 파일을 앱 안에 넣고, 파일 저장·공유 플러그인으로 결과 이미지를 기기에 저장하고 공유하게 했습니다. MoaCook은 Android APK와 iOS PWA(홈 화면에 추가해 쓰는 웹앱)로 제공합니다.
EC
ECharts
데이터를 막대, 선, 원형 같은 차트로 그려 주는 시각화 라이브러리입니다. 숫자만 나열하면 비교하기 어려운 데이터를 차트와 대시보드로 보여 줘서, 변화와 이상 구간을 한눈에 파악하게 했습니다.
Tools
GH
GitHub
Git으로 변경 이력을 남기고 GitHub으로 협업했습니다. 이 포트폴리오처럼 dev 브랜치에서 작업한 뒤 검증하고 master에 병합하는 브랜치 전략으로 운영해, 작업 중인 코드가 운영 코드를 건드리지 않게 했습니다. 커밋 메시지에는 무엇을 왜 바꿨는지 한국어로 적었습니다.
FG
Figma
디자이너가 전달한 Figma 시안에서 간격, 색, 글자 크기, 컴포넌트 구조를 직접 확인해 시안과 같은 화면을 구현했습니다.
AI
Claude Code (LLM)
Claude Code(터미널에서 쓰는 AI 코딩 도구)를 개발 전반에 활용했습니다. 프로젝트마다 CLAUDE.md에 코딩·언어 규칙을 적어 AI가 일관되게 작업하게 했고, oh-my-claudecode, ponytail, frontend-design 같은 스킬과 플러그인을 상황에 맞게 골라 썼습니다. 또 AI가 브라우저의 깨진 레이아웃을 직접 측정하도록 MCP(AI에 외부 도구를 연결하는 표준 규격) 서버 Inspector-Agent를 만들었습니다.
VC
Vercel
GitHub에 코드를 올리면 자동으로 빌드하고 배포해 주는 호스팅 서비스입니다. TaxKit, Camping&Joy, MoaCook을 Vercel로 배포해 서비스 주소를 운영했고, MoaCook은 서버 함수 지역을 서울(icn1)로 지정해 DB와 사용자 모두에게 가깝게 했습니다. 프리뷰 배포와 운영 배포를 나눠 관리했습니다.
VI
Vite
빠른 개발 서버이자 번들러(여러 파일을 하나로 묶는 도구)입니다. Inspector-Agent에서는 Vite 플러그인을 직접 만들어, 빌드할 때 .vue 파일을 분석(@vue/compiler-sfc, @babel/parser)하고 각 화면 요소에 data-ia-src라는 속성으로 "몇 번째 파일 몇 번째 줄" 위치를 심었습니다. 그래서 브라우저에서 깨진 요소를 찾으면 소스 위치로 바로 연결됩니다.
