교육

제주대학교 소프트웨어학부

전공과목 — 자료구조, 알고리즘, 오픈소스, 데이터베이스, 소프트웨어 공학, 프로그래밍언어론 등

깃허브 저장소를 강의 노트 삼아 꾸준히 정리해두고 있습니다.

  • 5학기까지 재학하고 산업기능요원 복무를 위해 장기 휴학을 했었습니다.
  • 2024년 3월 이후로 졸업 준비를 위해 다시 학교로 돌아와 재학 중으로, 2025년 7월 졸업 예정입니다.

업무 경험

펜슬컴퍼니

창작자들을 위한 콘텐츠 플랫폼 ‘글리프‘와 기업용 도움말 문서 서비스 ‘리더블‘을 운영하는 오픈 비즈니스1를 지향하는 스타트업입니다. 첫 제품 출시 3개월 전부터 계약직 프론트엔드 엔지니어로 합류하여 6개월간 재직했습니다.

  • 초기 멤버로서 꾸준히 서비스 설계 방향과 사용성에 대한 의견을 제시하였습니다.
  • CTO와 협업으로 ‘글리프‘와 ‘리더블‘에 적용되는 위지윅 에디터의 연구 개발을 담당했습니다.
서비스 메인 페이지 포스트 본문 페이지 포스트 본문 이미지 공유 기능 스크린샷 포스트 편집 페이지 포스트 편집 페이지 내 갤러리 수정기능 스크린샷

유니크굿컴퍼니

인터렉티브 스토리텔링, 게이미피케이션 교육, 현실 증강(AR) 게임 플렛폼 "리얼월드"를 만드는 스타트업입니다. 리얼월드 플랫폼의 연구 개발과 운영을 담당했습니다. 재직 기간 동안 산업기능요원으로 복무했습니다.

리얼월드 플렛폼의 게임 저작 웹 서비스 “리얼월드 스튜디오” 신기능 연구 및 개발, 모바일 앱 내 웹뷰 등 전반적인 사내 웹 서비스 구현과 관리를 경험했습니다.

Azure 에서 GitHub 으로 프론트엔드 운영 환경 이전하기

사내 모든 웹 프론트엔드 서비스의 운영 환경을 Azure 에서 GitHub 으로 이관하는 작업을 담당했습니다.

  • CI/CD를 Azure Pipeline 에서 GitHub Actions 및 Cloudflare Pages 로 이관
  • 사내 NPM 패키지 관리를 Azure Artifacts 에서 GitHub Packages 로 이관

검색 스크린 웹뷰 도입

Android 및 iOS 앱 엔지니어가 부재한 상황을 대비하고자 PoC으로 검색 화면을 웹뷰로 옮기는 작업을 담당

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

위지윅 편집기 기능 확장 업무

리얼월드 스튜디오 내의 위지윅 편집기의 기능을 확장하는 작업을 담당했습니다.

리얼월드 스튜디오 리뉴얼

레거시 게임 제작 웹 서비스를 새 브랜딩 UI와 함께 처음부터 다시 구현하는 프로젝트에 프론트엔드 엔지니어로 참여

출시 이후 서비스 개발 및 운영 담당자로서 B2B 비즈니스 플랜 도입, 게임 제작 기능 정기 업데이트 등 새 기능에 대한 기획과 UI 목업 디자인, 연구 및 개발을 담당했습니다.

  • 디자인시스템 기반 UI 리뉴얼과 함께 Angular 로 만들어진 웹 서비스를 React 개발 환경으로 재구현을 담당
  • 스프린트 주기로 2주일을 잡아 6개월을 동안 개발하여 론칭
  • 2023년 3분기 기준 외부 게임 제작자 포함 WAU 약 3백여 명의 서비스로 유지 중
  • 지속적 통합 및 배포에 Azure Pipeline 사용, 사내 NPM 패키지 관리에 Azure Artifacts 사용
  • React 개발 환경 - react-hook-form, Emotion, Storybook, Vite, Yarn 3
실제 편집 화면 첫번째 소개 슬라이드 두번째 소개 슬라이드

플라네타리움

게임 전용 오픈소스 P2P 네트워크를 연구 개발하는 오픈 비즈니스 스타트업 플라네타리움에서 탈중앙화 레퍼런스 게임 "Nine Chronicles"의 정식 출시를 앞두고 인턴쉽을 경험했습니다.

오픈소스 탈중앙 게임 론처 프로젝트 “Nine Chronicles 론처”

