웹 인터렉션 마법사 🪄
김무훈입니다.
오픈소스, 상호작용과 접근성, 개발자 경험에 관심을 갖고 이 세 가지를 만족을 하는 프론트엔드 엔지니어링 활동을 하고 있습니다.
2년여 동안 여러 스타트업을 거치며 웹 프런트엔드 엔지니어링을 주 업무로 경험했습니다.
업무 경험
펜슬컴퍼니
글 및 일러스트 창작 서비스 “Glyph” 출시 준비부터 약 6개월간 함께 했습니다.
팀원으로서 서비스 설계 방향과 사용성에 대해 꾸준히 의견을 냈습니다.
글 및 일러스트 창작 서비스 “Glyph”
- 위지윅 에디터 - 콘텐츠 서식 데이터 모델링과 편집 기능 구현 담당
- 글 본문 페이지 - 위지윅 에디터로 작성한 콘탠츠 뷰어 및 글 본문 공유 기능
유니크굿컴퍼니
인터렉티브 스토리텔링, 게이미피케이션 교육, 현실 증강(AR) 게임 서비스 "리얼월드"를 만드는 스타트업
콘텐츠 저작 기술 연구 개발 및 웹 서비스 구현과 관리를 경험했습니다.
제품 운영
- 게임 콘텐츠 저작 서비스 “리얼월드 스튜디오” 기능 연구 개발 및 운영 전담
- 리얼월드 앱 내 검색 웹뷰 개발, 메인 홈 웹뷰 관리
- 인 게임의 인터렉티브 웹뷰 관리
엔지니어링
- 오픈소스 위지윅 에디터 커스터마이징 및 확장 플러그인 개발
- Angular 로 만들어진 웹 서비스를 React 개발 환경으로 재구현
- 정적 사이트 생성(Static Site Generation) 기반 웹뷰 구현 및 관리
리얼월드 스튜디오 프론트엔드 독립화
백엔드 인프라와 종속된 프론트엔드 배포 환경을 분리하는 프로젝트에서 프론트엔드 파트 담당
- 분리 과정에서 Azure 바탕의 개발 환경을 GitHub 생태계 바탕의 서비스로 모두 이관
- ASP.NET Razor로 만들어진 기존 랜딩 페이지 에셋과 React 애플리케이션 사이의 라우팅에 Cloudflare Workers 활용1
- 프론트엔드 서비스 지속 배포에 Cloudflare Pages 활용
- GitHub Actions, GitHub Packages, Cloudflare Pages, Cloudflare Workers
홈 스크린 웹뷰 관리
초기 로딩이 느렸던 앱의 홈 웹뷰를 CSR에서 SSG로 이관된 이후 생긴 문제 해결에 기여, 홈 스크린 CMS 구현 및 관리
- Server-Driven UI 설계 방식을 일부 차용한 홈 화면의 CMS 구현
- 정적 생성 기반 다국어 지원 기능 추가 및 초기 로딩 경험 개선
- IOS 14 이하 Safari 브라우저 지원 작업
- Gatsby, React, Emotion, react-i18next, Gatsby Clould
검색 스크린 웹뷰 도입
네이티브 앱 개발 자원이 제한되는 상황을 대비하기 위해 미리 PoC 으로 검색 화면을 웹뷰로 옮기는 작업을 담당
- 웹뷰에서 네이티브 앱을 호출하는 브릿지 및 스키마 연동 작업
- 로딩 없이 초기 콘텐츠를 보여주기 위해 정적 웹 페이지 생성 도구 사용
- 웹뷰 UI를 기존 네이티브 UI와 동일하게 작업
- 현재까지도 프로덕션에 계속 활용 중. 웹뷰 링크
- Gatsby, React, Emotion, react-i18next, Clouldflare Pages
위지윅 편집기 기능 고도화
리얼월드 스튜디오 내의 위지윅 편집기의 기능을 사용자의 요구 사항에 맞추어 확장하는 작업 및 소통을 담당
- 기획 및 구현 과정에 주요 고객인 사내 게임 제작 구성원과 소통해서 제작 진행
- 글자 크기 목록 다양화, 자간 설정 기능, 선택한 색상 정보에 대한 시인성 향상 등 기존 편집기 기능 확장 지원
- 일부 기능은 사용하는 편집기 도구의 내부 소스코드 수정이 직접 필요해서 해당 기능을 덮어씌우는 형태의 외부 모듈을 만들어 지원.
- 사내 기술 블로그를 통해 당시 작업 과정을 소개하는 글을 작성했습니다.
리얼월드 스튜디오 리뉴얼
기존 서비스를 새 브랜딩 UI와 함께 처음부터 다시 구현하는 프로젝트에 참여
- Angular 애플리케이션을 역공학 하여 React 개발 환경으로 재구현하는 작업 담당
- 스프린트 주기로 2주일을 잡아 6개월을 동안 개발하여 론칭
- 론칭 이후 비즈니스 플랜 기능, 커뮤니티 기능 등 새 기능에 대한 기획 및 UI 디자인 구현
- 2023년 3분기 기준 외부 게임 제작자 포함 WAU 약 3백여 명의 서비스로 유지 중
- react-hook-form, Emotion, Storybook, Vite, Yarn 3, Azure Pipeline
플라네타리움
게임에 특화된 오픈소스 P2P 라이브러리와, 탈중앙화 오픈소스 레퍼런스 게임 Nine Chronicles을 만드는 스타트업
PoC로 만든 Electron 및 React 개발 환경의 게임 론처를 정식 제품으로 승격한 과도기 및 정신 출시가 얼마 남지 않은 시점에 인턴쉽으로 참여했습니다.
- 온보딩 과제로 블록체인 채굴과 서명 기능을 간단히 구현
- 블록체인 네트워크 탐색 웹 서비스 explorer.libplanet.io 유지보수
Nine Chronicles 론처
- 게임 론처의 이탈율을 10% 이내로 줄이는 “온보딩” 스프린트의 구성원으로 참여
- 종단 테스트 자동화2 및 원격 환경에서 타입 검사 도입
- UX 글쓰기 및 UI 상호작용 경험 개선
- 론처 커뮤니티 번역 검수 담당 및 다국어 지원 개발
- Electron, Spectron, GitHub Actions, React, Sass, TypeScript, Apollo Client
사이드 프로젝트
실용적인 웹 프로그래밍 - 설리번 프로젝트
간단한 코드로 웹 브라우징을 간편화하는 테마로, 소비자가 직접 UX를 개선해 보는 프로그래밍 입문 온라인 강의를 제작했습니다. 5명의 팀원과 같이 제작하였고, 교육 과정 설계에 많은 기여를 했습니다.
제주대학교 로그인 페이지 확장
제주대학교 학적 관리 서비스 ‘하영드리미’의 로그인 환경을 개선하는 크롬 확장 앱
- 핵심 기능은 세션 재사용과 유지, 사용자 세션이 유효해도 로그인 페이지로 이동되는 기존 서비스의 결함을 보완
- 기존 UI를 새로 덮어 씌워 기존에 없던 로그인 유지 기능을 제공
- UI 기획 및 Sketch App 을 활용한 목업 디자인
- Preact, @testing-library/preact, CircelCI, linaria, webpack 4
발표 및 글쓰기
프린트 레이아웃과 함께 웹 디자인하기
FEConf 2024 라이트닝 토크에서 인쇄 전용 CSS 웹 기술을 활용해서 A4 규격 인쇄를 같이 지원하는 웹 디자인 방법을 소개했습니다. 지금 읽고 계시는 이력서가 발표에서 소개한 방법을 통해 만들어졌습니다.
탈중앙과 온라인 게임이 교차하다
플라네타리움의 엔지니어링 인턴으로 일을 하면서 블록체인과 게임을 결합하며 특이하다고 생각한 기술적인 사례를 간단히 소개하겠습니다.
유저스크립트로 웹 브라우징 간편화하기
소프트웨어 개발 잡지 마이크로소프트웨어의 자동화 특집을 다룬 399호에 기고한 내용 중 일부를 발췌해서 블로그에 올린 내용으로 학교 재학 중에 유저스크립트를 활용해서 웹 브라우징을 간편화한 사례를 소개했습니다.
교육
제주대학교 소프트웨어학부
전공과목 — 자료구조, 알고리즘, 오픈소스, 소프트웨어 공학 등을 4학기 동안 이수하고 산업기능요원 복무를 위해 휴학을 했었습니다. 2024년 이후로 다시 학교로 돌아와 재학중입니다.
- 깃허브 저장소를 강의 노트 삼아 꾸준히 정리해두고 있습니다.
역량 및 경험
버전 관리
분산형 버전 관리 시스템을 다루는 데에 익숙합니다. 커밋 이력을 편집하거나 병합 충돌에 침착하게 대처할 수 있으며, Git을 커멘드 라인 환경과 그래픽 인터페이스 환경 모두에서 자유자재로 활용하고 있습니다. 유니크굿컴퍼니 재직 기간에 Git을 능숙하게 사용하는 동료와 함께 Git의 내부 동작 및 심화 사용법에 대한 워크숍을 정기적으로 진행했습니다.
자동화
업무나 일상생활에서 자동화가 필요한 반복적인 일에 대해 스스로 필요한 도구와 스크립트를 만들어 활용하는 것에 익숙합니다. 학부 재학 시절에 이런 일화를 엮어 국내 소프트웨어 공학 잡지의 자동화 특집에 기고 및 자동화가 엮여 있는 입문자 대상의 온라인 핸즈온 강의 제작에 많은 기여를 했습니다.
오픈소스 커뮤니티
10여 년 전 PocketMine이라는 오픈소스 게임 서버 구동기를 통해 오픈소스 프로그래밍을 접하게 되었어서, 오픈소스 도구를 활용하며 발생하는 문제에 대해 직접 제보와 코드 기여를 하는 것이 익숙합니다. 많은 기술 도구가 오픈소스 커뮤니티에서 출발한다는 점을 감안할 때, 해당 커뮤니티의 변화와 발전을 주시하는 것은 매우 중요하다고 생각합니다.
연락처 및 외부 링크
- iam@muhun.kim
- Blog
- https://frontend.moe
- GitiHub
- https://github.com/mu-hun
- 이 이력서는 아래 웹 페이지 주소로도 열람하실 수 있습니다.
- https://frontend.moe/resume
7월 24일 랜딩 페이지 리뉴얼로 인해 해당 라우팅 구성은 React 애플리케이션으로 편입되어 더 이상 사용되지 않게 되었습니다. ↩︎
테스트 구축은 동료와 함께 작업을 했고 (PR#271, PR#321 참고), 직접 종단 테스트 시나리오를 설계했습니다. ↩︎