문제 해결에 가장 효율적인 기술을 선정합니다.
안녕하세요. 저는 프론트엔드 엔지니어 박한솔입니다. 저는 소규모 웹사이트부터 대형 애플리케이션까지 확장성과 성능을 갖춘 프론트엔드 프로젝트를 전문적으로 개발했습니다.
Angular 와 React 를 주로 활용하지만 문제 해결에 가장 효율적인 기술을 더 선호합니다.
오픈소스에서 배운 만큼 다시 오픈소스에 기여하는 것을 좋아하며 다양한 프로젝트를 진행하고 있습니다.
Skills
On-Premise 부터 PaaS, SaaS 까지 각 비즈니스 환경에 맞는 최적의 기술 스택을 구성할 수 있으며 프로젝트를 처음부터 끝까지 수행합니다.
FrontEnd
- Angular / React 기반의 웹 애플리케이션(CRA/SSG/SSR) 설계 및 개발
- ECMAScript / DOM API 기반의 프로젝트 설계 및 개발
- CommonJS / ES Module 모듈 라이브러리 개발
- Webpack / Vite 등 현대 웹 번들러 운용
- Electron, Tauri 등 데스크탑 애플리케이션 프로젝트 설계 및 개발
- Internet Explorer, Safari 등 크로스 브라우징 문제 대응
- IOS / Android 지원을 위한 WebView 프로젝트 설계 및 개발
DevOps
- Cloudflare / AWS / Azure 등 클라우드 플랫폼 배포 시스템 구축 및 비용 최적화
- Docker 기반의 컨테이너 배포 시스템 구축 및 관리
- Github Actions / Circle CI 등 CI/CD 환경 구축 및 관리
Key Technology Keywords
Typescript 
Angular 
React 
Webpack 
Jest 
Aws 
Docker Work Experience
스윗 코리아 based in 한국
프론트엔드 개발자
리치 텍스트 에디터 개발 리드
2023.10 - 2024.06
Swit 의 클라이언트별 에디터의 기능 차이를 개선하기 위해 모든 플랫폼을 지원하는 텍스트 에디터를 설계 및 구현했습니다.
- 기능별 모노레포 및 NPM 배포 시스템 구축
- ProseMirror 기반의 코어 에디터 구현
- WebView 기반의 Android / IOS 에디터 구현
- 크로스 브라우징 이슈 보완
- Docusaurus 기반 통합 문서 플랫폼 구현
통합 인증 솔루션 개발 리드
2023.01 - 2023.08
Swit 의 클라이언트별 개발 비용을 낮추고 동일한 기능을 제공하기 위해 통합 인증 솔루션을 설계 및 구현했습니다.
- 통합 인증 서비스 UI 구현
- MS / Apple / Google OAuth 연동
- Broadcast API 로 탭간 인증 정보 동기화 구현
- 웹 서비스용 세션 관리 클라이언트 라이브러리 구현
번역 시스템 개선
2022.08 - 2022.12
14개 국어를 효율적으로 지원하고 번역 데이터 관리를 위한 번역 시스템을 구축했습니다.
- ICU MessageFormat 도입으로 번역의 코드 의존성 제거
- 전체 데이터 자동화 작업을 위한 백오피스 구현
디자인 시스템 개발 리드
2022.04 - 2022.10
Swit 의 웹 서비스별 UI/UX 차이를 제거하고 비즈니스 개발 속도를 높이기 위한 디자인 시스템을 설계 및 구현했습니다.
- Modal, Layer, Virtual Scroll 등 다수의 컴포넌트 구현
- Github Actions 및 NPM 자동 배포 시스템 구축
- Storybook 으로 컴포넌트별 테스트 및 문서화 시스템 구축
업무 관리 시스템
2021.10 - 2022.06
Swit 의 기존 업무관리 시스템을 리뉴얼하고 대규모 성능 최적화를 진행했습니다.
- 업무 상태 정의 플러그인 구현
- Virtual Scroll 기반 칸반 / 트리 뷰 라이브러리 구현
- Layout Shifting 분석 및 최적화 진행
Work Experience
이파피루스 based in 한국
선임연구원
펜 입력 개선
2021.07 - 2021.09
사용자가 웹에서 자필로 서명을 입력할 수 있는 기능을 구현했습니다.
- 사용자의 펜 필기 입력 UI 구현
- 선형 보간법과 베지어 곡선을 통한 벡터 최적화
전자서명
2021.03 - 2023.07
사용자가 PDF 문서에 공동인증서로 전자서명을 할 수 있는 기능을 구현했습니다.
- 사용자의 전자서명 Form 및 프로세스 UI 구현
- 한국전자인증, 드림시큐리티 공동인증서 모듈 연동
플레이오토 based in 한국
풀스택 개발자
멀티 프레임워크
2020.08 - 2021.02
AngularJS 의 지원 중단으로 점진적 기술 교체를 위한 멀티 프레임워크 아키텍쳐를 구현해 성공적으로 도입했습니다.
- 라우팅별로 프레임워크를 전환할 수 있도록 구현
- 프레임워크 교체를 위한 마이그레이션 도구 구현
데이터테이블 라이브러리
2020.02 - 2020.08
기존의 JQuery 기반의 데이터테이블 라이브러리를 재구현하여 페이지 렌더링 성능을 크게 향상시켰습니다.
- 가상 스크롤 테이블 라이브러리 구현
- 앱 내 모든 테이블 라이브러리 교체
글로벌 쇼핑몰 통합
2019.09 - 2021.02
글로벌 쇼핑몰 통합 서비스의 풀스택 개발 업무를 진행했습니다.
- Ebay, Shopee 등 해외 쇼핑몰 API 연동
- 판매 단계별 상세 페이지 프론트엔드 UI 구현
Open Source
Edybara
브라우저를 위한 리치 텍스트 에디터 라이브러리를 만들고 있습니다. 기존의 ProseMirror 를 쉽고 빠르게 비즈니스에서 도입할 수 있도록 돕기 위한 프로젝트입니다.
- ProseMirror 기반으로 풍부한 기능과 확장성을 제공합니다.
- 모노레포 배포 구조로 기능마다 독립적으로 사용할 수 있습니다.
- 다양한 서식을 지원하며 사용자가 쉽게 커스터마이징할 수 있습니다.
Qdocs
애니메이션에 특화된 프레젠테이션을 만들 수 있는 도구입니다. 회사나 대외 활동에서 발표할 일이 많은 편인데 기존의 프레젠테이션 도구를 개선해 보기 위해 시작했습니다.
- 페이지가 아닌 애니메이션 장면(Scene) 단위로 프레젠테이션을 구성합니다.
- 오프라인 저장을 지원하여 브라우저가 지원되는 모든 환경에서 사용할 수 있습니다.
Vector Optimizer
웹에서 그린 그림을 더 자연스럽게 만들기 위한 유틸리티입니다. 터치나 펜을 통해 그림을 그리면 선이 삐뚤삐뚤해 보이는 문제를 해결하기 위해 시작했습니다.
- 사용자의 입력 좌표를 최적화하여 저장 효율을 높이고 렌더링 성능을 향상시킵니다.
- 베지어 곡선의 특성을 활용하여 사용자의 입력을 자연스러운 곡선으로 보정합니다.
VanilaRecyclerView
가상 스크롤을 통해 대용량 데이터도 빠르게 렌더링하기 위한 라이브러리입니다. 웹은 언제나 앱보다 느리다는 문제를 극복하기 위해 안드로이드의 RecyclerView 를 웹에서 구현했습니다.
- 전체 스크롤에서 사용자가 보는 스크롤 위치의 요소만 렌더링합니다.
- 스크롤을 벗어난 요소를 재사용해 스크롤 시 성능을 향상시킵니다.