Experience

• 네이버웍스

  네이버 통합 업무 플랫폼입니다. 게시판, 메일, 어드민, 앱 콘솔, 환경설정, 프로젝트, 문서 뷰어, 에디터 등 여러 서비스의 UI개발을 담당하였습니다.

  • react
  • vite
  • scss
  • gulp
  • nunjucks
  • 레거시 코드 리팩토링
    • 템플릿 엔진(Nunjucks)으로 컴포넌트 기반 개발 환경 구축하여 정적 페이지 산출물 공유 방식 유지하면서 모던한 개발 경험 확보
    • 수동으로 minify된 CSS를 SCSS로 전환하고 빌드 파이프라인 구축
    • 프론트엔드 개발 환경이 react로 전환되는 시점에 일부 컴포넌트를 공통화하여 유지보수성 강화
    • IE 지원 종료 후 에디터와 같은 공통 모듈을 Shadow DOM으로 변경하여 서비스 스타일과 충돌 방지
  • 웹 폰트 적용
    • FOUT 방식을 사용해 웹 폰트 로딩 전에 텍스트가 미노출되는 문제 해결
    • preload 옵션을 사용하여 렌더링 차단 시간 최소화
    • 다국어를 고려한 경량화된 서브셋과 다이나믹 서브셋으로 초기 로딩 속도 개선
    • font-smoothing 속성을 사용하여 저해상도 환경에서 발생하는 선명도 저하 대응
  • 모바일웹 다크 모드
    • CSS variables와 media query를 사용하여 다크 모드 대응
    • CSS image sprites와 mask 속성을 사용하여 이미지 리소스 절감과 색상 변경 대응
  • 모바일웹과 앱 UI 처리 책임 분리
    • 모바일웹(웹뷰)과 앱에 혼재된 iOS safe-area 대응과 스크롤 방지 로직을 CSS로만 구현하도록 개선하여 의도치 않은 런타임 이슈 제거
  • gulp에서 vite로 개발 환경 전환
    • CSS minify와 vender prefix 처리를 위한 gulp 라이브러리가 최신 CSS 문법을 지원하지 않아 발생하는 문제 해결
    • 약 4MB의 CSS 산출물 기준 빌드 속도 최대 3배 향상(7s → 2s)
    • 보일러 플레이트 저장소를 구성하여 신규 프로젝트 시작 시간 단축
  • 코드 리뷰 요청 프로세스 자동화
    • 사내 서버리스 플랫폼(lambda)과 github webhook을 활용하여 PR 생성 시 코드 리뷰 저장소에 자동으로 이슈를 생성하고 메시지봇을 통해 코드 리뷰 요청 알림을 전송하도록 개선
  • 모노레포 구조의 react 전환 파일럿 프로젝트
    • 파편화된 UI 통합과 기술 부채 해소를 목적으로 게시판 PC웹 서비스의 react 전환 파일럿 프로젝트 진행
    • CSS Modules 기반 CSS 코드 스플리팅으로 초기 로딩 성능 개선
    • 모노레포 구조로 공통 UI 컴포넌트를 패키지화하여 재사용성 향상
    • Storybook 기반 문서화를 통해 서비스 간 UI 파편화를 방지하고 디자인 시스템 기반 마련
• 네이버 PWE

  네이버 개인화 기반 서비스입니다. 메일과 캘린더, 공통 모듈(GNB, 에디터)의 UI개발을 담당했습니다.

  • scss
  • gulp
  • nunjucks
  • 메일 모바일웹, 태블릿웹, PC웹 통합 반응형 개편
    • 모바일과 태블릿, PC 통합 환경의 반응형 UI개발
    • CSS variables와 media query로 모바일 다크 모드 대응
    • IE10 지원을 위한 CSS variables fallback 코드 생성 플러그인 추가
    • 웹 접근성 전문가 진단 결과를 보통(75점 이상)에서 양호(85점 이상)로 개선
    • 보안 취약점(Contents Overwrite)을 CSS로 대응하여 방지
  • 캘린더 연말정산 페이지
    • 2023년도 연말정산, 2025년도 연말정산 페이지 UI개발
    • 인터랙션은 CSS animation으로 구현하였고, Cumulative Layout Shift(CLS)를 유발하는 속성 사용을 최소화하여 성능 최적화
• UI.VELO

  사내 UI 성능최적화 가이드를 기준으로 서비스를 진단해 볼 수 있는 도구입니다.

  • vuejs
  • nuxt
  • express
  • mongodb
  • mongoose
  • 상위 30% 평균 지표 환경별 세분화
    • 상대적으로 높은 점수가 나오는 PC 지표를 모바일 지표와 분리하여 환경별 상위 30% 평균 지표 산정
    • 모바일 상위 30% 평균 지표가 비정상적으로 높게 측정되는 문제 해결
  • 진단 로직 개선
    • 트랜잭션을 사용하여 진단 페이지 로그인 실패와 진단 결과 처리 로직을 안전하게 관리하도록 개선
    • 에러를 클래스로 추상화하여 일관된 상태 코드와 메시지를 반환하도록 개선