본문으로 건너뛰기
최서희Frontend Engineer

최서희 · 기획하는 프론트엔드 개발자

모호한 요구사항을 구조화해 실제 사용자 흐름으로 연결합니다

React·Next.js로 커머스 서비스와 디자인 시스템을 만듭니다. 기획이 다 정해지지 않아도 업무 흐름과 API부터 파악해 화면을 정하고, 쓰는 사람이 불편한 부분까지 챙깁니다.

itschoiseohee@gmail.comGitHub (새 탭에서 열림)Blog
PR 검증 시간 단축
67%
129초 → 42초 · 경로 기반 조건부 빌드
디자인 시스템 테스트 케이스
테스트 839개
컴포넌트 30여 개 · Figma 명세 기준
해커톤·SW 쇼케이스
대상 2회
은상·장려상·우수상 · 학회 논문 발표 1회
경력
로그베이스 프론트엔드 인턴 (2026.02 - 04)
학력
경기대학교 컴퓨터공학 졸업 (2025.08)
주 스택
React · TypeScript · Next.js
도메인
커머스 · B2B 거래

01

프로젝트

문제를 어떻게 정의하고 무엇을 바꿨는지 중심으로 정리했습니다. 제목을 누르면 상세 사례를 볼 수 있습니다.

회사

CustomVillage 대표 이미지

2026.02 - 2026.04로그베이스 인턴

CustomVillage

AI·XaaS 기반 커스텀 패션 굿즈 상품화·생산 연계 플랫폼의 프론트엔드.

67%PR 검증 시간 단축 · 129초 → 42초

Next.js (App Router) · TypeScript · pnpm 워크스페이스 · NestJS · React · Tailwind CSS · TanStack Query · Konva.js · Zod · Toast UI Editor · GCP Cloud Run · Cloud Build · Secret Manager · GitHub Actions · ESLint

  • 3단계 커머스 흐름 구현

    운영 관리자 → 입점 쇼핑몰 관리자 → 고객용 Storefront의 3단계 구조를 역할 경계를 명확히 해 구현·연동했다.

  • 완성된 디자인 없이 화면 설계

    기획 산출물 없이도 요구사항을 제품 화면으로 구체화해 개발을 진행했다.

  • PR 검증 시간 단축

    일반 코드 변경 PR 검증 129초 → 42초 (약 67% 단축), 프론트 Docker 빌드 129초 → 21초 (약 84% 단축)

팀 · 학부

디자인 시스템이 적용된 랜딩 페이지
디자인 시스템이 적용된 랜딩 페이지

2026.06 - 현재팀 프로젝트

거부기린

실시간 자세 교정 데스크톱 앱 팀에서 디자인 시스템을 맡았습니다. 파운데이션부터 컴포넌트 30여 개까지 Figma 명세대로 구현합니다.

테스트 839개컴포넌트 30여 개 · Figma 명세 기준

디자인 시스템 패키지 코드 95% · PR 48개

React 18 · TypeScript · Vanilla Extract · Vite · tsup · SVGR · Vitest · Testing Library · Storybook 8 · pnpm Workspace · Turborepo · Figma

  • 디자인 시스템 패키지 구현

    Typography·Icon·Foundation과 Action·Utility 컴포넌트를 Figma 명세 일치 상태로 구현·검증했다.

  • 빌드·스타일 처리 구조 개선

    빌드 도구 전환과 경로 해석 문제를 해결해 패키지 빌드를 안정화했다. 채택 근거는 shadcn·Radix 사례와 비교해 ADR로 문서화했다.

  • 타입·테스트로 UI 버그 재현·차단

    Button Loading 색상 오류·NotificationIcon fillOpacity 중복 등 상태별 UI 버그를 타입과 테스트 단계에서 재현·수정했다.

  • 키보드·포커스 동작을 테스트로 고정

    Dialog·Drawer·Tab·TableOfContents의 키보드 동작이 테스트로 검증되어, 이후 스타일 변경에도 접근성이 깨지지 않도록 했다.

