3년 차 프론트엔드 개발자로서, React와 TypeScript를 기반으로 한 SPA 및 크로스 플랫폼 앱을 개발했습니다.
디자인 시스템 구축, 상태 관리 아키텍처 설계, UI/UX 개선 등 서비스의 구조와 사용성을 동시에 고려한 개발에 강점을 가지고 있습니다.
Vue 기반의 풀스택 경험과 그룹웨어, 의료 메시지, 마케팅 도메인에서의 실무 경험을 통해 복잡한 비즈니스 로직을 효과적으로 제품화하는 능력을 키웠습니다.
서비스 운영과 유지보수를 직접 담당하며 성능 최적화와 사용자 피드백을 반영한 개선 작업도 주도해왔습니다. 명확한 커뮤니케이션과 협업 중심의 개발 문화에 익숙하며, 함께 더 나은 사용자 경험을 만들어가는 일에 큰 가치를 두고 있습니다.
GitHub https://github.com/JEmilyKoo
Blog https://velog.io/@jemilykoo
Email [email protected]
010-2581-5680
MI개발부 사원
2021.08 ~ 2024.01
2021.11 ~ 2024.01
그룹웨어 신규 솔루션 PC 클라이언트 프론트엔드 개발 및 운영
3~6명
30%
조직도/그룹/쪽지/메신저 기능 개발, 오류 수정, QA, 배포, 신기능 연구 및 개발, 유지 보수 등
JavaScript, Vue.js, HTML5, CSS
i18n, Nuxt, Vuetify
C#, WPF, Webview2
Webpack, Pascal, Inno Setup, MariaDB
GitHub, GitLab, Google SpreadSheet, Dooray!
- SPA framework를 사용한 SSR 개발
- 설계 및 기술 스택 선정 과정부터 참여
- 쪽지 기능 전담 개발
- 구버전 마이그레이션
- CI/CD, 유지 보수 작업
- SaaS에 대응하여 고객사의 요구에 부응할 수 있게끔 옵션 기능 구현
- 제품 발매 후에는 신규 기능 연구 개발 작업을 수행
- 일부 환경에서 절전모드 미인식
- Windows OS 별 절전모드 구현 차이를 고려해 와이파이 변경 감지 기능 수정
- Webview의 새 창끼리의 데이터가 동기화되지 않음
- 데이터 동기화를 Session Storage 로 구현
2023.06 ~ 2023.09
그룹웨어 솔루션 프론트엔드 커스터마이징, 다국어 지원, 유지 보수
4명 + 외부 번역 인력
60%
PC / 모바일 언어 리소스 일치 처리, 다국어 처리, UI/UX 커스터마이징, 배포, QA, 유지 보수
JavaScript, Vue.js, HTML5, CSS
i18n, webpack, Nuxt, Vuetify
C#, WPF, Webview2
Pascal, Inno Setup, MariaDB
GitHub, GitLab, Google SpreadSheet, Dooray!
- PC와 모바일 솔루션의 6개 국어 리소스 파일 통합
- 사용자 기본 언어를 기준으로 설치 파일 제작
- 리소스 파일 적용 설계 변경
- 기존 UI를 가변적인 반응형 UI로 수정
- 고객사의 커스터마이징 요구 사항에 맞추어 기능 수정
- 로고, 아이콘을 작업하며, 오류 수정, 유지 보수 진행
- 기존 날짜 표시 방식이 해외 날짜 표시 방식과 맞지 않음
- 인도네시아 어의 언어적 특성을 고려해 날짜 표기 방식을 재조정
- 번역한 글자수가 UI에 비해 너무 김
- UI를 반응형으로 수정, 불가능한 부분은 번역을 외부 번역 인력과의 조율을 거쳐 수정
2021.11 ~ 2022.9
고려대학교의료원 그룹웨어 PC 클라이언트 프론트엔드 개발 및 운영
6명 (2명은 메인 팀원이었으며, 나머지 4명은 서브 직무로 참여)
25%
신규 솔루션의 조직도/그룹/설정 기능 개발, 대화방/환자대화방 오류 수정, 유지 보수, 배포, 원격 지원 및 운영
JavaScript, Vue.js, HTML5, CSS
Nuxt, webpack, Vuetify
C#, WPF, Webview2
Pascal, Inno Setup
GitLab, Dooray!
- 자사 신규 개발 솔루션을 고객사 커스터마이징을 진행한 형태로 개발
- 조직도/그룹/설정 기능 개발
- 고객사의 요구사항인 환자 대화방과 대화방을, Vue의 컴포넌트 모듈화를 통해 구현
- 기존 자사 그룹웨어 서비스와의 연결 기능 구현
- 배포를 위한 설치 파일 제작
- 제품 발매 후 운영: 유지 보수를 거치며, 원격 지원
- 링크를 포함한 메시지 검색 시 UI 깨짐 현상
- DOM 구조 분석, DOM 요소 슬라이스 CSS 리팩토링
- Props의 남용으로 인한 중복 코드
- 이벤트 버스 사용, 코드 리팩토링
2025.02 – 2025.04 (7주)
친한 사람들과 돈 문제로 어색하지 않도록, 가볍지만 신뢰할 수 있게 정리해주는 코리빙 서비스
6명
프론트엔드 서비스 설계, 디자인 시스템, UI/UX 컴포넌트 구현, 성능 최적화 주도
Frontend Lead Developer / Frontend UX Engineer
- Frontend: React, Next.js, PWA, Redux Toolkit, TypeScript, Emotion, react-hook-form, D3.js
- Backend 연동: Firebase FCM, JWT
- CI/CD & DevOps: Jenkins, Docker
- 협업 툴 : Figma, GitLab, Mattermost, Notion, Discord
- 서비스 설계부터 UI/UX, 성능 최적화, 상태 관리까지 전반 구현
- TDS 스타일의 디자인 시스템을 직접 구성하고, 컴포넌트 일관성 유지 및 확장성을 고려한 설계 적용
- React 기반 BottomSheet, InputBox 등의 주요 컴포넌트를 직접 설계/개발, drag gesture 및 금액 포맷팅 등 UX 로직 구현
- Redux Toolkit + redux-persist 기반 상태 관리 구조 설계, FCM 연동, polling 처리로 실시간 계약 상태 반영
- D3.js 기반 시각화 차트(Histogram, Donut Chart)를 사용해 계약 지출 내역 및 공과금 분배 시각화
- Lighthouse 퍼포먼스 기준 Accessibility, SEO, Best Practice, PWA 항목 100점 달성
- 코드 스플리팅, dynamic import, image 최적화, caching 전략 등 최신 프론트엔드 퍼포먼스 최적화 전략을 총체적으로 적용
changVideo.mp4
(Chrome DevTools 기준 DOMContentLoaded 시간)
- 로딩 페이지의 가벼운 구성
- 로딩 페이지에서만 Emotion 제거
- HTML/CSS 기반 SVG 애니메이션으로 구성 → 초기 화면 빠르게 노출
- 리소스 용량 최소화
- PNG → SVG 변환으로 이미지 용량 대폭 절감
- 디자인 시스템 기반으로 폰트 굵기 3종 제한 → 웹폰트 로딩 최소화
- 시각적 로딩 피드백 강화
- 배경 이미지 대신 CSS 그라데이션 적용 → 사용자 이탈 방지
- 캐시 최적화 및 PWA 대응
- Service Worker로 SVG·폰트 캐싱 적용
- 홈화면 추가 시 즉시 실행 가능 (PWA)
- 불필요한 렌더링 최소화
- 공지 컴포넌트 분리로 초기 렌더 부담 감소
- 단일 axios 인스턴스 구성: 모든 API 요청을
api.ts에 정의된 axios 인스턴스로 처리 - 인터셉터 기반 인증·에러 처리: Redux에서 accessToken을 자동 주입,
handleDefaultError()로 상태 코드별 에러 모달 일관 처리 - 제네릭 API 함수 구성:
getRequest<T>,postRequest<T>등으로 모든 API 응답을 타입 안전하게 처리 - 공통 응답 스키마 설계: 백엔드와 협의하여 success/fail 구조 통일,
ApiResponse<T>로 응답 구조 정형화 - 결과: 인증 흐름 단순화, 에러 처리 중복 제거, 유지보수성과 개발 효율 향상
2025.01 ~ 2024.02 (7주)
실시간 위치 공유 및 최적 장소 추천을 통해 약속 시간을 효율적으로 조율하는 서비스
6명
프론트엔드 설계, 코드 리뷰 주도, 주요 기능 개발, 성능 최적화 주도
Frontend Lead Developer / UI/UX Designer
- Frontend: React, React Native, Redux Toolkit, NativeWind, TypeScript
- Backend 연동: WebSocket, Amazon S3, Firebase FCM,JWT
- CI/CD & DevOps: Android Gradle, Custom Build Pipeline
- 협업 툴 : GitLab, Mattermost, Notion, Figma
- Git PR 리뷰
- ESLint/Prettier 적용
- 모듈화된 컴포넌트 구조 유지
- React Native로 iOS / Android / Web 통합 애플리케이션 개발
- 실시간 위치 공유 및 도착 예정 시간 안내
- Amazon S3의 presigned URL 사용을 통한 이미지 업로드 서버 부담 개선
- 장소 추천 API 응답이 4분 걸려 UX 저하 문제 발생
- 사용자가 기다리지 않도록 먼저 약속 기본 정보를 입력하도록 개선
- Redux 캐싱을 활용해 기존 추천 장소를 즉시 노출, 이후 백그라운드에서 최신 데이터 갱신
- Redux Persist Storage를 적용하여 재접속 시에도 추천 내역 유지, 중복 API 요청 방지
- Presigned URL을 사용한 프로필 이미지 업로드 과정에서 바이너리 데이터 인증 오류 발생
- 업로드 전 이미지 리사이징 및 PNG 변환 적용 → 서버가 요구하는 확장자 규격을 준수하도록 수정
- Android Native Module, FCM, Kakao SDK 추가 후 빌드 시간이 급격히 증가(38분 소요)
- Gradle 빌드 최적화 적용 →APK 빌드 시간 94.7% 단축 (38분 → 2분)
2024.10 ~ 2024.11 (2주)
AI LLM을 활용한 음성 대화 트립 매니징 서비스
2명
50%
팀장 / 프로젝트 기획 및 총괄 / UI 디자인 및 개발 / 네이버 로그인 및 회원가입 DB 구축 / STT 및 음성 대화 시스템 개발 / 음성 대화 WebSocket 연동 개발 / TMap 연동 및 내비게이션 기능 개발
Vue3, JavaScript, HTML, CSS Spring Data JPA, MyBatis, redis, Docker Spring Boot, JPA, MySQL Spring AI, Open AI, Google Cloud Vuetify, Pinia TMap / 네이버 아이디로 로그인
GitHub, Mattermost, Notion
- 자연스러운 AI와의 음성 대화 구현
- 소리 크기 인식, 멈춤 기능, 무음 인식, 발음 교정 인식 구현
- 실제 실시간 지도 정보를 통한 최적 루트 안내
- Vue3를 이용한 웹앱의 UI / UX 디자인 및 구현
- STT를 브라우저 내장 기능으로 사용하되, 무음 인식 교정 컴포넌트 추가 구현
- RestAPI 대신 WebSocket을 이용해 속도 최적화
- STT : FE단에서 처리하고 TextMessage만 BE로 전송
- TTS : BianaryMessage를 AudioBlob 형식으로 전송함과 동시에 해당 Json을 TextMessage로 전송한 뒤 싱크 맞추기 작업 추가
- 프롬프트 엔지니어링을 이용한 토큰 최적화
- 실제로 다루는 메시지의 가공을 통한 토큰 수 최적화
찍Go
2021.7 ~ 2021.8
개요 게이미피케이션을 접목한 여행 정보 공유 서비스 개발
팀 규모 6명
기여도 25%
역할 팀장 / 프로젝트 기획 및 총괄 / 서버 및 개발 환경 구축 / DB 설계 / 플랫폼 서비스 프로필, 업적, 레벨 관련 로직 구현 / UI 디자인 및 개발 / 안드로이드 개발
기술 스택 Bootstrap, JavaScript, HTML, CSS DB(Oracle11) Spring4, JAVA Android SDK Kakao Map / Link / Login, 네이버 아이디로 로그인
협업 툴 GitHub, Slack, Notion, Google SpreadSheet
결과/성과
- Spring 기반의 Rest API 개발
- 웹 소켓을 통한 채팅 서비스 개발
- 수행한 미션에 따라 뱃지, 스탬프, 업적 자동 획득 로직 구현
- Bootstrap, JavaScript, HTML, CSS를 이용한 UI 디자인 및 구현
트러블 슈팅
- 팀원의 요청사항과 성취도 파악
- 맞춤형 스터디 진행
- 매주 1~3회 화상 / 대면 회의로 실시간 피드백 분위기 형성
- 가감 없는 코드 리뷰
- 협업 툴로 구현내용, 에러 상황, 진척 상황, 당면 과제 등을 수시로 공유
- 사용자 중심으로 UI 재설계
전공자 Java 트랙
2024.07~2025.04
-
SW 역량테스트 모의 A형 통과
-
2월 이달의 동료상
-
특화 프로젝트 우수상
한국데이터산업진흥원, 2024.12 취득
Java 개발자 양성 과정
2021.02~2021.08
- 특모범상 수상
경영학전공
2016.3~2021.8
서울시 마포구 본교 소재
- Korean: native
- Japanese: JLPT N1 / fluent (reading, writing, speaking)
- English: intermediate (speaking, writing), fluent (reading)
- 업무에 필요한 역량을 적극적으로 공부해 실력을 함양합니다.
- 프론트엔드에서, UI 디자인을 기반으로 한 UX 구현을 강조합니다.
- 특정 환경에서만 발생하는 이슈를 간과하지 않습니다.
- 팀의 협력적 소통을 중요시합니다.
- 코드 리뷰, 스크럼을 통한 애자일 개발을 추구합니다.
- 컴포넌트 설계 시 재사용성과 유지보수를 고려하여 아키텍처를 구성합니다.
- Redux Toolkit과 TypeScript를 활용하여 타입 안전성이 보장된 상태 관리 시스템을 구축합니다.
- 미들웨어를 통한 비동기 처리를 구현합니다.
- 커스텀 훅을 통해 컴포넌트의 관심사를 분리합니다.
- SSR/SSG를 활용한 성능 최적화와 SEO 대응이 가능합니다.
- 동적 라우팅과 미들웨어를 통한 인증 처리를 구현합니다.
- Next.js의 Image, Link 컴포넌트를 활용하여 웹 성능을 최적화합니다.
- PWA 구현을 통해 앱과 유사한 사용자 경험을 제공합니다.
- 컴포넌트 기반의 스타일링 시스템을 구축하고, 테마를 통한 일관된 디자인 시스템을 구현합니다.
- TypeScript와 함께 사용하여 타입 안전성이 보장된 스타일 컴포넌트를 작성하고, 동적 스타일링을 구현합니다.
- CSS-in-JS의 장점을 활용하여 스타일 충돌을 방지하고, 성능 최적화를 위한 스타일 분리를 수행합니다.
- 크로스 플랫폼 앱 개발 경험이 있으며, Expo와 NativeWind 환경에서 UI를 구현합니다.
- 상태 관리를 위해 Redux Toolkit과 TypeScript를 사용해 안전하고 효율적인 코드를 작성합니다.
- 안드로이드 네이티브 모듈을 구성해 FCM 알림, 백그라운드 위치 추적 기능을 구현했습니다.
- Expo 환경에서 앱 내 화면 전환과 기능을 구성하고 최적화합니다.
- WebSocket
- 기본 WebSocket과 STOMP, SockJS를 활용해 실시간 데이터 통신을 구현합니다.
- 음성 데이터 최적화 전송, 실시간 좌표 바인딩, 텍스트 및 JSON 데이터를 안정적으로 송수신처리합니다.
- 연결 상태 관리, 자동 재연결, 에러 처리 등 서비스 안정성을 높이는 작업을 수행합니다.
- REST API
- Spring Boot 기반의 RESTful API와 연동해 데이터 송수신과 CRUD 기능을 구현합니다.
- 비동기 처리와 에러 핸들링을 통해 사용자 경험을 개선합니다.
- 사용자 정의 컴포넌트를 구현합니다.
- Nuxt 라이브러리를 사용한, SSR 환경에 익숙합니다.
- 버블링과 캡쳐링을 능숙하게 제어합니다.
- Vuetify를 사용해 CSS를 꾸밉니다.
- 제네릭을 활용한 ApiResponse 타입 시스템을 구축하고 API 통신의 타입 안전성을 보장합니다.
- Redux 상태와 액션에 대한 타입을 정의하고 슬라이스별 타입 시스템을 구축합니다.
- Omit, Pick 등 유틸리티 타입으로 컴포넌트 props와 훅의 타입을 정교하게 관리합니다.
- 비동기 함수와 동기 함수의 차이점을 이해하고, 브라우저의 딜레이를 최소화합니다.
- Axios 인터셉터와 Promise로 비동기 요청을 처리하고 중앙화된 에러 핸들링을 구현합니다.
- FCM 이벤트 리스너로 실시간 알림을 처리하고 상태별 메시지 핸들링을 구현합니다.
- 클린업 함수를 통해 메모리 누수를 방지하고 비동기 작업을 효율적으로 관리합니다.
- JS를 바탕으로 한 이벤트 버스를 구현합니다.
- 시맨틱 태그와 WAI-ARIA를 활용하여 웹 접근성을 고려한 마크업을 작성합니다.
- BEM 방법론을 통해 유지보수가 용이한 클래스 구조를 설계합니다.
- CSS Grid와 Flexbox를 활용한 반응형 레이아웃을 구현합니다.
- 미디어 쿼리를 통해 다양한 디바이스에 최적화된 반응형 UI를 제공합니다.
- 인터랙티브 애니메이션을 구현하고, CSS 변수와 동적 클래스를 통해 테마 시스템을 구축합니다.
- Spring으로 Restful API를 구현합니다.
- Java로 알고리즘 문제를 수월하게 풀어냅니다.
- Java Stream API를 적절히 사용합니다.
- Android 코드를 이해합니다.
- WPF 환경 기반의 웹앱을 개발합니다.
- MVC 패턴의 백엔드를 프론트엔드로 연결시킬 수 있습니다.
- Webview2의 OS 관련 에러 트러블 슈팅 경험이 있습니다.