미리보기

포커 시장 점유율 1위 게임을 개발하는 NSUSLAB에서, 저는 각종 게임 설정을 관리하는 백오피스를 제작하고 운영하는 업무를 담당하고 있습니다.
프론트엔드뿐만 아니라, 백엔드와 인프라까지 포괄하는 다양한 업무를 수행하며 프로젝트를 보다 넓은 시야에서 바라보고 있습니다.

웹 에이전시에서 퍼블리셔로 근무하며 삼성 전자, 삼성 반도체, 빅히트 등 다양한 사이트를 제작하고 운영하였습니다. 웹 표준과 웹 접근성을 준수하며, 미디어 쿼리를 활용한 반응형 웹을 제작했습니다.
기획 및 디자인 단계부터 적극 참여하고, 운영 가이드를 작성하는 등 원활한 커뮤니케이션과 협업 환경 조성에 기여했습니다. 또한, 다양한 환경에서의 트러블 슈팅 경험이 있습니다.

팀 운영 효율화를 위해 다양한 운영 기능을 제공하는 내부 지원 도구 제작 및 운영

반복 작업 자동화를 위한 Electron 도구 설계 및 구현

• i18n·메타 태그 데이터를 Google Sheets에서 관리하며, 수작업으로 객체 포맷으로 변환 후 코드에 반영해야 했습니다.

• 내부에 공유된 스크립트가 일부 개발자에 한정되어 있어 병목이 발생하고, 특정 인물에게 의존하는 구조였습니다.

• 반복 작업을 누구나 손쉽게 수행할 수 있도록 Electron 기반 데스크탑 앱을 기획하고 구현했습니다.

직렬 처리 로직을 병렬로 개선하여 속도 최적화

• 기존 컨버팅 스크립트는 대용량 데이터 처리 시 직렬 저장 방식으로 인해 속도 저하 문제가 있었습니다.

• 저장 로직을 병렬 처리로 개선해 실행 속도를 약 80% 향상시켰으며, 대량 데이터도 안정적으로 처리할 수 있게 했습니다.

기술 스택: Angular Typescript Electron Tailwind

120+ 페이지 규모의 게임 설정 백오피스 리뉴얼 프로젝트 리딩 및 제작

UI 일관성 확보를 위한 컴포넌트 리팩토링

• 페이지마다 다르게 동작하던 유사 UI를 발견하고 문제를 제기했습니다.

• 유사한 UI 요소들을 통합하고, 기능과 동작 기준을 명확히 정의하여 통합된 UI 구조로 재설계했습니다.

• 사용자 경험의 일관성을 확보하고 중복 구현을 줄여 개발 효율을 높였습니다.

폼 유효성 검사 방식 개선

• 기존 valueChanges 기반 방식이 Angular 기본 validator와 충돌해, 코드가 복잡해지고 기능 활용에 제약이 있었습니다.

• 해당 방식이 잘못된 구현 방향임을 인지하고, Angular 공식 문서를 참고해 validatorFn 패턴으로 전환했습니다.

• 개선된 구현 방식과 관련 문서를 팀에 공유해, 올바른 개발 흐름이 정착될 수 있도록 기여했습니다.

커뮤니케이션 및 협업 프로세스 개선

• 업데이트되지 않은 기획서로 인한 혼선을 줄이기 위해, 회의 내용을 자발적으로 정리·공유해 정보 비대칭을 해소했습니다.

• 기획 흐름을 미리 파악하고 필요한 내용을 역으로 질문해, 요구사항 누락을 방지하고 기획 완성도를 높였습니다.

• 포커스·오류 색상 등 접근성 문제를 식별하고, 디자이너와 협업해 UI/UX를 개선했습니다.

• 개선된 구현 방식과 관련 문서를 팀에 공유해, 올바른 개발 흐름이 정착될 수 있도록 기여했습니다. 

기술 스택: Angular Typescript NestJS RxJS Swagger SCSS

게임과 연동되는 오프라인 매장 관리 시스템 개발 및 운영

Typed Form 도입을 통한 폼 안정성 확보

• Angular 폼에서 타입 미지원으로 인한 값 처리 오류가 반복적으로 발생했습니다.

• Angular 14의 Typed Form 기능 도입을 위해 버전 업을 진행하고, 폼 전반에 타입을 명시했습니다.

• 컴파일 타임에 오류를 사전 검출할 수 있게 되면서, 코드 안정성과 개발 효율성이 향상됐습니다.

Custom directive를 활용한 UI 제어 로직 일관화

• 사용자 등급에 따라 UI를 제어해야 하는 요구사항을, 중복 없이 처리할 수 있도록 Custom Directive로 추상화했습니다.