퀵미트 브랜드 이미지
퀵미트 브랜드 이미지

2026.07 - 현재팀 프로젝트 · 출시 전

퀵미트

사업자끼리 축산물을 사고파는 B2B 직거래 앱(React Native). 판매 글 탐색, 견적 채팅, 거래명세서 등록·검수까지 한 앱에서 처리합니다.

SSE 실시간 채팅React Native에서 EventSource 없이 구현 · 거래명세서 흐름 담당

앱 PR 39/94 · 머지 PR 1위 (앱 개발 3명)

React Native · Expo · TypeScript · React Navigation · Axios

  • React Native에서 SSE로 실시간 채팅 구현

    채팅 목록·채팅방·견적 요청과 확인 흐름을 실제 API에 연결했다.

  • 거래명세서 등록·검수 흐름

    직접 입력·일괄 입력·검수와 거래일자 변경·보관기한 연장 기능을 머지했다.

  • 판매글 상세와 사진 첨부 흐름

    판매글 상세·사진 첨부 흐름을 머지하고, 하단 탭을 5개로 늘려 판매글 탐색을 연결했다.

  • 조건이 서로 얽힌 맞춤 알림 설정

    맞춤 알림 설정·추가·수정 화면과 조건 API 5개 연동을 머지했다.

팀 발표 자료 중 대시보드 화면 (담당 페이지)
팀 발표 자료 중 대시보드 화면 (담당 페이지)

2025.06 - 2025.07SOPT AppJam

Pinback

저장만 하고 잊는 북마크를 다시 읽게 만드는 웹 서비스·크롬 익스텐션. 읽을수록 도토리가 쌓이는 게이미피케이션 구조.

대시보드 전담서버 상태 설계부터 API 연동까지 · FE 4명 중 코드 기여 1위

코드 37% (FE 4명)

