image

권현진 (Hyunjin Kwon)

Frontend Engineer

3년 차 프론트엔드 개발자로 사용자 경험 개선과 인터랙션 구현에 흥미를 가지고 있습니다. 주어진 작업을 왜 하는지 이해하는 것을 중요하게 생각합니다. 개발자로서 비즈니스 가치를 구현하는 데 영향력을 발휘하며, 그 일에 집중하고 있습니다. 명확한 가이드라인 속에서 자유롭고 원활하게 소통할 수 있는 협업 환경을 선호합니다.

✉︎ kwonhyunjeen@gmail.com

📍 Seoul, Republic of Korea

📱821064713409

💻 github.com/kwonhyunjeen

WORK EXPERIENCE

image

루닛 | Frontend Engineer

2021.05 - 2023.07

SCOPE PD-L1, SCOPE IO 구현

Lunit SCOPE는 AI 기반 병리 이미지 분석으로 암 환자의 면역 치료 반응을 예측하는 의료 솔루션입니다. 사용자들이 결과를 직관적으로 확인하고 분석할 수 있도록 프론트엔드 인터페이스를 개발했습니다.

Tasks

  • Web Worker를 활용해 대용량의 AI 분석 결과(암 세포 및 조직 정보)를 Fetching
  • OffscreenCanvas를 사용해 암 세포 및 조직의 좌표와 범위를 가공하고, 이를 시각적으로 표현하기 위한 Overlay 이미지 생성
  • OpenSeadragon을 이용해 생성된 Overlay 이미지와 암 세포 및 조직 정보를 담은 Tooltip 등을 렌더링
  • 이미지 확대/축소 및 드로잉 등 뷰어의 핵심 UI 컴포넌트 개발
  • 메디컬 및 백엔드 팀과 AI 분석 결과를 효과적으로 시각화하기 위한 데이터 구조 설계

Achievements

  • Web Worker를 통해 UI 프리징 방지 및 대용량 분석 결과 처리
  • OffscreenCanvas로 이미지 렌더링 및 가공 속도 향상
  • 고해상도 이미지 확대/축소 등 이미지 뷰어 구현 경험
  • Web Worker, Canvas API, OffscreenCanvas API와 같은 기술을 학습하고 도입하여 성능 최적화 및 사용자 경험 개선에 대한 인사이트를 확보

Tech Stack

TypeScript, React, Redux, Wretch, Canvas, Web Worker, OpenSeadragon, Emotion, ESLint, husky, Vercel, Figma

OpenSeadragon React Renderer 패키지 개발 및 배포

이미지 뷰어 라이브러리 OpenSeadragon을 React 환경에서 사용할 수 있도록 컴포넌트로 래핑한 패키지 osd-react-renderer를 개발했습니다. OpenSeadragon API가 React 상태에 반응하고 API를 선언적으로 작성할 수 있어, React를 작성하는 경험 그대로 이미지 뷰어를 구현할 수 있습니다.

Tasks

  • 커스텀 React 렌더러 설계 및 개발 환경 구성
  • OpenSeadragon API와 대응하는 렌더러 내장 컴포넌트 개발
  • npm 패키지 배포 및 문서화
  • 지속적인 기능 업데이트 및 유지보수

Achievements

  • 효율적인 React 상태 관리로 UI 반응성 개선
  • react-reconciler의 작동 원리 이해
  • 이미지 뷰어 구현 시 유용한 도구로서 패키지의 활용도 증가
  • 타 팀에서도 도입하며 오픈소스로 기여 확장

Tech Stacks

TypeScript, React, OpenSeadragon, react-reconciler, npm

디자인 시스템 구축

Lunit의 모든 제품에 일관된 UI 제공을 목표로 LDS(Lunit Design System, Lunit 제품에서 사용하는 React UI Framework)를 개발했습니다.