• 해당 Directive를 다양한 화면에서 재사용하며, 조건 분기와 중복 코드 문제를 해결했습니다.

• 또한, 공통 로직으로 관리되면서 신규 기능 추가 및 수정 작업이 간결해졌습니다.

미들웨어를 통한 BFF(Backend for frontend) 구현

• API 응답 포맷과 파라미터 명세가 부서마다 달라, 프론트엔드에서 부서별 대응 로직을 따로 구현해야 했습니다.

• 혼선을 줄이기 위해 BFF에서 용어와 파라미터를 통일하고, 응답 데이터를 일관된 구조로 정리했습니다.

• 비즈니스 로직은 미들웨어로 분리하고, 프론트는 뷰 로직에 집중할 수 있도록 개발 흐름을 단순화했습니다.

기술 스택: Angular Typescript NestJS Swagger SCSS

배포 및 서비스 장애 대응 등 백오피스 인프라 운영을 담당

PM2, Nginx 무중단 서비스 구현

• 서버 재시동 시 PM2 애플리케이션과 Nginx를 수동으로 실행해야 해 운영 상 번거로움이 있었습니다.

• 이를 해결하기 위해 Systemd 데몬을 활용하여 두 서비스를 자동 실행되도록 설정했습니다.

• 운영 자동화를 통해 서비스 안정성을 높이고, 서버 관리에 대한 이해도를 넓혔습니다.

Node.js 18 기반 환경 전환 및 배포 시스템 구성

• Node.js 18 환경이 필요했지만, 기존 운영체제가 이를 지원하지 않아 Ubuntu 18.04.6 LTS로 서버를 전환했습니다.

• 이후 Jenkins 설정부터 AWS Load Balancer, CodeDeploy, Nginx 설정까지 직접 구성했습니다.

• 프론트엔드 개발 환경을 스스로 전환하고, 실질적인 배포 운영 경험을 쌓았습니다.

기술 스택: Linux PM2 Nginx Jenkins AWS

웹 접근성과 웹 표준을 준수하여 개발

다양한 사용자가 웹 사이트를 이용할 수 있도록 명도 대비, 탭 포커스, 최소 폰트 크기, 대체 텍스트 등의 웹 접근성과 웹 표준을 지켰습니다. 웹 접근성 품질마크 취득한 프로젝트도 있습니다.

웹 접근성 기준을 준수한 퍼블리싱 수행

• WCAG 기준에 따라 명도 대비, 포커스 표시, alt 속성, 시맨틱 태그 등을 준수해 다양한 사용자가 접근 가능한 웹을 구현했습니다.

• 웹 접근성 품질마크를 획득한 경험이 있으며, IE9까지 지원하는 크로스브라우징 환경에서도 안정적인 구현을 수행했습니다.

다국어 대응을 고려한 유연한 CSS 설계

• 언어별 텍스트 길이 차이로 인한 레이아웃 깨짐을 방지하기 위해, 고정값 대신 rem, % 등 유동적인 단위를 사용해 반응형 스타일을 설계했습니다.

기획·디자인 협업을 통한 업무 흐름 개선

• 완전한 워터폴 구조로 진행된 프로젝트 특성상, 개발 단계에서 반응형 이슈나 기술적 제약이 뒤늦게 드러나는 문제가 잦았습니다.

• 이러한 문제를 줄이기 위해 초기 회의부터 적극 참여해 제약사항을 미리 공유하고, 방향성을 함께 조율했습니다.

기술 스택: HTML5 CSS3 Javascript jQuery

미션, 지식 공유 활동을 통해 개발자들과 함께 성장하는 네트워킹 중심의 커뮤니티입니다.
npm 패키지 배포, 디자인 시스템 제작 등의 미션을 수행했으며, 해커톤에서는 아이디어 제안자로 참여해 팀을 이끌었습니다.

취준 컴퍼니는 취업 준비/이직 희망자와 현직자가 커피챗을 통해 멘토링을 하는 플랫폼입니다.
퍼블리싱과 프론트엔드 관련 지식을 공유하는 멘토로 활동 중입니다. 다양한 실무 경험과 배운 점을 바탕으로 취업 준비생과 이직 희망자들에게 도움을 제공했습니다.

미션과 코드 리뷰 형식으로 진행되는 JavaScript를 활용한 웹 애플리케이션을 제작하는 수업입니다.

프론트엔드의 기본인 VanillaJS를 심화 학습하고, Cypress를 사용한 TDD 활용법과 도메인과 UI 분리 방법, 리팩토링 등 클린 코드 작성에 대해 깊게 배웠습니다.