웹 인터렉션 마법사 🪄
김무훈입니다.

글 및 일러스트 창작 서비스 “Glyph”

• 위지윅 에디터 - 콘텐츠 서식 데이터 모델링과 편집 기능 구현 담당
• 글 본문 페이지 - 위지윅 에디터로 작성한 콘탠츠 뷰어 및 글 본문 공유 기능

제품 운영

• 게임 콘텐츠 저작 서비스 “리얼월드 스튜디오” 기능 연구 개발 및 운영 전담
• 리얼월드 앱 내 검색 웹뷰 개발, 메인 홈 웹뷰 관리
• 인 게임의 인터렉티브 웹뷰 관리

엔지니어링

• 오픈소스 위지윅 에디터 커스터마이징 및 확장 플러그인 개발
• Angular 로 만들어진 웹 서비스를 React 개발 환경으로 재구현
• 정적 사이트 생성(Static Site Generation) 기반 웹뷰 구현 및 관리

리얼월드 스튜디오 프론트엔드 독립화 2023.01

백엔드 인프라와 종속된 프론트엔드 배포 환경을 분리하는 프로젝트에서 프론트엔드 파트 담당

• 분리 과정에서 Azure 바탕의 개발 환경을 GitHub 생태계 바탕의 서비스로 모두 이관
• ASP.NET Razor로 만들어진 기존 랜딩 페이지 에셋과 React 애플리케이션 사이의 라우팅에 Cloudflare Workers 활용¹
• 프론트엔드 서비스 지속 배포에 Cloudflare Pages 활용
• GitHub Actions, GitHub Packages, Cloudflare Pages, Cloudflare Workers

홈 스크린 웹뷰 관리 2022.092022.10

초기 로딩이 느렸던 앱의 홈 웹뷰를 CSR에서 SSG로 이관된 이후 생긴 문제 해결에 기여, 홈 스크린 CMS 구현 및 관리

• Server-Driven UI 설계 방식을 일부 차용한 홈 화면의 CMS 구현
• 정적 생성 기반 다국어 지원 기능 추가 및 초기 로딩 경험 개선
• IOS 14 이하 Safari 브라우저 지원 작업
• Gatsby, React, Emotion, react-i18next, Gatsby Clould

검색 스크린 웹뷰 도입 2022.06

네이티브 앱 개발 자원이 제한되는 상황을 대비하기 위해 미리 PoC 으로 검색 화면을 웹뷰로 옮기는 작업을 담당

• 웹뷰에서 네이티브 앱을 호출하는 브릿지 및 스키마 연동 작업
• 로딩 없이 초기 콘텐츠를 보여주기 위해 정적 웹 페이지 생성 도구 사용
• 웹뷰 UI를 기존 네이티브 UI와 동일하게 작업
• 현재까지도 프로덕션에 계속 활용 중. 웹뷰 링크
• Gatsby, React, Emotion, react-i18next, Clouldflare Pages

위지윅 편집기 기능 고도화 2022.07

리얼월드 스튜디오 내의 위지윅 편집기의 기능을 사용자의 요구 사항에 맞추어 확장하는 작업 및 소통을 담당

• 기획 및 구현 과정에 주요 고객인 사내 게임 제작 구성원과 소통해서 제작 진행
• 글자 크기 목록 다양화, 자간 설정 기능, 선택한 색상 정보에 대한 시인성 향상 등 기존 편집기 기능 확장 지원
• 일부 기능은 사용하는 편집기 도구의 내부 소스코드 수정이 직접 필요해서 해당 기능을 덮어씌우는 형태의 외부 모듈을 만들어 지원.
• 사내 기술 블로그를 통해 당시 작업 과정을 소개하는 글을 작성했습니다.

리얼월드 스튜디오 리뉴얼 2021.092022.02

기존 서비스를 새 브랜딩 UI와 함께 처음부터 다시 구현하는 프로젝트에 참여

• Angular 애플리케이션을 역공학 하여 React 개발 환경으로 재구현하는 작업 담당
• 스프린트 주기로 2주일을 잡아 6개월을 동안 개발하여 론칭
• 론칭 이후 비즈니스 플랜 기능, 커뮤니티 기능 등 새 기능에 대한 기획 및 UI 디자인 구현
• 2023년 3분기 기준 외부 게임 제작자 포함 WAU 약 3백여 명의 서비스로 유지 중
• react-hook-form, Emotion, Storybook, Vite, Yarn 3, Azure Pipeline