Tasks

  • LDS 설계 및 React, Nx 기반 환경 세팅
  • UI 컴포넌트 신규 개발
  • 디자이너와 협업하여 색상 및 타이포그래피 디자인 토큰 설계 및 적용
  • Chromatic과 Storybook을 사용해 UI 컴포넌트의 자동 배포를 위한 GitHub Actions CI/CD 파이프라인 구축
  • 브랜치별 Storybook Permalink 자동 생성으로 UI 변경 사항 시각화

Achievements

  • 브랜드 일관성 유지
  • 3개의 제품에 LDS 적용 및 기능 구현 시간 단축
  • 디자인 토큰 업데이트만으로 스타일 변경을 모든 컴포넌트에 빠르고 일관되게 반영
  • Permalink 도입을 통해 디자이너와 신속하게 변경 사항을 검토하고 리뷰할 수 있는 협업 환경을 구축

Tech Stack

TypeScript, React, Storybook, Chromatic, styled-components, Emotion, Figma, npm

운영 성능 테스트(OPT) 개발

Lunit 제품의 AI 모델 정확도를 검증하기 위해 의사가 직접 암 조직 슬라이드를 분석하는 테스트 도구를 개발했습니다. AI 분석 결과와 비교하여 정확도를 평가하고 규제 승인 요건을 충족하기 위한 정량적 데이터를 수집했습니다.

Tasks

  • 유저 스토리 기반 개발
  • 사용자 행동 및 상태별 이벤트 로깅을 통해 슬라이드 분석 시간 측정 및 이상 행동 모니터링
  • 슬라이드 뷰어 구현

Achievements

  • 제품 성능 측정 및 개선
  • 규제 승인을 위한 데이터 수집
  • 사용자 경험 개선

Tech Stack

TypeScript, React, Redux, Wretch, Emotion, ESLint, Github Actions, husky, Vercel, Figma

SCOPE All-In-One 개발

Lunit SCOPE의 모든 제품을 하나의 통합된 시스템으로 결합하여 관리하는 프로젝트입니다.

Tasks

  • Keycloak을 활용한 로그인 및 인증 시스템 구현
  • Recoil에서 Jotai로 상태 관리 마이그레이션
  • Nx를 활용한 모노레포 시스템 도입
  • 실행 환경, 배포 CI/CD 구현
  • ESLint, Prettier 규칙 통합 패키지 개발

Achievements

  • Keycloak 학습 및 적용
  • 상태 관리 및 시스템 통합 개선
  • 코드 품질 유지와 팀 내 코드 일관성 강화

Tech Stack

TypeScript, React, React Query, Jotai, Axios, Keycloak, MSW, ESLint, husky, Vercel, Figma

image

수윗소프트 | UI/Markup Developer

2018.12 - 2019.08

사내 UI 컴포넌트 및 템플릿 마크업 프레임워크 개발

Description

개발자들의 일관된 UI 구축을 위해 공통 UI 요소를 모듈화하여 재사용 가능한 컴포넌트와 템플릿 프레임워크를 개발했습니다.

Tasks

  • 기획서와 디자인 시안을 바탕으로 공통 UI 컴포넌트와 템플릿 단위 설계
  • 컴포넌트와 기능별 대시보드 템플릿 구현
  • 마크업 프레임워크 개발 및 API 문서화

Achievements

  • 컴포넌트 재사용성 향상으로 프로젝트 내 중복 작업 최소화
  • 페이지 개발 시간 단축, 개발 속도 향상
  • 모듈화된 시스템을 구축으로 유지보수 작업의 효율성 개선
  • 고객 요구 사항 변경에 신속 대응, 프로젝트 안정성 강화

Tech Stack

HTML, CSS, JavaScript, jQuery

자사 웹 사이트의 웹 접근성 오류 검출 및 개선

Description

웹 접근성 품질 인증을 목표로 자사 웹 사이트의 접근성 오류를 검출 및 개선 작업을 수행했습니다.

Tasks

  • 1차 심사 불합격 후 심사 보고서 기반 접근성 문제 분석 및 오류 수정
  • HTML 구조 개선, ARIA 속성 추가, 키보드 네비게이션 최적화 등 시각적 및 기능적 접근성 개선 작업 수행

