미리보기
기본 정보

스타트업 프론트엔드 개발과 SI 프로젝트 풀스택 개발 등 다양한 프로젝트를 진행해왔습니다. 외국인들을 대상으로 한국어 교육 플랫폼 앱들을 풀스택 개발부터 출시까지 진행해보았으며, 근래에 들어서는 프론트엔드 리드 개발자로서 팀원, 디자이너와 협업하여 디자인 시스템을 구축하여 재개발/재건축 조합에서 사용하는 플랫폼을 개발하였습니다. 디자인 시스템 도입, 아토믹 디자인 패턴 적용 등 여러 이슈들을 해결하기 위한 방법을 고민하고 적용하여 좋은 서비스를 만들기 위해 노력하고 있습니다.
기술 스택
JavaScript, TypeScript, React, Java, HTML/CSS, Spring, Spring Boot, Node.js, Next.js, Git, AWS, React Native, vercel, storybook, VSCode
경력
이제이엠컴퍼니
프론트엔드 리드 개발자 | 개발팀
2023.03. ~ 2025.01. (1년 11개월)
재개발/재건축 조합의 운영관리 플랫폼 서비스를 제공하는 스타트업입니다.
프론트엔드 팀의 팀원으로 처음 합류하여 조합 커뮤니티 ‘우리가’의 고도화와 레거시 코드를 재정비하였습니다.
프론트엔드 팀의 리드 개발자가 되어 디자인 시스템을 개발하였으며, 디자인 시스템을 바탕으로 조합 총회의 선거 관리 시스템, 조합 운영 관리 시스템, 고객 관리 시스템의 프론트엔드 개발을 진행하였습니다.
쿠바
대리 | 개발팀
2022.02. ~ 2023.01. (1년)
ETRI 등 기관 용역 사업을 주로 수행하는 기업입니다.
AI 머신러닝 기반의 연구 프로토타입 앱 개발 사업을 주로 담당하여, 학습된 모델을 안드로이드 기반에서 동작되도록 변환, 최적화하여 기능을 구현하여 납품을 성공적으로 진행하였습니다.
이르테크
대리 | 개발팀
2018.04. ~ 2021.07. (3년 4개월)
AI 기술을 기반으로 외국인들을 대상으로 한국어 교육 앱을 서비스하는 기업입니다.
국립국어원의 자연어 처리 데이터를 구축하는 소프트웨어 개발 사업을 시작으로 몇 가지 SI 사업을 처음 진행하였습니다. 그 후에는 솔루션 개발팀에 합류하여 외국인을 대상으로하는 한국어 교육 플랫폼 앱 개발을 진행하였습니다.
케이엘정보통신
2017.12. ~ 2018.04. (5개월)
대전교육정보원에 상주하여 운영/유지보수를 담당하였습니다.
프로젝트
고객 관리 시스템 개발
이제이엠컴퍼니
2024.11. ~ 2025.01.
Description
고객인 재개발/재건축 조합을 지원하고 관리하기 위한 회사 내부 시스템 개발 프로젝트입니다.
Experience
기존 레거시 시스템 분석, UI/UX 개선하여 디자이너와 협업하여 재설계
Thymeleaf에서 React 기반으로 기술 스택 전환
문자열 리소스 관리를 위한 react-i18next 기반의 문자열 공통 관리 모듈을 개발
초기 로딩 최적화를 위해 코드 스플릿팅 최적화를 통해 초기 렌더링 속도 30% 이상 개선
Tech Stack
React
Vite
TypeScript
MUI
Storybook
zustand
React Query
react-i18next
조합 운영 관리 시스템 개발
이제이엠컴퍼니
2024.07. ~ 2024.11.
Description
재개발/재건축 조합의 업무를 지원하기 위한 플랫폼 개발 프로젝트입니다.
Experience
기존 레거시 시스템 분석, UI/UX 개선하여 디자이너와 협업하여 재설계
Thymeleaf에서 React 기반으로 기술 스택 전환
공통 모듈 리펙토링으로 기술 부채 해소
디자인 시스템 신규 컴포넌트 추가 개발
React Query 적용을 통하여 API 데이터 캐싱 및 성능 최적화
조합원 명부 관리, 인증 등 기능 개발
Tech Stack
React
Vite
TypeScript
MUI
Storybook
zustand
React Query
프론트엔드 인프라 이전
이제이엠컴퍼니
2023.12. ~ 2024.01.
Description
서비스의 원활한 제공과 인프라 확장을 대비하여 인프라 이전 작업을 진행하였습니다.
Experience
NCloud에서 Vercel로 프론트엔드 인프라 이전 작업
AWS Route 53을 통해 도메인 연결 및 DNS 설정
Sentry, Datadog을 통한 프론트엔드 상태 모니터링 시스템 구성하여 장애 대응
Jira, Github Actions를 연계하여 CI/CD 구성하여 배포 효율성 개선
Tech Stack
Vercel
AWS
Sentry
Datadog
Github
Jira
디자인 시스템 개발
이제이엠컴퍼니
2023.12. ~ 2024.03.
Description
원활한 협업과 일관성 있는 UI를 위해 디자인 시스템을 구축하는 프로젝트입니다.
MUI Joy 라이브러리의 디자인 철학을 기반으로 회사 고유한 디자인 시스템을 개발하였습니다.
Experience
커뮤니케이션 간소화 및 오류 최소화, 일관성 있는 UI를 목적으로 설정
개발 기간을 최소화하기 위해 MUI Joy 라이브러리를 기반으로 커스터마이징 구축
스토리북을 통하여 컴포넌트 별 활용 가이드 문서 작업
스토리북을 Chromatic 배포하여 버전 별 변경점 공유 및 시각적 테스트 자동화
Tech Stack
React
TypeScript
Vite
Storybook
Chromatic
MUI Joy
조합 총회 선거 관리 시스템 개발
이제이엠컴퍼니
2023.07. ~ 2023.11.
Description
재개발/재건축 조합의 의사 결정 절차인 총회의 선거를 관리하기 위한 시스템 개발 프로젝트입니다.
Experience
모노레포 프로젝트 구성, 공통 기능 및 컴포넌트 모듈화
의존성 캐싱 적용을 통해 CI 시간 50% 이상 단축
선거 명부 관리, 인증, 와콤 시그니처 패드 전자 서명 등 전반적인 기능 개발
Tech Stack
React
TypeScript
Vite
MUI
Storybook
zustand
조합 커뮤니티 사이트 개발/유지보수
이제이엠컴퍼니
2023.03. ~ 2023.12.
Description
재개발/재건축 조합의 커뮤니티 사이트 '우리가' 개발 프로젝트입니다.
Experience
조합의 커뮤니티 메인 페이지 검색 엔진(네이버, 구글) 최적화
조합 커뮤니티 OG(오픈그래프) 적용
조합 커뮤니티 ADMIN 신규 기능 개발
회사/서비스 소개 페이지 개발
소셜(kakao) 로그인 프론트엔드 부분 개발
기술 부채 점진적 개선
Tech Stack
React
TypeScript
Vite
Sass
SSR
Vike
스마트단말용 객체기반 다시점 변환을 위한 서비스 SW 개발
쿠바
2022.07. ~ 2022.11.
Description
사물의 이미지를 선택하여 해당 사물의 다른 방향의 형태를 추론하여 생성하는 프로토타입 앱 개발 프로젝트입니다.
Experience
이미지 선택 기능 개발
다시점 추론 모델을 안드로이드용으로 경량화 변환하여 이식
추론 이미지 생성하여 표시
Tech Stack
Android
kotlin
pytorch
python
Anaconda
TR 온/오프라인 프라이버시 서비스 개발
쿠바
2022.03. ~ 2022.08.
Description
영상의 사물 인식 AI 모델을 통해 해당 사물을 비식별화하여 스트리밍하는 보안 솔루션에 대한 프로토타입 앱을 개발하는 프로젝트입니다.
Experience
아이디/패스워드 인증 과정을 통해 고유의 보안 키를 발급
카메라로 촬영된 영상을 비동기적으로 인물 얼굴, 개인 정보 등을 인식
인식한 영역을 발급된 시크릿 키로 비식별화
비식별화된 영상을 스트리밍 전송
서버에 저장된 고유의 보안 키로 비식별화된 영상을 복호화하는 WPF 앱 개발
Tech Stack
Spring boot
JAVA
MySQL
MyBatis
Android
WPF
C#
OpenCV
Tensorflow
KOKOA 앱 개발
이르테크
2021.01. ~ 2021.07.
Description
한국어 학습을 희망하는 외국인을 대상으로 B2C 서비스 플랫폼 앱을 개발하는 프로젝트입니다.
한국어 단어, 대화, 발음 연습 등을 콘텐츠로 제공합니다.
Experience
React-native 앱 및 REST API 풀스택 개발
JWT(Access, Refresh) 인증 개발
API Message 처리 구현(i18n 적용)
Firebase Cloud Messaging을 통한 앱 푸시 API 개발
GCP speech-to-text 및 회사 자체 솔루션을 통한 한국어 발음 평가 기능 개발
AWS EC2, EFS, 로드밸런서 구성/배포
react-i18next를 통한 앱 다국어 지원 설계
Tech Stack
Spring boot
JAVA
MySQL
MyBatis
React-native
react-redux
redux-saga
AWS
Firebase
GCP
Docker
KOKOA for Speak & Talk 앱 개발
이르테크
2020.07. ~ 2020.09.
Description
한국어 학습을 희망하는 외국인을 대상으로 서비스하는 앱입니다.
한국어 발음을 간단한 게임처럼 연습할 수 있는 콘텐츠를 제공합니다.
Experience
React-native 앱 및 REST API 풀스택 개발
JWT(Access, Refresh) 인증 개발
API Message 처리 구현(i18n 적용)
Firebase Cloud Messaging을 통한 앱 푸시 API 개발
GCP speech-to-text 및 회사 자체 솔루션을 통한 한국어 발음 평가 기능 개발
AWS EC2, EFS, 로드밸런서 구성/배포
react-i18next를 통한 앱 다국어 지원 설계
Tech Stack
Spring boot
JAVA
MySQL
MyBatis
React-native
react-redux
redux-saga
AWS
Firebase
GCP
Docker
KOKOA 기관용 앱 개발
이르테크
2020.02. ~ 2020.06.
Description
한국어학당 교육기관들을 대상으로 하는 B2B 서비스 플랫폼 앱을 개발하는 프로젝트입니다.
Experience
React-native 앱 및 REST API 풀스택 개발
JWT(Access, Refresh) 인증 개발
API Message 처리 구현(i18n 적용)
Firebase Cloud Messaging을 통한 앱 푸시 API 개발
GCP speech-to-text 및 회사 자체 솔루션을 통한 한국어 발음 평가 기능 개발
AWS EC2, EFS, 로드밸런서 구성/배포
react-i18next를 통한 앱 다국어 지원 설계
Tech Stack
Spring boot
JAVA
MySQL
MyBatis
React-native
react-redux
redux-saga
AWS
Firebase
GCP
Docker
기분석 데이터 활용 형태소 분석 API 서버 개발
이르테크
2019.06. ~ 2019.09.
Description
형태소 분석 로그 데이터를 통하여 형태소 분석을 진행하는 API 서버 개발 프로젝트입니다.
Experience
분석 과정 설계/개발
전 처리, 후 처리 설계/개발
품질 테스트
Tech Stack
Spring boot
JAVA
MySQL
Docker
국어 말뭉치 구축 웹 플랫폼 개발
이르테크
2019.01. ~ 2019.03.
Description
한국 자연어 처리에 필요한 말뭉치를 구축하기 위한 자체 솔루션 개발 프로젝트입니다.
Experience
ElasticSearch 색인 로직 개발
ElasticSearch 기본 검색 설계/개발
Tech Stack
Spring boot
JAVA
MySQL
React
ElasticSearch
한국학중앙연구원 말뭉치 구축 사업
이르테크
2018.08. ~ 2018.12.
Description
한국학중앙연구원의 SI 사업으로 자연어 처리에 필요한 한국어 말뭉치를 논문 PDF의 텍스트를 추출해서 구축하는 툴과 망뭉치 데이터를 납품하는 프로젝트입니다.
Experience
기존 데이터베이스 마이그레이션(Access > MSSQL)
말뭉치 구축 도구 프로세스 설계
구축 도구 설계/개발
ElasticSearch 색인 기능 개발
ElasticSearch 기본 검색 기능 개발
Tech Stack
C#
WinForm
MSSQL
Access
ElasticSearch
국립국어원 국어 말뭉치 구축 지원 도구 개발/유지보수
이르테크
2018.04. ~ 2019.12.
Description
국립국어원의 SI 사업으로 자연어 처리에 필요한 한국어 말뭉치를 구축하는 툴의 개발/유지보수를 진행하는 프로젝트입니다.
Experience
한밭대 협업 기능(음석 묵음 탐지 및 음성 파일 분할) 연동 및 품질 테스트
구축 도구 유지보수 및 추가 기능 개발
Tech Stack
C#
WinForm
MySQL
교육
대전보건대학교
대학교(전문학사) | 바이오정보
2012.03. ~ 2017.02. | 졸업
명석고등학교
고등학교
2009.03. ~ 2012.02. | 졸업
자기소개
코드 품질을 개선하기 위해 아토믹 디자인 패턴 적용
프로젝트 규모가 점차 커짐에 따라 코드 품질은 지속해서 저하되었습니다. 커뮤니케이션의 오류로 쌓이면서 중복된 컴포넌트가 발생하여 재활용성이 감소하고, 코드 중복도 빈번해지는 상황이었습니다. 이를 개선하기 위해 더 확실한 컴포넌트 분류 기준이 필요하여 아토믹 디자인 패턴 도입을 결정하였습니다. 시작은 기초적인 규칙을 설정하고, 규칙을 토대로 작은 단위부터 분리하여 작성하였습니다. 적용이 진행됨에 따라 중복되는 컴포넌트가 없어지고, 컴포넌트의 단위에 따라 분류되어 탐색도 간편해졌습니다.
원활한 협업과 일관성 있는 UI를 위한 디자인 시스템 구축
여러 프로젝트를 동시 개발/유지보수를 진행하게 되면서 많은 커뮤니케이션이 자연스럽게 발생하게 되었습니다. 팀원들과 디자이너와의 지속적인 커뮤니케이션 속에서 발생하는 오류들로 UI의 일관성을 해치는 경우가 발생하기도 하였고, 그 부분들을 해결하기 위한 과정이 추가적으로 발생하였습니다. 자연스럽게 품질이 저하되고 개발 속도도 저하되는 악순환이 되었습니다. 이러한 이슈들을 해소할 방안으로 디자인 시스템을 도입하였습니다.
개발의 병목을 최소화하기 위한 개발 방식 도입
스타트업뿐만 아니라 어디에서든 개발은 항상 여유롭지 않습니다. 당연하게도 프론트엔드팀과 백엔드팀이 개발 병행은 필요한 일이었습니다. 원활하게 진행되기위해서 백엔드팀과 긴밀히 협력하여 API 스펙 문서 작성 라이브러리인 "Swagger"를 통하여 API 스펙을 사전 정의하고 스펙을 토대로 API가 개발되는 동안 프론트엔드팀은 Mock API를 작성할 수 있는 "MSW" 라이브러리를 기반으로 Mock API를 작성하여 개발이 백엔드 구현 상황에 종속되지 않도록 진행하여 개발 일정을 준수할 수 있었습니다.