해당 프로젝트가 .NET 기반 개발 환경에서 웹 기술 기반으로 전환한지 얼마 안된 시기에 소프트웨어 안정성과 사용성 개선을 중심으로 작업을 직접 제안하고 수행했습니다.

  • 론처 실행이 불안정한 문제를 줄이고자 결성된 “온보딩” 스프린트의 구성원으로 참여
  • 론처 종단 간 테스트 자동화 및 타입 체크 절차 도입2
  • 론처 커뮤니티 번역 검수 담당 및 다국어 지원 개발
  • 인턴쉽 수료 이후에도 해당 오픈소스 제품의 기여에 꾸준히 관심을 갖고 참여했습니다.
론처 한국어 화면 론처 영문 화면 나인크로니클 국제화 커뮤니티

사이드 프로젝트

실용적인 웹 프로그래밍 - 인프런 무료 강의

“프로그래밍은 우리가 원하는 방향을 실현해주는 마법이에요.

우리 주변의 웹 서비스의 문제를 찾아 해결하며 웹 프로그래밍을 경험해봅시다.” - 강의 소개 문구

간단한 코드로 웹 브라우징을 더 편리하게 만드는 주제로, 사용자가 직접 상용 웹 서비스의 구조를 파악하고 개선하는 웹 오토메이션 입문 강의를 5명의 팀원과 함께 기획하고 제작했습니다.

이 강의는 웹 프로그래밍 학습에 대한 저의 가치관을 바탕으로 시작된 프로젝트로, 교육 과정 설계와 콘텐츠 제작에 최종 책임자로서 프로젝트를 이끌어냈습니다.

강의 소개 첫번째 사진 강의 소개 두번째 사진 강의 커리큘럼 목차

제주대학교 로그인 페이지 확장

제주대학교 학적 관리 서비스 ‘하영드리미’의 로그인 환경을 개선하는 웹 확장 앱

사용자 세션이 유효해도 일정 시간이 지나면 강제로 로그아웃 페이지로 이동시키는 결함을 해결하고자 작은 코드 스니펫에서3 시작했고, 첫 제품 개발로 주변 학교 친구들까지 사용할 수 있도록 확장 앱 프로젝트로 발전시켰습니다.

  • 주요 기능은 세션 유지 및 재사용, 로그인 지속성 보장, UI 개선
  • 기존 서비스 UI를 덮어씌우는 서드파티 UI를 Preact 컴포넌트로 구현
  • 로그인 성공 및 인증 실패 시나리오를 포함한 컴포넌트 테스트 작성
  • 6개월 이상 꾸준한 유지보수를 경험, 0.1.1 - 0.2.5 버전까지 배포
  • UI 컴포넌트를 Preact로 구축, CircleCI를 활용한 CI 파이프라인, CSS-in-JS 도구로 Linaria를 사용
실제 스크린샷 컨셉 목업

발표 및 글쓰기

프린트 레이아웃과 함께 웹 디자인하기

FEConf 2024 라이트닝 토크에서 인쇄 전용 CSS 웹 기술을 활용해서 A4 규격 인쇄를 같이 지원하는 웹 디자인 방법을 소개했습니다. 프린트 호환 웹 디자인을 고민하게 된 동기부터 작업 과정, 브라우저 지원 문제, 인쇄된 결과를 다루었습니다.

지금 읽고 계시는 이력서가 발표에서 소개한 방법을 통해 만들어졌습니다.

슬라이드 첫 장 예시 슬라이드 1 예시 슬라이드 2

웹 프론트엔드 시작하기 - 무엇을 어떻게 하면 될까

제주대학교 프론트엔드 클럽의 첫 세미나 발표에서, 애플리케이션 개발에서 서버와 클라이언트라는 전통적인 구분 대신 상대적인 위치에 따라 외부와 내부로 나뉜다는 특이한 관점을 소개했습니다.

이를 바탕으로 웹 프론트엔드의 역할과 특징 및 중요성, 개괄적인 역사, 커뮤니티 중심의 학습 방법을 공유했습니다.

슬라이드 첫 장 슬라이드 첫 장 슬라이드 첫 장 슬라이드 첫 장

유저스크립트로 웹 브라우징 간편화하기

소프트웨어 개발 잡지 마이크로소프트웨어4의 자동화 특집을 다룬 399호에 기고한 내용 중 일부를 발췌해서 블로그에 올려두었습니다. 학교 재학 중에 유저스크립트를 활용해서 웹 브라우징을 간편화한 사례를 소개했습니다.

잡지 표지 1~2 페이지 2~4 페이지

역량 및 경험

Git을 다루는데에 능숙합니다.

버전 관리 도구인 Git를 오랜 기간 다루었습니다. 커밋 이력을 편집하고 병합 충돌에 침착하게 대처할 수 있으며, Git을 커멘드 라인 환경과 그래픽 인터페이스 환경 모두에서 자유자재로 활용하고 있습니다.

자동화

