미리보기

샤플플로우.

Description

샤플, 하다 통합 디자인 시스템인 Shoplflow를 리드하여 개발했습니다. 오픈소스 프로젝트로 공개되어 있으며 하나의 언어를 만드는 것을 목표로 하고 있습니다. style, lint, util 등 사내에서 공통으로 사용할 패키지의 환경을 구축했으며 개발자의 시간을 절약하기 위해 버전관리, 테스트, 배포 등의 작업을 자동화했습니다. DX 중심의 compound component 패턴으로 컴포넌트를 설계했습니다.

What I did.

• 디자인 토큰들이 변경이 잦아 개발자가 직접 코드를 수정해야하는 비효율을 개선
  • Figma에서 디자인 토큰 편집시 npm 라이브러리에도 변경사항이 자동으로 반영되도록 CI/CD를 구축했습니다.
• 컴포넌트에 적절하지 않은 스멘틱 태그가 사용되는 문제를 해결
  • 개발자 경험과 유연한 시멘틱 태그를 제공하기 위한 Polymorphic 컴포넌트를 개발하여 개선했습니다.
• 아이콘을 추가로 등록하거나 수정할 때 개발자가 직접 코드를 수정하는 비효율을 개선
  • SVG 아이콘을 변경하거나 수정할 때의 비용감소를 위해 아이콘 컴포넌트 변환 SVG → RFC 자동화 스크립트 개발

TechStack

pnpm, Storybook, React, TypeScript, @emotion, framer-motion, turborepo

HADA Dashboard

Description

현장 시설 관리 서비스 하다의 대시보드 페이지를 개발했습니다. 유지보수를 비롯해 비즈니스의 요구에 맞는 다양한 기능을 개발했습니다. 사용자의 관점에서 생각하며, 적극적인 의견 제시로 기획이 변경되기도 했습니다.

What I did.

• 프로젝트 내부에 명세되지 않은 라이브러리를 참조하는 이슈 개선

  • 명세되지 않은 라이브러리를 참조하는 이슈를 yarn berry 도입으로 해결했습니다.

• 시설 그룹 필터 변경 후 UI가 프리징되는 이슈를 useTransition으로 90% 개선 (2s → 0.2s)

• 시설 필터 추가, 수정시 UX의 일관성을 위한 의견 제시로 기획 내용 변경

  • 시설 필터를 수정할 때 각 항목의 수정사항이 반영되는 시점이 다른 모달과 다른 문제가 있었습니다. 사용자에게 일관된 경험을 주기 위해 적극적인 의견 제시로 기획이 변경되었습니다.

• 지속 가능한 코드와 개발 문화를 만들기 위해 노력했습니다.

  • 코드 스타일의 일관성을 위해 공통 lint 규칙을 설정하고 코드 컨벤션 문서를 작성했습니다.
  • 주간 프론트엔드 회의를 주관하며 코드리뷰를 도입했습니다.

TechStack.

pnpm, Storybook, React, TypeScript, @emotion, framer-motion, turborepo

Description.

1인 개발로 제작한 커뮤니티 소개 및 지원사이트 입니다. 제작 이후 지원자 수가 50% 증가했습니다. 코드 리팩토링을 진행하며 React-lazy를 통한 최적화로 lighthouse 기준 performance 점수를 92점까지 향상시켰습니다. 내부 서비스들을 모노레포로 관리했습니다.

What I did.

• webpack → vite 번들러 변경으로 빌드 속도 67% 상승 (98.40s → 42.88s)
• 성능 개선을 위한 React-Lazy 적용
• SVG 모션 사파리 크로스브라우징 이슈 해결
• 포지션 별 지원하기 기능 개발
• 사용자 세팅에 따른 다크모드 적용 개발
• Github Action firebase Hosting/Preview 세팅
• Atmoic Design 패턴 적용

TechStack.

Yarn Berry, React, TypeScript, Styled-component, Recoil, Framer-motion

구글의 웹 기술 기반 개발자 커뮤니티인 GDG Korea WebTech의 Organizer를 맡고 있습니다.

2021.08 - 2023.07

Description.

Google Developers에서 지원하는 GoogleDSCDaejin University 챕터의 1기와 2기 리드를 맡아 운영했습니다.

• GDSC KOREA 2021 - 2022 우수 리드로 선정되었습니다.
• 커뮤니티 내부에서 사용하는 서비스들을 개발했습니다.
• 영어 닉네임을 도입하여 학번, 나이, 경력에 상관없이 수평적 문화를 조성하도록 노력했습니다.
• 충돌은 더 나은 환경을 만든다고 생각하기 때문에 모두가 생각을 피력할 수 있는 환경을 조성했습니다.
• 내부 활동을 마친 후 참여인원이 회고록을 작성함으로서 더 발전할 수 있는 환경을 만들었습니다.