박예림
프론트엔드 개발자 | UX 엔지니어
소개
3년 차 프론트엔드 개발자로 B2B SaaS 스타트업의 초기 엔지니어로서 프로덕트의 프론트엔드를 제로베이스부터 개발하여 런칭했던 경험이 있습니다. 제품을 개발하는 과정에서 주도성을 가지고 사용자의 니즈와 제품 방향성을 고려한 기능을 빠르게 구현하였고, 기존의 UX 업무 경험을 최대한 활용하여 디자인 시스템화된 컴포넌트를 개발하고, 데이터와 실사용자의 의견을 기반한 사용성 개선에 기여하고자 노력하였습니다. 그 과정에서 Y Combinator 배치 선발과 약 19억 원의 투자 유치에 기여하였습니다.
릴레잇을 만들면서 사용자의 시각에서 필요한 기능을 구상하고 기술을 구현했기 때문에 사용자들이 제품을 더 편하게 활용할 수 있었다고 생각합니다. 사용자를 생각하고 새로운 방향성을 제공한 제품임을 인정받아, 프리시드 투자유치에 기여할 수 있었습니다. 완성도 높은 제품에는 기술 구현만이 다가 아니란 생각을 언제나 가지고 있어, 사용자 관점에서 제품을 설계하는 시각을 기르기 위해 UX를 독학하여 해당 분야에서도 기획자, 디자이너로서 업무를 했습니다.
초기 스타트업의 엔지니어로서 제품을 기획, 개발하는 것부터 출시 이후 유지보수를 해본 경험을 통해 소프트웨어 개발 라이프사이클과 사용자 친화적인 인터페이스를 만드는 것의 중요성을 깊이 이해하고 있습니다. UI/UX 디자이너 및 기획자로 일했던 경력을 토대로 사용성 데이터를 활용한 개선안 도출, 디자인 시스템 구현 및 협업 측면에서도 큰 도움이 될 수 있습니다.
업무 프로젝트
🏢 픽셀릭
Relate CRM Portfolio 🔗
2020.09 ~ 2023.02 (2년 7개월)
🪪 역할
프론트엔드 개발, 신기능 기획, 제품 UX 개선
💻 주요업무
[Relate 웹앱 런칭]
- 초기 멤버로서 사업 아이디어의 PMF(Product Market Fit)를 테스트하기 위해 Vue.js, Vuex, Vuex ORM을 이용하여 6개월 내에 MVP를 디자인하고 구현해 런칭에 기여
- Electron을 사용하여 크로스 플랫폼을 지원한 데스크탑 앱 Relate 개발
[Collaborative CRM 피쳐 개발]
- Vuex ORM Axios 플러그인을 사용하여 Stripe, Intercom, Hubspot 등 외부 서비스에 산재된 고객 정보를 한 페이지에 보여주는 대시보드 제작
- Gmail과 Nylas API 를 사용하여 마크다운 지원 및 첨부 파일 업로드 기능이 포함된 이메일 메세징 플랫폼 제작
- 개발 및 디자인한 이메일, 쓰레드 기능, 미팅 노트, 커스텀 고객 리스트, 첨부파일 다운로드 기능들을 통해 B2B 고객 관리 협업툴로서의 입지를 인정받아 성공적인 YCombinator 배치 선발 및 투자 유치에 기여
[코드 베이스 유지 보수와 코드 퀄리티 개선]
- Vuex 전역 상태관리, Vuex ORM의 데이터 쿼리를 적극 활용해 컴포넌트 간 불필요한 props 사용 케이스를 제거하고 가독성이 향상된 코드 산출
- Vue 2 -> Vue 3 코드베이스 업데이트에 기여하여 deprecated 코드 수정 및 문법 최적화
- 경량화 폰트 사용, Fallback 폰트 최적화, lodash 임포트 방식 수정 및 moment.js -> day.js 마이그레이션으로 번들 경량화
- Webpack -> Vite 번들러 전환에 기여해 앱 빌드 시간 60% 단축
- 라이브러리 검토와 도입, 제품 버전 및 업데이트를 주도적으로 관리하여 안정적인 상품운영에 기여
[UX/UI를 고려한 기능 구현]
- 사용자의 Flow state를 중요시하는 제품 비전을 따라 기능 인터랙션을 마우스 클릭과 키보드 숏컷 이벤트로 동시 지원하여 사용성 향상
- 새로운 기능 추가로 인해 발생할 수 있는 디자인 파편화를 줄이기 위하여 디자인 확장성과 유연함을 고려한 공용 UI 컴포넌트 시스템을 도입
- Ant design 라이브러리 컴포넌트와 LESS 변수, 믹스인을 사용하여 더 깨끗한 디자인 구조와 재사용성 유지
[유관부서 협업 및 프로젝트 관리]
- 백엔드 개발자와 협업하여 새로운 기능에 필요한 데이터 모델 구상, API 설계에 기여
- Growth팀과 함께 유저 온보딩 세션에 참여하여 사용성에 대한 의견을 모으고 이후 기능 업데이트에 개선된 UX를 반영
- UX 개선 사이클을 도입하여 Mixpanel 데이터를 기반으로 주기적으로 사용성 개선안을 제시
- 피쳐 단위로 기획-디자인-개발-QA 각 단계를 스스로 진행하고 이슈트래킹 툴 Linear를 이용하여 팀원들과 적극적으로 일정을 공유 및 관리
💡 활용기술
🏆 성과
- Closed Beta 런칭
- 약 19억 원 규모 프리시드 투자 유치 기여
- YCombinator S22 배치 선발
🏢 Sibel Health
ANNE Portfolio 🔗
2018.01 ~ 2020.07 (2년 7개월)
🪪 역할
UI/UX 디자인, iOS 앱 스토리보딩
💻 주요업무
- 미숙아 병동에 보급되는 건강 모니터 애플리케이션 ANNE의 UI/UX 설계 및 디자인
- 기존 모니터 플랫폼에 익숙한 의사들을 타겟한 사용자 인터페이스 레이아웃, 인터랙션 및 user flow 설계
- XCode 스토리보드를 사용하여 iOS 앱 스토리보드 초안을 개발해 개발자들에게 전달
- 제품 개선 목적을 위한 유저 테스트 가이드 공동 작성
💡 활용기술
🏆 성과
- 관련 병동에 어플리케이션 및 센서 제품 제공
- 얀센 코리아, Johnson & Johnson에서 개최한 Seoul Innovation QuickFire Challenge 우승🔗
- PNAs 논문 출판(공동저자)
- Comprehensive pregnancy monitoring with a network of wireless, soft, and flexible sensors in high- and low-resource health settings🔗
- Nature Medicine 논문 출판(공동저자)
- Skin-interfaced biosensors for advanced wireless physiological monitoring in neonatal and pediatric intensive-care units🔗
🏢 핏펫
핏펫박스
2020.02 ~ 2020.08 (7개월)
🪪 역할
서비스 기획, UX 설계, UI Wireframing
💻 주요업무
- 와이어프레임, 정보 아키텍처 및 사용자 경험 프로세스를 정의하여 건강 맞춤형 펫 상품 구독 시스템 프로젝트 아이디어 구상
- 경영진의 요구사항을 만족하기 위한 협업 방법론(figma version control, microsoft teams documentation, feedback meeting)을 팀에 제안하고 주도적으로 도입
- Miro를 이용해 프로그램 로직을 제품 마케팅 담당자와 개발자에게 전달하기 위해 각 팀의 니즈에 맞는 방식으로 도식을 제작하여 공유
- 매주 태스크 미팅을 실시하여 UI 디자이너 및 개발자에게 UX 피드백을 공유하고 팀 일정에 따라 우선순위 제안 및 협의
💡 활용기술
🏆 성과
- 서비스 런칭
Ahead 반려동물 소변검사 앱
2019.08 ~ 2020.08 (1년)
🪪 역할
UX 설계, UX 리서치, 사용자 데이터 수집
💻 주요업무
- 모바일 앱 내 전반적인 UX를 개선하고 안드로이드/iOS 기기별 UI 최적화
- 회원 db 통합을 위해 회원가입, 로그인 UX 플로우를 재정의하고 온보딩 프로세스를 개선
- Mixpanel, Google Analytics 및 Tableau와 같은 시각화 플랫폼을 활용하여 모바일 앱 및 웹 사이트 환경에서의 사용자 전환 흐름 관리
💡 활용기술
🏆 성과
- 온보딩 이탈률 34% 감소
- 앱 재접속률 102% 달성
🏢 Syngenta
Digital Signage
2018.04 ~ 2018.06 (2개월)
🪪 역할
프론트엔드 개발, UI/UX 디자인
💻 주요업무
- React, moment.js, Github API, CSS 애니메이션을 사용하여 사내 협업을 위한 남은 프로젝트 날짜 카운트다운과 깃헙 커밋 수를 보여주는 웹 어플리케이션 개발
- 사내 디자인 시스템과 Google Material Design 구조를 활용하여 회사의 브랜드 아이덴티티를 담아냄
💡 활용기술
🏆 성과
- 사내 디지털 게시판에 웹페이지 게시
MyLegacy Portfolio 🔗
2018.04 ~ 2018.12 (8개월)
🪪 역할
UI/UX 디자인, UX 리서치
💻 주요업무
- 현지 농업 종사자들이 필요로 하는 정보를 대시보드에 담아 보여주는 반응형 웹앱 MyLegacy 디자인
- Google Material Design 기반으로 UI 컴포넌트를 활용하여 user flow 설계
- 실사용자를 대상으로 한 사용성 테스트 세션 진행
- 실사용자의 니즈를 기반하여 제품 브랜딩 개선
- 앱 디자인 시스템 구축
💡 활용기술
🏆 성과
- 어플리케이션 런칭
- 30여명 실사용자와의 1-on-1 리서치 세션 리드
사이드 프로젝트 / 연구
유기동물 보호 게시 서비스
2023.03 ~ 진행중
🪪 역할
프론트엔드 개발, 프로젝트 매니징
💻 주요업무
[웹 어플리케이션 개발]
- Next.js, ReactJS, TypeScript, Emotion Styled Components를 활용하여 유기동물 정보 조회 웹 어플리케이션을 개발
- 농림축산검역본부 동물보호관리시스템 유기동물 정보 조회 API를 통해 유기동물 정보를 받아와 리스트, 카드 앨범 형태로 보여주는 뷰 개발
- Apollo Client로 GraphQL 데이터베이스 스키마를 적용한 회원가입, 로그인 기능 제공
- Custom hook을 사용해 동물 종류, 지역 등 복수 적용 가능한 필터 기능 구현
- Recoil 상태관리를 통해 로그인, 적용된 필터 데이터를 전역적으로 활용 가능하도록 개선
[협업 프로세스 정의]
- ESLint와 Prettier를 도입해서 코드 포맷팅을 정의해 협업에 도움
- 정기적인 페어 프로그래밍과 코드 리뷰를 통해 발생할 수 있는 에러를 미리 보완하고 코드 품질 상승
- Linear 태스크 관리 툴을 이용하여 업무 분담 및 진행 상황 체크업
💡 활용기술
Intelligent Interface for Seeing the World Through Different Lenses
2017.01 ~ 2018.12 (2년)
🪪 역할
프론트엔드 개발, UI/UX 디자인, UX 리서치
💻 주요업무
- HTML5, CSS3, JavaScript, jQuery 및 Angular를 사용하여 정렬된 주석을 효과적으로 시각화하기 위한 웹 페이지 개발
- 페이스북 뉴스 기사에서 Python BeautifulSoup를 사용하여 웹크롤하고 기사 및 덧글 데이터를 수집하며, Pandas를 사용하여 데이터를 키워드 기반 섹션으로 분류
- NodeJS와 Heroku를 사용하여 테스트 웹 사이트 게시를 지원
💡 활용기술
🏆 성과
- 50여명 테스트 사용자와의 1-on-1 리서치 세션 리드