업무와 일상생활에서 반복적인 작업을 효율적으로 처리하기 위해, 필요한 도구와 스크립트를 직접 개발하고 활용하는 데 익숙합니다. 이러한 경험을 기반으로 학기 중, 국내 소프트웨어 공학 잡지에 기고하고 자동화 중심의 온라인 핸즈온 강의를 제작하게 되었습니다.

  • 마이크로소프트웨어 399호 - “자동화의 광시곡” 특집
  • 웹 오토메이션 온라인 핸즈온 강의
  • mu-hun/.dotfiles
    • 초기화된 MacOS 환경에서 한 줄의 명령어로 시스템 설정, Zsh, Homebrew, 애플리케이션 등 주요 도구를 바로 설치하고 백업할 수 있도록 관리 중인 프로젝트입니다.
  • mu-hun/jejunu-icalendar-server
    • 제주대학교 강의 시간표 데이터를 iCalendar 형식으로 매일 변환해 외부 캘린더(Google, Apple Calendar 등)에서 구독할 수 있도록 하는 HTTP GET 서버를 구축한 프로젝트입니다.
    • 교내 학사 관리 포털을 통해 시간표를 확인하는 경험이 번거롭게 느껴져 만들게 되었습니다. 휴강, 보강 등 다양한 상황에 대응할 수 있는 모든 테스트 케이스를 사전에 준비하여 구현했습니다.

오픈소스 프로그래밍

10여 년 전 PocketMine이라는 오픈소스 게임 서버 구동기를 통해 오픈소스 프로그래밍을 접하게 되었습니다. 업무 중 외부 오픈소스 도구에 대한 문제 제보와 코드 기여를 하는 것이 익숙한 편입니다.

  • mdn/content#3795: CSS box-sizing 속성의 기본값과 관련한 특정 HTML 요소의 예외 사항을 발견하고, 여러 웹 표준 문서에서 찾은 명세를 근거로 MDN 문서에 기여했습니다.
  • preactjs/preact-www#754: Preact 문서에서 비-영문 퍼머링크 누락 문제를 제보하는 과정에서 커미터와 함께 원인 파악을 하고, 직접 웹 사이트 코드를 패치하여 반영까지 되었습니다.

또한, 오픈 비즈니스1를 지향하는 플라네타리움문서 내 이동 링크과 펜슬컴퍼니문서 내 이동 링크에서 근무하며, 오픈소스 개발 문화를 업무로서 경험했습니다. 이를 통해 오픈소스 커뮤니티에서의 협업과 기여에 대해 한층 더 깊게 이해 할 수 있었습니다.

이 이력서는 아래 웹 페이지 주소로도 열람하실 수 있습니다.
https://frontend.moe/resume

  1. 오픈 비즈니스는 제품의 코드를 공개하고, 이해관계자 간의 정보를 투명하게 공유하는 기업 운영 방식입니다.(Open business - Wikipedia 출처) 이러한 문화를 채택한 기술 회사들은 모든 제품을 오픈소스로 운영하며, 서비스의 주요 지표와 재무 상황, 직원 보상 등을 외부에 정기적으로 투명하게 공개하는 특징을 갖고 있습니다. ↩︎ ↩︎

  2. 스프린트 킥오프 당시 로컬 환경의 테스트 규칙과 여러 린터 도구가 정해지지 않아 관리에 불편함을 겪고 있었습니다. 이에 테스트 과정을 규격화하는 것이 필요하다고 생각하여 종단 간 테스트 자동화 도입을 제안하고 작업을 주도했습니다. (PR#271, PR#321, PR#271 참조)
    또한 누락된 TypeScript 타입 정의를 보완하는 작업 등 린터를 개발 과정에 필수적으로 도입하여 코드 안정성 향상에 기여를 했습니다. (PR#249, PR#264, PR#275 참조) ↩︎

  3. 하영드리미 서비스는 인증 세션이 유효한 상태라도 루트 경로 /를 방문하면 메인 포털 페이지 경로 /frame/main.do가 아닌 로그인 페이지 경로 /frame/index.do로 리다이렉션하는 문제가 방치되고 있었습니다. ↩︎

  4. 국내에서 1983년부터 꾸준히 출간된 컴퓨터 프로그래밍 전반의 IT 엔지니어링 전문 잡지입니다. 가장 최근에 2020년 7월에 발행한 401호를 끝으로 휴간 중입니다. - 마이크로소프트웨어 - 위키백과 참고 ↩︎

  5. CSS 레이아웃 설정으로 모든 요소의 box-sizing 속성값을 border-box로 초기화하는 것이 일반적입니다. 그러나 해당 설정이 되어 있지 않은 개발 환경에서 박스 너비가 예상과 다르게 나타나는 문제를 접했고, 이를 계기로 해당 예외 사항을 처음 확인하게 되었습니다. ↩︎