2024년 1월 31일 업데이트됨.
이력서
소개
2018년 4월 군 전역 후 바로 웹 개발의 세계에 빠져들었고, 지금까지 5년 이상 개발을 해오면서 3년이 넘는 경력을 쌓았습니다.
더 게으르게 개발하기 위해, 더 부지런히 공부하는 것을 항상 모토로 삼고 있습니다. 더 빠르고, 더 완성도 있는 개발을 함으로써 여유 있는 개발자의 삶을 살고 싶습니다.
주로 Front-end 개발자로 일하는 것을 선호합니다. 다만 풀스택으로 개발해본 적도 있기 때문에 어느 정도 소통 가능한 백엔드 지식은 있는 편입니다.
가장 최근에 SaaS를 혼자 운영했다가 정리하고, 일간 ProductHunt라는 사이드 프로젝트 등을 개발 및 운영하고 블로그를 정리해나가며 커리어를 이어나가고 있습니다.
Next.js, TypeScript, TailwindCSS를 사용한 빠른 개발에 자신이 있습니다.
기술
Front-end
- Next.js
- Typescript
- TailwindCSS
- Recoil
- React.js
- Redux
- Vue.js
Back-end
- Node.js
- PostgreSQL
- MySQL
Infrastructure
- Vercel
- Supabase
- Firebase
- AWS
경력
피들
프론트엔드 개발
페칭
프론트엔드 팀장
- Next.js를 필두로 다수 웹 서비스 개발
- Vercel을 통해 직접 FE 팀에서 인프라 구축 및 운영
- Headless UI의 합성 컴포넌트 설계 방식을 도입, 컴포넌트 구조 설계 방식을 더 직관적이고 효율적으로 업그레이드
- 개인적으로 공부했던 Tailwind를 프로젝트에 도입하여 개발 속도 개선. Figma를 사용하는 디자이너와의 소통 효율도 상승. 직접 컴포넌트들을 만들기 시작하면서 UI 및 웹 접근성에 대한 이해도를 팀 전반적으로 업그레이드
- 복잡한 Redux 대신 새로 등장한 Recoil 도입 후 시간과 코드량 단축 및 직관적인 유지보수화
- 프론트 동료 개발자들과의 코드 리뷰를 주선하여 협업 및 코드 퀄리티 개선
프로젝트
커머스 웹 이전 및 유지보수 (2021.09 - 2022.08)
- 메인 서비스. 카페24로 운영 중인 것을 Next.js로 이전 및 개발 유지보수
- 프론트 팀장으로서 리드
- 프론트 2명, 백 2명, 디자이너 2명, PM 1명과 협업
- 기여도 33%
- 링크
- 개발환경
- Vercel
- 개발 언어 및 라이브러리
- Next.js, TypeScript, Tailwind, Emotion, Recoil, SWR
- 주요 업무
- 상품 리스트, 브랜드 리스트, 프로모션 리스트 이전 및 유지보수
- 기획전, 세일, 이벤트, 리뷰 페이지 개발
- 이전 완료 후 전체 페이지 유지보수
- 주요 성과
- 각종 검색 리스트에서 좋은 사용자 경험을 위해 모든 카테고리를 쿼리스트링화하여 관리
- 상품이 많고 객단가가 높은 점을 고려하여 상품 클릭 시 페이지 이동이 아닌 새 창 클릭으로 전환
- 자사의 상품이 최저가임을 확신하지 못하는 유저를 고려해 네이버 검색 api를 활용, 다른 쇼핑몰과의 가격 비교를 함으로써 구매 전환율 상승에 기여
- 데이터가 잘 변하지 않는 브랜드 리스트 등의 페이지는 정적 증분 생성 렌더링을, 상품 가격이 중요한 상품 상세 등의 페이지는 동적 렌더링을 적용하는 등 경우에 따라 페이지 생성 전략 다분화
어드민 이전 및 유지보수 (2021.09 - 2022.08)
- 모든 데이터를 관리하는 어드민
- 프론트 팀장으로서 리드
- 프론트 2명, 백 2명, 디자이너 2명, PM 1명과 협업
- 기여도 33%
- 개발환경
- Vercel
- 개발 언어 및 라이브러리
- Next.js, Typescript, Tailwind, Ant Design, Recoil, SWR
- 주요 업무
- 주문 관리와 고객 관리 페이지 이전
- 파트너센터 관련 페이지 개발
- 이전 완료 후 전체 페이지 유지보수
- 주요 성과
- 주문 상세의 발주 정보 페이지에서 가격을 계산하기 위한 로직을 구체화. 관부가세 등의 세금, 프로모션 및 쿠폰 등 할인, 배송비 및 경유지 수수료, 환율 등까지 모두 계산해서 최종 가격 계산
- 상품 가격의 경우 해외 명품은 가격 변동이 심하고 환율이 매번 바뀌기 때문에 SWR을 도입하여 캐싱 및 주기적인 데이터 최신화 적용
파트너센터 신규 구축 (2022.02 - 2022.08)
- 자사에 입점할 파트너들을 위한 관리 페이지
- 프론트 팀장으로서 리드
- 백 1명, PM 1명과 협업
- 기여도 50%
- 개발환경
- Vercel
- 개발 언어 및 라이브러리
- Next.js, TypeScript, Tailwind, Recoil, SWR
- 주요 업무
- 로그인, 파트너 가입 등 인증 페이지 및 로직 구현
- 주문 관리, 상품 관리, 공지사항 관리, 리뷰 관리, 정산 관리, 매니저 관리 페이지 개발
인슈넷
개발 팀
- React 혹은 Next.js를 이용한 웹 프론트엔드 유지보수 및 신기능 추가
프로젝트
보험 가입 및 상담 서비스 유지보수 및 신기능 추가 (2019.09 - 2020.10)
- 보험에 대한 지식과 비교 견적 등을 제공하는 메인 서비스
- 백 1명과 협업
- 기여도 50%
- 개발환경
- AWS
- 개발 언어 및 라이브러리
- Next.js, TypeScript, Material-ui, Redux, Mobx, Storybook, Jest
- 주요 업무
- 보험 상품 및 설계사에 대한 검색 엔진 최적화(SEO) 개선
- 보험 상품, 보험 용어 등의 페이지들을 정적 렌더링으로 전환
- 코드 리팩토링 및 성능 개선
- 주요 성과
- TypeScript를 도입하여 코드 퀄리티 상승
- Storybook을 도입하여 UI Design에 관한 소통의 부담 절감
- Jest를 도입하여 배포 시 발생할 오류 축소
- 복잡한 Redux를 MobX와 Redux-toolkit로 변경해 가면서 코드 퀄리티 상승과 코드량 절감
보험 설계사 플랫폼 유지보수 및 신기능 추가 (2019.09 - 2020.10)
- 고객과 설계사들을 연결하는 플랫폼
- 백 1명과 협업
- 기여도 50%
- 개발환경
- AWS
- 개발 언어 및 라이브러리
- Next.js, TypeScript, Material-ui, Redux, Mobx
- 주요 업무
- 내 보험 조회, 보험 상품 및 보험사 검색, 고객과 설계사간 채팅 상담 서비스 개발
- 주요 성과
- 보험 가입을 온라인으로 간소화하기 위한 PDF에 서명(이미지) 기능 개발, CS가 기존에 전화로 진행했던 일들을 절감
어드민 유지보수 및 신기능 추가 (2019.09 - 2020.10)
- 모든 데이터를 관리하는 어드민
- 백 1명과 협업
- 기여도 50%
- 개발환경
- AWS, Firebase (인증)
- 개발 언어 및 라이브러리
- CRA, TypeScript, Ant Design
- 주요 업무
- 보험 지식, 상품, 회사 데이터 관리 페이지 유지보수
- 유저와 설계사 관리 페이지 유지보수
팀블라인드
마이비스킷 팀
- 직장인 강의 플랫폼 신규 구축
- Nuxt.js, Element-ui를 사용한 신규 웹 서비스 프론트엔드 개발
- Node.js, MySQL을 사용한 백엔드 개발 보조
프로젝트
커머스 웹 (2019.02 - 2019.06)
- 백 1명, PM 1명, 마케터 1명, 디자이너 1명, CS 1명, 퍼블리셔 1명과 협업
- 기여도 50%
- 개발환경
- AWS
- 개발 언어 및 라이브러리
- Nuxt.js, Element-ui, Node.js, MySQL
- 주요 업무
- 강의 탐색, 강의 시청, 강의 구매결제, 내 정보 및 주문 정보, 이벤트 페이지 구현
- 강의를 장바구니에 넣고, 나이스페이먼츠를 통해 결제하는 로직 구현
- 강의 시청 시 이전에 시청했던 위치로 바로 가도록 적용
- 쿠폰을 발행하고 타임세일을 적용
어드민 웹 (2019.02 - 2019.06)
- 백 1명, PM 1명과 협업
- 기여도 90%
- 개발환경
- AWS
- 개발 언어 및 라이브러리
- Nuxt.js, Element-ui
- 주요 업무
- 유저 관리, 강의 및 챕터, 강의 옵션 관리, 리뷰 관리, 배송 및 결제 기록 관리, 배너 관리, 비디오 관리, 강사 관리 페이지 구현
메인 서버 개발 보조 (2019.02 - 2019.06)
- 백 1명과 협업
- 기여도 10%
- 개발환경
- AWS
- 개발 언어 및 라이브러리
- Node.js, MySQL
- 주요 업무
- passport를 사용하여 인증 로직 구현
- SQL 작성 보조
강남엄마
백엔드 단기 알바
- Node.js, MySQL를 사용하는 서버 개발 보조
프로젝트
메인 서버 개발 보조 (2019.01 - 2019.02)
- 풀스택 1명과 협업
- 개발 환경
- AWS
- 개발 언어 및 라이브러리
- Node.js, MySQL
- 주요 업무
- 선생님 테이블 추가 및 학원에 테이블 연결
- 학원 조회 시 연관된 선생님과 학원 불러오는 SQL 작성
- 특정 선생님의 이력 및 연결된 학원 불러오는 SQL 작성
프로젝트
Pricing of Tools
1인 프로젝트
온라인 익명 투표
1인 프로젝트
개인 모노레포
1인 프로젝트
- Turborepo를 통한 모노레포 구축
- Next.js로 3개의 웹 서비스를 단일 리포지토리에 서브 프로젝트로 구축
- Commitlint로 일관성 있는 커밋 메시지 적용
- Vercel로 웹 호스팅
- 깃허브
프로젝트
링크 인 바이오 (2023.07 - 진행 중)
- bento.me의 UI를 참고한 나만의 링크 인 바이오
- Next.js 13 (App Router), Tailwind, TypeScript 사용
- Notion API를 사용하여 블로그 글 연동
- 구글 애널리틱스 API를 사용하여 방문자 수 노출
- 카카오맵 SDK를 이용하여 점심메뉴 찾기 페이지 구현
- tiptap 에디터를 이용하여 새로고침 시에도 내용이 사라지지 않는 메모 페이지 구현
- 링크
아카이브 (2023.07 - 진행 중)
- 지금까지의 개발 노하우, 지식들을 글로 정리해 놓은 프로젝트
- ContentLayer를 사용하여 CMS 구축
- 링크
워크샵 (2023.08 - 진행 중)
- 개인 프로젝트에 사용하는 컴포넌트를 모아놓은 프로젝트
- Vite, Storybook으로 퍼블리싱
- 링크
피드뱅크
1인 창업
- 방문자로부터 웹 사이트 모든 페이지에서 피드백을 수집할 수 있는 위젯을 제공하는 SaaS
- 피드백 전달 시 내용과 유형, 현재 url, 브라우저 정보, 운영체제 정보, 디바이스 정보도 같이 저장
- Next.js, Tailwind, TypeScript로 프론트엔드 개발
- Supabase를 이용하여 인증, Postgres 데이터베이스 구현
- Vercel로 웹 호스팅
- 페이스북, 구글 광고를 사용하여 유료 마케팅
- 디스콰이엇, 프로덕트헌트를 통해 홍보
프로젝트
www. (2022.08 - 2023.03)
- 메인 서비스. 온보딩과 운영자 어드민 페이지 제공
- Next.js, Tailwind, TypeScript 사용
- i18n을 통해 다국어 처리
- 새 피드백 등록 시 슬랙과 이메일을 통해 운영자에게 전달, 노션을 통해 저장
- 유형과 색상, 위젯 위치, 라벨, 로고를 직접 운영자가 커스텀할 수 있도록 제공
cdn. (2022.08 - 2023.03)
- 운영자의 웹 사이트에 맞춤형 위젯을 설치할 수 있도록 스크립트로 제공
- TypeScript, Webpack 사용
plugin. (2022.08 - 2023.03)
- CDN을 통해 생성된 위젯의 UI 및 로직을 담당
- Next.js, Tailwind, TypeScript 사용
blog. (2022.08 - 2023.03)
- 콘텐츠 마케팅을 위한 블로그
- Gatsby, Tailwind, TypeScript 사용
admin. (2022.08 - 2023.03)
- 모든 데이터를 관리하는 어드민
- Next.js, Tailwind, TypeScript 사용
help. (2022.08 - 2023.03)
- 서비스 사용에 대한 가이드를 제공하는 문서 페이지
- Next.js, Tailwind, TypeScript 사용
link. (2022.08 - 2023.03)
- 약관, 업데이트 내역 등의 정적인 내용들만 따로 보관
- 메인 서비스의 성능에 영향을 주지 않기 위해 분리
- Next.js, Tailwind, TypeScript 사용
static. (2022.08 - 2023.03)
- 정적인 리소스들만을 보관
- Express 사용
extension (2022.08 - 2023.03)
- 모든 페이지에서 피드백을 보낼 수 있도록 하는 크롬 확장
- React, Tailwind, TypeScript 사용
학력
세종대학교
물리천문학과
2학년 1학기까지 다녔지만 전공과 지금 하는 일이 맞지 않고, 학업보다 개발에 뜻을 두고자, 현재는 제적된 상태입니다.