Achievements

  • 접근성 준수율 95% 이상으로 개선
  • 웹 접근성과 시맨틱 마크업을 통한 사용자 경험 개선 능력 습득
  • 접근성 관련 문제 해결 능력 향상

Tech Stack

HTML, CSS, JavaScript, Lighthouse

웹 사이트 마크업 및 유지보수

Description

맘스바디케어, 모두싸인 등 클라이언트 웹 사이트를 위한 마크업 작업 및 유지보수를 담당하여, 고객 맞춤형 웹 페이지를 제작했습니다.

Tasks

  • 클라이언트 요구 사항 분석, Design 팀과 협업하여 최종 레이아웃 및 구조 확정
  • 웹 서비스 마크업 작업 및 반응형 디자인 구현
  • 웹 표준, SEO 최적화 및 시맨틱 마크업 작성
  • CX 팀과의 VOC 데이터 분석을 통한 웹 서비스 개선 및 유지보수

Achievements

  • 다양한 디바이스에서 일관된 사용자 경험 제공
  • 웹 표준 및 접근성 준수로 클라이언트 사이트의 품질 향상
  • JavaScript와 jQuery를 활용한 다양한 인터랙션 프로토타입 경험
  • 고객 경험 향상과 장기 파트너십 강화

Tech Stack

HTML, CSS, JavaScript, Bootstrap, jQuery

팀 리드 및 Daily Scrum 진행

Description

개발팀 Daily Scrum을 진행하고, 클라이언트팀을 리드하며 팀 관리 업무를 맡았습니다.

Tasks

  • 팀원들의 업무 진행 상황 및 이슈 파악
  • 논의된 액션 아이템 문서화 및 공유
  • 서버, 디자인 팀과 협업하여 프로젝트 진행 상황 공유 및 방향 논의

Achievements

  • 팀 관리와 일정 조정을 통한 프로젝트 전반에 대한 책임감 강화
  • Backlog와 이슈 문서화를 통한 우선순위 조정 및 액션 아이템 관리 능력 습득
image

개인 프로젝트

2024.05 - 2024.09

KanbanWave

데모: https://kanbanwave.vercel.app

Kanban 보드 UI를 간편하게 구현할 수 있는 오픈소스 라이브러리입니다. 개발자는 라이브러리의 데이터 공급자를 통합해 손쉽게 Kanban 보드를 구성하고, UI와 테마도 원하는대로 커스터마이징할 수 있습니다.

Tasks

  • Kanban 보드, 리스트, 카드 생성 및 관리 기능 구현
  • 드래그 앤 드롭 기능을 사용한 항목 재정렬 구현
  • 외부 데이터 공급자를 통합할 수 있는 저장소 인터페이스 설계 및 개발
  • useSyncExternalStore를 사용하여 데이터 공급자와 UI 상태 동기화 구현
  • UI 컴포넌트 및 테마 커스터마이징 기능 구현
  • pnpm Workspaces를 활용한 모노레포 구성

Achievements

  • 외부 데이터 공급자의 형태에 구애받지 않고 Kanban 보드와 통합할 수 있는 구조를 설계하며 “의존성 주입” 개념 학습
  • 패키지와 앱의 개별 빌드 요구사항을 충족하기 위해 빌드 도구를 활용하여 최적화
  • CSS Variables를 활용해 커스터마이징 가능한 UI 테마를 구성해본 경험

Teck Stack

TypeScript, React, react-beautiful-dnd, tsup, pnpm Workspace

EDUCATION

컴퓨터공학 전공, 공주대학교 | 2017

숭의여자고등학교 | 2012

CERTIFICATIONS

Microsoft Student Partners 9기 | 2015 - 2016

정보처리기사 | 2015.07

SKILLS

LANGUAGES

icon
Korean 원어민
icon
English 중상

맞춤법 검사기 돌리고

모든 노션 페이지 아래에 이전 페이지 다음 페이지 UI 삭제하기