안녕하세요, 6년차 프론트엔드 개발자 최나실입니다.
1.
사용자 관점에서 고민하고 요구사항을 발굴합니다.
현재 참여 중인 '식스샵 프로' 서비스를 통해 만든 스토어를 직접 운영하며, 판매자가 실제로 겪는 불편함과 개선점을 발견했습니다. 지난 겨울동안 22개의 버그와 26개의 개선사항을 건의했고, 이 중 다수가 제품에 빠르게 반영되어 서비스 품질 향상으로 이어졌습니다.
이러한 경험은 단순히 주어진 요구사항을 수행하는 것을 넘어, 사용자의 관점에서 비즈니스 요구사항을 능동적으로 탐구하고 실질적인 가치를 만드는 데 도움이 되었습니다.
2.
업무 효율화를 통해 생산성을 높입니다.
프론트엔드 개발자들이 공통 모듈과 디자인 시스템을 공유할 수 있도록 나뉘어있던 레포지토리를 통합하고, 모노레포에 앱을 추가할 때마다 발생하는 중복 작업을 최소화하기 위해 보일러플레이트를 생성하는 스크립트를 작성하여 30분 이상 드는 작업 시간을 10초 이내로 줄였습니다. 또한, code generator를 도입하여 백엔드와 타입 정의를 각각 하는 공수를 줄였고, GitHub Actions 스크립트를 개선하여 평균 빌드 시간을 43% 가량 단축했습니다.
3.
주도적으로 업무하고 상황에 따라 리더십과 팔로우십을 유연하게 발휘합니다.
웹 빌더 프로젝트 초기에는 팀원으로 합류했지만, 업무 프로세스 정립이 필요한 상황을 파악하고 스프린트 플래닝 방식과 업무 프로세스를 제안하는 등 적극적으로 의견을 제안했습니다. 이러한 주도적인 태도를 인정받아 자연스럽게 TL 역할을 맡게 되었고, TL로서는 제품 설계와 일정 관리를 주도하여 오픈 베타까지 성공적으로 이끌었습니다. 이후 프론트엔드 챕터 리드를 맡아 개발 환경 개선과 협업 프로세스 효율화에 집중했습니다.
또한 팀원으로 참여한 프로젝트에서는 주어진 업무를 빠르게 처리하는 것은 물론, 제품의 잠재적인 문제점을 선제적으로 발견하고 공유하여 팀의 성과에 기여했습니다.
Career
식스샵
(재직 중) 2020.10~
온라인 창업을 준비하는 초보 판매자들이 보다 손쉽게 온라인 비즈니스를 시작하고 성장해 나갈 수 있는 올인원 쇼핑몰 플랫폼 서비스 제공
1. ‘식스샵 프로’ 커머스 웹 빌더 및 테마 시스템 개발
•
에디터 기능 개선 / 2024.08~
에디터 사용성 개선 및 커스텀 기능 확장
Next.js styled-components
◦
블록 개념 도입: 섹션의 하위 요소 제공으로 커스텀 기능 확장
◦
CSS setting 추가: GUI로 CSS 속성 설정
◦
커스텀 페이지 slug 설정
◦
에디터 패널 개선
◦
테마 목록, 테마 보관함, 미리보기 개선
•
신규 테마 개발 및 기능 개선 / 2023.11~2024.07
다양한 쇼핑몰 디자인 템플릿과 세부적인 커스터마이징 기능 추가
Nx Next.js CSS Modules
◦
웹사이트와 테마 로직 분리: SSR과 라우팅은 웹사이트 앱에서 처리하고, 디자인은 각 테마별 라이브러리에서 관리
◦
스타일 적용 방식 개선: styled-components를 CSS Module로 전환 및 global CSS 컴파일 스크립트 추가
◦
테마 생성 스크립트 작성: 기본 보일러플레이트가 포함된 코드베이스 자동 생성으로 작업 시간을 1시간에서 30초로 단축
◦
접근성과 개발 생산성을 고려한 테마별 디자인시스템 개발
•
‘식스샵 프로’ 웹사이트 커머스 기능 개발 / 2022.11~2023.10
쇼핑몰의 주요 커머스 기능 개발
Next.js React Query
◦
인증, 소유 채널 취소, 반품 프로세스 구현
◦
네이버 웹마스터, 구글 서치 콘솔 연동
◦
쿠폰 결제 및 쿠폰 자동 지급 기능 구현 등
•
‘식스샵 프로’ 에디터 개발 및 테마 시스템 설계 / 2022.03~2022.10
복수 테마 구조 설계 및 기존 제품보다 UX가 향상된 에디터 개발
Nx Next.js Apollo Client React Query Jotai styled-components MSW
◦
테마 시스템 관련 데이터 모델링
◦
스키마 기반 세팅 시스템을 적용한 웹 빌더 에디터 설계
◦
디자이너가 테마 템플릿을 직접 배포할 수 있도록 시스템 설계 및 작업
◦
복수 테마 제공을 위한 구조 설계
2. 프론트엔드 공통 업무
•
MSA 구조에 맞춰 프론트엔드 앱 분리
Webpack
◦
프론트엔드 앱 간 의존성 및 프로젝트 구조 정의
◦
신규 앱 생성 스크립트 작성: 기본 보일러플레이트와 Module Federation 설정이 포함된 코드베이스 자동 생성으로 작업 시간을 1시간에서 10초로 단축
•
Nx 기반의 모노레포 개발 환경 구성
Nx
◦
◦
라이브러리 간 위계 및 의존성 방향 정리
•
프론트엔드 직군 매니징 및 프론트엔드 공통 업무 / 2023.01~2023.12
직군 단위 표준 수립 및 개발 프로세스 최적화
◦
프로젝트 주요 스택 선정 및 코드 컨벤션과 코드리뷰 가이드 작성
◦
안정적인 배포를 위한 GitHub Actions 설정 및 빌드 속도 개선
◦
배포 관련 협업 (정적 배포, 모노레포 처리) 및 Jenkins Pipeline 개선
◦
환경 변수 관리 방식으로 AWS Parameter Store 적용
3. ‘셀러리’ 개발
(*’셀러리’: 모바일에서 상점을 개설하고 꾸밀 수 있는 웹 빌더 서비스 (현재 서비스 종료))
•
링크 결제 서비스 ‘셀러리’ 개발 / 2021.08~2022.03
모바일에서 상점을 개설하고 상품을 등록하면 링크가 생성되는 서비스
React React Query Zustand styled-components
◦
커머스 기능 개발: 배송비 설정, 구매수량 설정, 이미지 최적화, 토스페이먼츠 연동 및 결제 등
◦
Redux Saga를 React Query로 변경
◦
•
모바일 웹 빌더 '샵꾸' 개발 / 2020.11~2021.08
템플릿을 제공하며 블록 단위로 칼라, 폰트 등의 커스터마이징 지원
React Redux Redux Toolkit Redux Saga styled-components
◦
프로젝트 컨벤션 정리 및 프로젝트 세팅
◦
재사용과 확장성을 고려한 공통 컴포넌트 작업
◦
에디터 기능 개발: 블록 관리, 스타일 편집, 미리보기, 발행하기 등
◦
2차례의 UT(Usability Test)를 통해 사용성에 대한 피드백 수렴: 공통 템플릿 수정, 미리보기 방식 변경
퍼플네스트
2019.05~2020.10
반려동물 전문 커머스인 '퍼플스토어' 제공
•
리액트 기반 프로젝트 세팅 및 프론트엔드 리팩토링 / 2020.06~2020.10
Django 템플릿으로 작업되어있던 프론트엔드 리팩토링 및 리액트 기반 프로젝트 세팅
React Express Webpack Redux Redux Saga styled-components
◦
Webpack, Express를 사용하여 SSR 세팅
◦
Redux, Redux Saga를 이용한 상태 관리 시스템 구축
•
반려동물 커머스 '퍼플스토어' 백엔드 및 프론트엔드 개발 / 2019.05~2020.05
기존 PHP 기반의 스토어를 Django 베이스로 리뉴얼하고 오픈하는 전 과정 참여 (현재 서비스 종료)
Django Javascript SCSS
◦
ORM을 활용한 데이터베이스 모델링 및 API 구현
◦
마크업 및 자바스크립트 로직 구현 (Django 템플릿, SCSS)
◦
커머스 기능 개발: 인증, 아임포트 결제, 카카오페이, 소셜로그인 연동 등
◦
모니터링 편의성을 위해 네이버 검색결과 크롤링 후 사내 알람 시스템에 연동
◦
마케팅 효율화 및 모니터링을 위한 GTM, GA 작업