Finnq

• 2023.08 ~ Present
• 주요 서비스 : 핀크(하나금융그룹이 만든 핀테크 전문 기업)
• 기술 스펙 : HTML, Scss, React, Vue, Typescript, Gitlab

디자인 시스템

2023.09~2023.12 / Vue, React, Vite, Storybook, Scss

• Foundation : Typograhpy, Color, Icons
• Components : 24종
• Framework : Vue, React

전자문서지갑

2023.10 / Vue2, Storybook, Scss

• 디자인 시스템을 적용한 첫 프로젝트

자동차보험비교

2024.01 / React, Storybook, Scss

• React 로 만든 디자인 시스템을 처음으로 적용한 프로젝트
• 마크업 페이지 모두 스토리북으로 정리하여 기획자/디자이너 공유
• 작업분량 : 13 페이지, 모달 케이스 10종
• 디자인 시스템 기반으로 작업할 수 있어서 빠른 마크업 가능

핀크 웹사이트 리팩토링

2024.02 / React, Next.js, Scss, GA4

• 자발적 프로젝트로 진행하였음
• 전체 코드 리팩토링 (스타일 파일 용량 -60% 감소), 공통 코드 컴포넌트화
• 카드/대출 등에 적용된 탭별 상품에 url 분기처리가 되어있지 않아 불편했던 점을 셀프 개선
• ui.css 등 예전 스타일 모두 걷어냄, 중구난방이던 레거시 폰트 걷어내고 SUIT 폰트 통일
• 개인정보처리방침 등 약관 페이지 마크업 컨벤션 리팩토링
• SEO 개선
• 구글애널리틱스4 적용 (페이지별 조회수, 접속 디바이스 및 화면 해상도 확인용)
• 타이틀 앞에 상세 페이지 명시 ( 대출 | 뱅크 말고, 핀크 - Finnq ) / 기존엔 모두 같았음

금융상품탭 개선

2024.03 / Vue2, Storybook, Scss

• Vue2 디자인 시스템 컴포넌트로 작업하여 빠르고 효율적인 마크업 작업 가능
• 컴포넌트 자체의 완성도가 올라갈 수록 디자인 필터링 (디자인이 의도대로 마크업이 되었는지) 에 걸리는 공수가 현저히 줄어듬 -> 해당 의견에 동의하는 디자이너 피드백 받음
• 적은 페이지지만 API 연동하여 간단한 페이지 구현을 시작해 봄

위딩

2024.04 / Vue2, Storybook, Scss

• Vue2 베타 릴리즈 전 전체 마크업 QA
• 외주사에서 중구난방으로 해놓은 마크업 정리
• 디자인 통일되지 못한 부분까지 체크하여 마크업/디자인 정리

어그리

2024.05 / Vue3, Storybook, Scss

단순 화면 UI 개발을 넘어 기본적인 컴포넌트 동작까지 가능하게 함

• 버튼 클릭시 이벤트 연결되도록 사전작업
• 기획서를 반영한 특정 동작 시 모달 오픈 등 가이드 제공
• 마크업 화면에서도 RAW 데이터를 활용해서 스펙에 맞게 가공 후 정보가 뿌려지도록 선 개발
• 실제 API는 가공된 값이기 때문에, 선개발 내용이 반영은 안됐지만 로직 개발에 관심을 갖고 해보려고 함
• IntersactionObserver API를 활용한 인터랙션 개발 (계약 상세 '내 의견 남기기')
• Dynamic Height Textarea 개발 (타이핑 되는 영역에 따라 동적으로 height 증가)
• HTML TO PDF : 계약서 저장하기 (XML 스타일의 Table 코딩 + inline style)
• 동료 개발자 분들이 만들어주신 Vue3 Store를 활용한 페이지 개발