Problem: 디자이너 부재 상황에서 프론트엔드 품질 관리 체계와 디자인 시스템이 없어, 화면마다 스타일/컴포넌트가 제각각이었고 협업 기준이 불명확했습니다.
Action: 프론트엔드 리드로서 Storybook 기반 문서화를 도입하고, 디자인 토큰·컴포넌트 시스템을 정립해 팀 간 공통 기준을 마련했습니다. 또한 CTO의 '테마 중심 운영' 방향성을 실무 수준으로 구현했습니다. 기획–백엔드 사이 요구사항을 구체화·정리하여 변경/누락 이슈를 빠르게 식별·조율했습니다.
Result: 협업 효율이 크게 향상되어 변경 대응 속도 단축과 코드 재사용률 증가를 달성했고, 초기 단계부터 안정적인 데모/병렬 개발이 가능해져 서비스 출시 준비가 원활해졌습니다.
MUI 상용 테마를 조직 표준으로 재설계했습니다. 테마 토큰·컴포넌트 래핑·확장 패턴을 Storybook 가이드로 체계화했습니다. Mock API(MSW)로 초기 프론트–백엔드 연동 비용을 절감했습니다. 외부 라이브러리(windy CDN 등)를 SPA 환경에 안정적으로 통합했습니다. Storybook 토큰화 기반으로 Figma 전환 가능성을 열어 디자인–개발 파이프라인을 현대화했습니다.
Problem: 디자이너 부재 상황에서 프론트엔드 품질 관리 체계와 디자인 시스템이 없어, 화면마다 스타일/컴포넌트가 제각각이었고 협업 기준이 불명확했습니다.
Action: 프론트엔드 리드로서 Storybook 기반 문서화를 도입하고, 디자인 토큰·컴포넌트 시스템을 정립해 팀 간 공통 기준을 마련했습니다. 또한 CTO의 '테마 중심 운영' 방향성을 실무 수준으로 구현했습니다. 기획–백엔드 사이 요구사항을 구체화·정리하여 변경/누락 이슈를 빠르게 식별·조율했습니다.
Result: 협업 효율이 크게 향상되어 변경 대응 속도 단축과 코드 재사용률 증가를 달성했고, 초기 단계부터 안정적인 데모/병렬 개발이 가능해져 서비스 출시 준비가 원활해졌습니다.
MUI 상용 테마를 조직 표준으로 재설계했습니다. 테마 토큰·컴포넌트 래핑·확장 패턴을 Storybook 가이드로 체계화했습니다. Mock API(MSW)로 초기 프론트–백엔드 연동 비용을 절감했습니다. 외부 라이브러리(windy CDN 등)를 SPA 환경에 안정적으로 통합했습니다. Storybook 토큰화 기반으로 Figma 전환 가능성을 열어 디자인–개발 파이프라인을 현대화했습니다.
Problem: 상점 페이지와 보상형 이벤트 콘텐츠가 운영팀 주도 업데이트에 의존해 변경 속도가 느리고, CS/통계 확인도 비효율적이었습니다.
Action: 백엔드 개발자와 협업해 상점 페이지를 리뉴얼하여 이벤트 기간 자동 전환이 가능하도록 만들었습니다. 보상형 이벤트 콘텐츠를 웹뷰 기반으로 구현해 배포 효율을 높였습니다. 관리자 페이지를 전담 리뉴얼하여 CS 처리와 지표 확인을 빠르게 할 수 있도록 했습니다.
Result: 구매/포인트 사용 흐름이 단순화되어 사용자 경험이 개선되었고, 운영팀의 CS 대응 속도와 지표 확인 효율이 크게 향상되었습니다. 또한 사내 도구로도 활용 범위가 확장되었으며, 투자처나 잠재 고객과의 비즈니스 미팅에서도 시연·설득 자료로 사용되었습니다.
서비스 환경에서 프론트엔드 유지보수·신규 개발·운영을 지원했습니다. 특히 관리자 페이지를 전담하며 pnpm·NextAuth·Tailwind+PreCSS 스택을 적용해 이후 실서비스에서도 확장성과 유지보수가 용이한 구조로 구현했습니다.
Problem: 상점 페이지와 보상형 이벤트 콘텐츠가 운영팀 주도 업데이트에 의존해 변경 속도가 느리고, CS/통계 확인도 비효율적이었습니다.
Action: 백엔드 개발자와 협업해 상점 페이지를 리뉴얼하여 이벤트 기간 자동 전환이 가능하도록 만들었습니다. 보상형 이벤트 콘텐츠를 웹뷰 기반으로 구현해 배포 효율을 높였습니다. 관리자 페이지를 전담 리뉴얼하여 CS 처리와 지표 확인을 빠르게 할 수 있도록 했습니다.
Result: 구매/포인트 사용 흐름이 단순화되어 사용자 경험이 개선되었고, 운영팀의 CS 대응 속도와 지표 확인 효율이 크게 향상되었습니다. 또한 사내 도구로도 활용 범위가 확장되었으며, 투자처나 잠재 고객과의 비즈니스 미팅에서도 시연·설득 자료로 사용되었습니다.
서비스 환경에서 프론트엔드 유지보수·신규 개발·운영을 지원했습니다. 특히 관리자 페이지를 전담하며 pnpm·NextAuth·Tailwind+PreCSS 스택을 적용해 이후 실서비스에서도 확장성과 유지보수가 용이한 구조로 구현했습니다.
Problem: Java/JSP/jQuery 기반 레거시 환경에서 신규 기능 개발 속도가 느리고, 기획–백엔드–프론트 간 요구사항 전달 오류가 잦았습니다.
Action: 프론트엔드 리드로서 jQuery의 prototype을 이용해 모듈화를 진행했습니다. 이후 글로벌 서비스 단계에서 Next.js 기반으로 아키텍처를 전환했습니다. API 명세·UI 컴포넌트·협업 컨벤션을 표준화했습니다. 주니어 2명과 인턴 1명의 온보딩/코칭을 담당하며 협업 문화를 정착시켰습니다.
Result: 신규 기능 개발 속도가 단축되었고, WMS/OMS 화면 리뉴얼로 운영팀의 효율성이 개선되었습니다. 팀 간 소통 비용이 줄었고 코드 재사용성이 향상되었습니다.
기술적으로는 react-query·axios·emotion 등을 활용해 상태/데이터 관리 구조를 정비했습니다. ESLint/Prettier 기반 협업 규칙을 도입했습니다. 배포는 Express/EC2+pm2+deploy.sh 파이프라인으로 안정화했습니다.
Problem: Java/JSP/jQuery 기반 레거시 환경에서 신규 기능 개발 속도가 느리고, 기획–백엔드–프론트 간 요구사항 전달 오류가 잦았습니다.
Action: 프론트엔드 리드로서 jQuery의 prototype을 이용해 모듈화를 진행했습니다. 이후 글로벌 서비스 단계에서 Next.js 기반으로 아키텍처를 전환했습니다. API 명세·UI 컴포넌트·협업 컨벤션을 표준화했습니다. 주니어 2명과 인턴 1명의 온보딩/코칭을 담당하며 협업 문화를 정착시켰습니다.
Result: 신규 기능 개발 속도가 단축되었고, WMS/OMS 화면 리뉴얼로 운영팀의 효율성이 개선되었습니다. 팀 간 소통 비용이 줄었고 코드 재사용성이 향상되었습니다.
기술적으로는 react-query·axios·emotion 등을 활용해 상태/데이터 관리 구조를 정비했습니다. ESLint/Prettier 기반 협업 규칙을 도입했습니다. 배포는 Express/EC2+pm2+deploy.sh 파이프라인으로 안정화했습니다.
Problem: 크라우드소싱 기반의 다양한 데이터 수집/라벨링 프로젝트에서 클라이언트별 요구사항이 달라 요구사항이 자주 불명확했습니다.
Action: 개발자 1명과 매니저 1명으로 구성된 작은 스쿼드에서 개발을 전담하며 화면·API 스펙을 구체화해 팀이 같은 기준을 갖도록 지원했습니다. 참여자가 모바일/웹에서 데이터를 제출하고 라벨링할 수 있는 작업 화면을 구축하는 데 협력했습니다. 최종 결과물의 데이터 형식에 대해서도 클라이언트와 협의를 진행했습니다.
Result: 다양한 클라이언트들이 요구를 충족할 수 있었으며, 특히 KAIST 국어 빅데이터 프로젝트에서는 작업 효율과 협업이 가능한 페이지를 만들어 재수주로 이어졌습니다.
Java·JSP·jQuery 기반 환경에서 텍스트·음성·이미지 등 다양한 데이터 수집 프로젝트를 경험하며 기본기를 쌓았습니다. 또한 Canvas API로 공용 어노테이션 화면을 구현했습니다. Jira·Jenkins 협업/배포 파이프라인을 운영했습니다. Python 스크립트로 데이터 가공·결과 추출도 지원했습니다.
Problem: 크라우드소싱 기반의 다양한 데이터 수집/라벨링 프로젝트에서 클라이언트별 요구사항이 달라 요구사항이 자주 불명확했습니다.
Action: 개발자 1명과 매니저 1명으로 구성된 작은 스쿼드에서 개발을 전담하며 화면·API 스펙을 구체화해 팀이 같은 기준을 갖도록 지원했습니다. 참여자가 모바일/웹에서 데이터를 제출하고 라벨링할 수 있는 작업 화면을 구축하는 데 협력했습니다. 최종 결과물의 데이터 형식에 대해서도 클라이언트와 협의를 진행했습니다.
Result: 다양한 클라이언트들이 요구를 충족할 수 있었으며, 특히 KAIST 국어 빅데이터 프로젝트에서는 작업 효율과 협업이 가능한 페이지를 만들어 재수주로 이어졌습니다.
Java·JSP·jQuery 기반 환경에서 텍스트·음성·이미지 등 다양한 데이터 수집 프로젝트를 경험하며 기본기를 쌓았습니다. 또한 Canvas API로 공용 어노테이션 화면을 구현했습니다. Jira·Jenkins 협업/배포 파이프라인을 운영했습니다. Python 스크립트로 데이터 가공·결과 추출도 지원했습니다.
WYSIWYG 빌더용 컴포넌트와 초기 랜딩 페이지를 개발했습니다. Django/DRF 기반 CRUD·파일 I/O 등 일부 API를 구현했습니다. 휴대폰 본인확인·가상번호 연동을 지원했습니다. 디자인 백그라운드를 바탕으로 UI/브랜딩 보조도 수행했습니다.
WYSIWYG 빌더용 컴포넌트와 초기 랜딩 페이지를 개발했습니다. Django/DRF 기반 CRUD·파일 I/O 등 일부 API를 구현했습니다. 휴대폰 본인확인·가상번호 연동을 지원했습니다. 디자인 백그라운드를 바탕으로 UI/브랜딩 보조도 수행했습니다.
소규모 팀에서 웹 제품 구축에 참여했습니다. 마크업/스타일링과 간단한 인터랙션, 어드민 화면 등 프론트 중심으로 작업했습니다. 요구사항 정리와 QA·운영 보조를 수행했습니다.
소규모 팀에서 웹 제품 구축에 참여했습니다. 마크업/스타일링과 간단한 인터랙션, 어드민 화면 등 프론트 중심으로 작업했습니다. 요구사항 정리와 QA·운영 보조를 수행했습니다.
백엔드 실무 진입을 목표로 웹 엔지니어링 기초(HTTP/REST, Git, RDBMS)와 서버·클라이언트 흐름을 학습했습니다. 작은 웹 프로토타입을 제작하며 데이터 모델링·API 개념을 익혔습니다. 이후 초기 실무에서는 프론트 영역부터 기여를 시작했습니다.
백엔드 실무 진입을 목표로 웹 엔지니어링 기초(HTTP/REST, Git, RDBMS)와 서버·클라이언트 흐름을 학습했습니다. 작은 웹 프로토타입을 제작하며 데이터 모델링·API 개념을 익혔습니다. 이후 초기 실무에서는 프론트 영역부터 기여를 시작했습니다.
《월간 아트》 매거진과 국내 작가 전시도록·브로슈어를 디자이너로 제작했습니다. InDesign 기반 워크플로를 정착했습니다. 그리드·타이포 시스템을 수립해 박물관 도록 등 출판물을 다수 제작했습니다.
《월간 아트》 매거진과 국내 작가 전시도록·브로슈어를 디자이너로 제작했습니다. InDesign 기반 워크플로를 정착했습니다. 그리드·타이포 시스템을 수립해 박물관 도록 등 출판물을 다수 제작했습니다.
전시 ‘전시히읗 3회’에 참여했습니다. 조합형 한글 폰트를 제작했습니다(초성 3벌·중성 2벌·종성 2벌). ‘소리글자 한글로 디자인’ 펀딩에 참여해 페이지 제작·운영과 굿즈(티셔츠, 에코백) 제작을 수행했습니다. 타이포그래피 이론·그리드·조판 및 InDesign 실습을 중심으로 역량을 강화했습니다.
전시 ‘전시히읗 3회’에 참여했습니다. 조합형 한글 폰트를 제작했습니다(초성 3벌·중성 2벌·종성 2벌). ‘소리글자 한글로 디자인’ 펀딩에 참여해 페이지 제작·운영과 굿즈(티셔츠, 에코백) 제작을 수행했습니다. 타이포그래피 이론·그리드·조판 및 InDesign 실습을 중심으로 역량을 강화했습니다.
기업 사보·사사·브로슈어·연차보고서(Annual Report)·백서·캘린더·다이어리·팸플릿 등 편집물 제작 과정에 참여했습니다. 교정·교열, 조판/레이아웃 보조 등 메인 디자이너 지원 업무를 수행했습니다.
기업 사보·사사·브로슈어·연차보고서(Annual Report)·백서·캘린더·다이어리·팸플릿 등 편집물 제작 과정에 참여했습니다. 교정·교열, 조판/레이아웃 보조 등 메인 디자이너 지원 업무를 수행했습니다.