React · TypeScript · TanStack Query · Tailwind CSS · Axios · cva · Turborepo

  • 대시보드 서버 상태를 도메인별 훅으로 분리

    읽음 처리 성공 시 관련 5개 쿼리를 무효화해 도토리 개수·목록·카테고리가 함께 갱신되도록 연결했다. (PR #101)

  • 도토리 레벨 배너와 카드 섹션

    대시보드 페이지 전체를 담당해 머지했다. (PR #43, #65, #72, #84)

배우다 대표 이미지

2025.03 - 2025.06교내 캡스톤

배우다

경기대학교 심화 캡스톤 팀 프로젝트. PM 겸 Frontend Lead.

학회 논문 발표PM 겸 Frontend Lead · FE 3명 중 PR 기여 1위

프론트엔드 코드 42% · PR 32/55 (FE 3명 중 최다)

Next.js (App Router) · TypeScript · Tailwind CSS · Zustand · Axios

  • React 밖에서도 쓰는 인증 상태 설계

    요청마다 인터셉터에서 최신 토큰을 주입하고, 401·403 응답 시 한곳에서 인증 상태를 초기화해 게스트 화면으로 보내는 흐름을 일관되게 만들었다.

  • 레이아웃 단위 화면 접근 규칙

    새 페이지를 추가해도 어느 레이아웃 아래 두느냐만으로 접근 흐름이 정해지도록 정리했다.

개인

개편 후 첫 화면
개편 후 첫 화면

2025.01 - 현재개인 프로젝트

포트폴리오 사이트

2025년 1월부터 운영해 온 포트폴리오 사이트. 2026년 9월, 채용 담당자가 첫 화면에서 핵심을 바로 읽도록 구조와 성능을 다시 설계하고, 기술 블로그를 사이트 안으로 옮겼습니다.

85 → 100Lighthouse 성능 점수 · LCP 4.1초 → 1.4초

Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS · Keystatic · Markdoc · Shiki · giscus · Vitest · GitHub Actions · subset-font

  • 첫 화면이 2초 넘게 비어 보이던 문제

    성능 점수 85 → 100, LCP 4.1초 → 1.4초 (66% 단축), JS 전송량 194KB → 119KB (39% 감소)

  • 한글 웹폰트 전송량 줄이기

    폰트 요청 16개 → 1개, 전송량 약 420KB → 118KB. 폰트를 추가하고도 전체 전송량은 개선 전보다 작게 유지

  • 콘텐츠와 UI가 뒤섞인 구조 정리

    문구 수정이 데이터 파일 한 곳으로 모였고, 테스트 작성 중 여러 구간 기간("2025.01-02, 2025.07-08")을 서기 8년으로 계산해 정렬이 틀어지던 버그를 발견·수정

  • 외부 블로그를 사이트 안으로 옮기기

    글 26개와 이미지 17장을 내 도메인(/blog)으로 옮기고 검색·태그·연재 묶기·댓글을 붙였다. 글이 늘어도 첫 화면 폰트는 늘지 않는다

* 기여도: 기본 브랜치 커밋 기준, lock 파일·이미지·빌드 산출물을 제외한 코드 추가 라인 비율 (2026.09 측정)

02

이력

경력·학력·교육·활동·수상을 최신순으로 정리했습니다.

경력

2

  • 2026.02 - 2026.04

    로그베이스

    Frontend Intern

    • CustomVillage: AI·XaaS 기반 커스텀 패션 굿즈 상품화·생산 연계 플랫폼

    Product flow

    • 운영 관리자 → 입점 쇼핑몰 관리자 → 고객용 Storefront의 3단계 커머스 흐름을 역할별 화면과 API로 연결

    Product definition

    • 완성된 디자인 없이 운영 업무·API 구조·예외 상태를 확인하며 화면 설계 → Next.js 구현 → QA를 한 흐름으로 진행

    Delivery

    • 경로 기반 조건부 Docker 빌드와 캐시 재사용 구조 정리 → PR 검증 시간 129초 → 42초 (약 67% 단축)

    CI 최적화 과정 블로그 글

  • 2025.08 - 2025.09

    비컴솔루션

    교내 연계 인턴 · Biz.서비스 부서

    • RSS 수집 → 콘텐츠 요약 → 메일 발송 흐름으로 반복 업무를 자동화하는 뉴스레터 자동화 PoC 제안·문서화

    뉴스레터 자동화 제안서 (Notion) (새 탭에서 열림)

학력

1

  • 2023.03 - 2025.08

    경기대학교

    AI 컴퓨터공학부 컴퓨터공학 전공

    • 편입 후 졸업 · GPA 3.65 / 4.5
    • 기초캡스톤디자인(A+), 심화캡스톤디자인(A+)

대회 및 수상

6

  • 2025.07

    SOPT 연합 해커톤 (충청북도리도리)대상

    대학생 IT벤처 창업 연합 SOPT

    • 충청북도 지역·카테고리 기반 관광 탐색 서비스 프론트엔드 담당
    • 지역 선택 모달, 카테고리 UI, API 연동, 공통 컴포넌트 개발

    프로젝트 GitHub (새 탭에서 열림)

  • 2024.11

    2024 부산 해양데이터 해커톤장려상

    부산광역시, 부산대학교

    • 부산에서 오사카로 가는 크루즈 선상에서 2박 3일 동안 진행된 해커톤
    • 해양쓰레기 사진 인증과 수거 포인트 서비스에서 쓰레기 인식 모델 담당: 와이파이가 제한된 선상에서 YOLOv8 경량 모델을 노트북으로 학습

    AI 모델 GitHub (새 탭에서 열림)

  • 2024.10

    2024 캡스톤 디자인 & AI 해커톤장려상

    한국컴퓨터교육학회

    • 생성형 AI 기반 법안 요약·시각화 웹 서비스: 프론트엔드 개발
    • 한국컴퓨터교육학회장상

  • 2024.09

    핏펫 스마트커버인슈어런스 X 큐시즘 기업프로젝트우수상

    IT 경영학회 KUSITMS, 핏펫

    • 3주 동안 기획부터 개발까지 진행한 펫보험 비교 사이트 UX 개선 프로젝트에서 프론트엔드 개발
    • 기획과 개발 사이 소통을 맡아 QA와 사용성 테스트 의견 반영

  • 2024.07 - 2024.08

    2024 K-소프트베케이션 쇼케이스대상

    과학기술정보통신부, 정보통신기획평가원

    • YOLOv8 기반 스마트폰 액정 파손 진단 서비스: 데이터 전처리, 관리자 통계 페이지 개발
    • 정보통신기획평가원장상

    대회 관련 뉴스 기사 (새 탭에서 열림)

  • 2024.03 - 2024.06

    이더리움 기반 학생회 투표 플랫폼 (경기인픽)은상

    경기대학교 소프트웨어중심대학사업단, 한국정보기술학회

    • 캡스톤 팀(9명): 화면 UI와 투표 결과 페이지 담당 (web3로 온체인 득표 수 조회 후 Chart.js 시각화)
    • 경기대학교 소프트웨어중심대학사업단, 한국정보기술학회장상 (2회 수상)

교육

2

  • 2025.01-02, 2025.07-08

    LG Aimers 6기, 7기 연속 수료

    LG AI연구원, DACON

    • 산업 데이터 기반 AI 교육·해커톤 프로그램 연속 수료
    • 6기: 난임 환자 임신 성공 여부 예측 / 7기: 식음업장 메뉴 수요 예측

    LG Aimers Notion (새 탭에서 열림)

  • 2023.12 - 2024.11

    K-Software Empowerment BootCamp 수료

    정보통신기획평가원 2024년 대학·기업 협력형 SW 아카데미 사업

    • 대학·기업 협력형 640시간 SW 교육과정 수료
    • 스마트팩토리 B2B 웹 서비스 개발 프로젝트 진행

    스마트팩토리 프로젝트 GitHub (새 탭에서 열림)

활동

5

  • 2025.08 - 현재

    큐스팅 3기 (블로그 스터디)

    IT 경영학회 KUSITMS

    • KUSITMS 공식 블로그 스터디 3기 참여
    • 2주에 1회 이상 블로그 포스팅 및 스터디원 간 상호 피드백

    기술 블로그

  • 2024.09 - 현재

    큐게더 (독서스터디)

    IT 경영학회 KUSITMS

    • 현직 개발자들과 개발 필독서 5권 완독
    • 『소프트웨어 장인』 · 『함께 자라기』 · 『클린 코드』 · 『이펙티브 엔지니어』 등

    스터디 기록 GitHub (새 탭에서 열림)

  • 2025.03 - 2025.07

    SOPT 36기 웹파트 수료

    대학생 IT벤처 창업 연합 SOPT

    • 파트 세미나 8회 및 솝커톤·합동세미나·AppJam 참여
    • 기획·디자인·백엔드와 협업하는 실무형 팀 프로젝트 경험

    SOPT 공식 사이트 (새 탭에서 열림)웹파트 과제 GitHub (새 탭에서 열림)

  • 2025.02 - 2025.03

    Udemy 러닝크루 Next.js 스터디 수료

    Udemy

    • 5주간 Next.js 심화 학습·블로그 기록 스터디 수료
    • 서버/클라이언트 컴포넌트, 인증 시스템, 파일 기반 라우팅 등 핵심 기능 학습

  • 2024.09 - 2024.12

    KUSITMS 30기 수료

    IT 경영학회 KUSITMS

    • 기업 프로젝트·밋업 프로젝트에서 프론트엔드 개발
    • 기업 프로젝트 우수상 수상: 핏펫(스마트커버 인슈어런스) 펫보험 비교 사이트 UX 개선

    KUSITMS 공식 사이트 (새 탭에서 열림)

03

기술

실무와 프로젝트에서 직접 사용한 도구입니다.

Frontend · 협업
TypeScript · React · Next.js · React Native · JavaScript · Tailwind CSS · Vanilla Extract · Zustand · TanStack Query · Zod · Figma
Infra · 배포 · 연동
Docker · GCP · Cloud Run · GitHub Actions · Railway · 카페24 웹호스팅 · pnpm 모노레포 · NestJS 연동 · Expo

04

기술 글

문제를 해결한 과정을 글로 정리합니다.

블로그에서 글 전체 보기 →

05

일하는 방식

최서희 프로필 사진

최서희

경기대학교 AI 컴퓨터공학부 컴퓨터공학전공 · 편입 후 졸업 (2025년 8월)

인턴으로 일한 커머스 플랫폼에는 완성된 디자인이 없었습니다. 운영 방식과 API부터 확인해 관리자 화면을 정했고, 구현·QA·배포 파이프라인까지 맡았습니다.

팀에서는 기획·디자인·백엔드 사이에서 이야기를 정리하는 역할을 주로 맡습니다. 캡스톤에서는 팀을 꾸려 PM과 프론트엔드를 함께 맡았고, 학회 논문 발표까지 마쳤습니다.

같은 일을 손으로 두 번 하지 않으려 합니다. 2분 넘게 걸리던 PR 검증을 42초로 줄였고, 반복되던 리뷰 요청은 스크립트로 바꿨습니다.

01완성도
요구사항을 맞추는 것보다 실제로 써 봤을 때 어색한 곳이 없는지를 더 신경 씁니다. 일정이 빠듯해도 QA와 사용성 테스트에서 나온 의견은 최대한 반영하려고 합니다.
02화면 설계
디자인이 없을 때는 운영 방식과 API, 예외 상황을 먼저 확인하고 화면을 정합니다. 정한 내용은 구현하면서 기획자와 계속 맞춰 봅니다.
03소통
개발 환경 세팅이나 기획과의 조율처럼 아무도 안 맡은 일은 먼저 가져갑니다. 문제가 생기면 상황을 정리해서 바로 공유합니다.
04자동화
반복되는 작업이 보이면 원인부터 찾습니다. CI가 느리면 로그를 보고, 손으로 하던 일은 스크립트로 바꿉니다.

06

동료 피드백

함께 일한 기획자·디자이너·개발자가 남긴 피드백에서 발췌했습니다.

  • “팀을 직접 꾸리고, 주제도 본인이 먼저 제안하면서 처음부터 끝까지 프로젝트를 잘 이끌었습니다. 분위기를 잘 조율하면서도 할 말은 확실하게 해서 모두가 신뢰하고 따라갈 수 있었습니다.”

    — 캡스톤(배우다) 팀원

  • “촉박한 일정 내에서도 기디[기획·디자인]의 QA 및 UT 개선 사항을 최대한 반영해주려고 노력해서 기획자 입장에서 정말 좋았습니다. 서희 덕분에 기획과 개발 파트 간의 소통을 매끄럽게 할 수 있었습니다.”

    — KUSITMS 기업 프로젝트 PM

  • “초반에 다른 일 때문에 바빴는데 환경세팅도 먼저 나서서 다 해줬어요. 개발하다가 문제가 생기면 같이 고민해주고 같이 해결했어요.”

    — KUSITMS 밋업 프로젝트 프론트엔드 팀원

  • “디자이너와 개발자 사이에 가장 중요한 부분이 ‘소통’이라고 생각하는데, 이 부분이 원활하게 잘 이루어져 빠른 시일 내에 퀄리티 높은 결과물을 얻을 수 있었어요.”

    — KUSITMS 밋업 프로젝트 디자이너

  • “결제 페이지 구현 진짜 잘 구현하셨네요. 넘어가는 페이지들이 다른 팀들보다 자연스럽게 느껴졌고 완성도가 가장 높은 팀 같아요!”

    — SOPT 합동세미나 타 팀 평가