미리보기

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

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

120개 이상의 페이지를 가진 대규모 게임 설정 백오피스 리뉴얼 프로젝트, 리딩 및 제작

코어 UI 컴포넌트 제작

기존에는 페이지마다 유사한 UI를 가진 컴포넌트들이 서로 다른 동작을 하여 사용자 경험이 일관되지 않았습니다. 이를 해결하기 위해, Selection, Form, List 등 10개 이상의 컴포넌트를 개발했습니다. 컴포넌트를 재사용함으로써 일관된 사용자 경험을 제공하고, 개발 시간을 단축할 수 있었습니다.

폼 유효성 검사 방식 변경

기존의 custom validator는 valueChanges 메서드를 활용하여 입력을 감지하고 검사를 수행했지만, 이 방법은 폼 컨트롤을 선언할 때 적용한 validator가 작동하지 않는 문제가 있었습니다. 이를 해결하기 위해 Angular 공식 문서를 참고하여 validatorFn을 활용하는 방법을 찾고 적용했습니다. 이를 통해 기존의 유효성 검사와 충돌 없이 동작을 수행할 수 있었으며, 이 방법을 팀에 공유하여 더 나은 방식으로 코드를 작성할 수 있도록 기여했습니다.

프로젝트 및 커뮤니케이션 개선

최신화되지 않은 기획서와 회의록 누락으로 인한 커뮤니케이션 문제를 극복하기 위해 노력했습니다. 회의에서 논의된 내용을 주도적으로 정리하여 회의록을 작성하고 공유함으로써 팀원들 간의 정보 공유를 원활하게 진행했습니다. 또한, 기획에 필요한 사항을 역으로 질문하여 누락된 부분을 보완하는 데 기여했습니다.
 
프로젝트의 디자인 과정에 적극적으로 참여하여 웹 접근성을 향상시켰습니다. 특히, 포커스 색상과 오류 표시 색상의 구분이 뚜렷하지 않은 문제를 지적하고, 사용자 경험 측면에서의 개선 사항을 논의하며 디자이너와 협력했습니다. 이를 통해 팀 전체의 웹 접근성을 향상시키고 프로젝트의 품질을 높일 수 있었습니다.

기술 스택: Angular Typescript NestJS RxJS Swagger SCSS

게임과 연동되는 매장과 사용자를 관리하는 백오피스 제작 및 운영

Typed Form 도입

기존에는 폼 타입을 지정할 수 없어 런타임 오류가 자주 발생했습니다. 이 문제를 해결하기 위해 Angular를 최신 버전(v14)으로 업그레이드하고, 모든 폼 컨트롤에 타입을 명시함으로써 컴파일 타임에 오류를 사전에 검출할 수 있도록 했습니다. 이로써 코드의 안정성이 크게 향상되었고, 개발 과정에서의 오류 발생률을 크게 줄일 수 있었습니다.

Custom directive를 제작해 UI를 동적으로 제어

특정 사용자 등급에 따라 UI를 동적으로 제어해야 하는 요구사항이 있었습니다. 이를 충족하기 위해 Custom Directive를 개발하여 중복 코드를 최소화하고, 해당 기능을 재사용할 수 있도록 했습니다. 이를 통해 코드의 유지보수성가 좋아졌고, UI 제어에 대한 일관성을 높일 수 있었습니다.

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

여러 부서에서 제공하는 API의 데이터 형식이 달라 혼란이 있었습니다. 이를 해결하기 위해 미들웨어를 도입하여 데이터를 일관된 형식으로 변환하고, 비즈니스 로직을 미들웨어에 두어 프론트에서는 변환된 데이터만 사용하도록 했습니다. 관심사 분리를 통해 로직이 간결해지고, 가독성도 얻을 수 있었습니다.

기술 스택: Angular Typescript NestJS Swagger SCSS

멤버십과 해당 멤버십을 사용하는 사용자를 관리하는 백오피스 운영 및 리팩토링

마크업, CSS 구조 변경

컴포넌트마다 마크업과 스타일이 다르게 작성되어서 유지보수가 어려웠습니다. 이에 대한 해결책으로 router-outlet 을 활용하여 SPA의 장점을 살리고, SCSS의 경우 7-1 Architecture를 도입하여 역할을 명확하게 구분했습니다. 이러한 구조 변경을 통해 중복된 스타일을 공통 스타일로 통합하고 코드의 일관성과 유지보수성을 높였습니다.

프로젝트 리팩토링

Moment.js에서 Day.js로의 변경과 레거시 코드의 제거 작업을 진행했습니다. 이를 통해 지원이 종료된 라이브러리를 대체하고, 프로젝트의 기술 부채를 해소하였습니다.
또한, 공통 로직을 분리하고 문자열 값을 상수로 관리하여 코드의 일관성과 유지보수성을 향상시켰습니다. 이러한 작업은 코드의 가독성을 높이고, 변경 및 확장에 대비한 안정적인 기반을 마련하는 데에 도움이 되었습니다.

기술 스택: Angular Typescript NestJS SCSS

PM2, Nginx 무중단 서비스 구현

서버 재시동 시 PM2의 애플리케이션과 Nginx를 수동으로 실행해야 하는 번거로움이 있었습니다. 이를 해결하기 위해 시스템 데몬(Systemd)을 도입하여, PM2와 Nginx를 자동으로 관리할 수 있도록 설정했습니다. 이러한 경험을 통해 서버 관리에 대한 이해도를 높이고, 더욱 효율적인 운영 환경을 구축할 수 있었습니다.

NodeJS 18 사용을 위한 서버 변경 및 세팅

Angular 17을 사용하기 위해 NodeJS 18이 필요했습니다. 그러나 기존 OS 버전을 지원하지 않아 Ubuntu 18.04.6 LTS로 변경했습니다. 이 과정에서 Jenkins에 프로젝트를 추가하고, AWS Load Balancer와 CodeDeploy를 설정했습니다. 또한, Nginx config과 shell script를 직접 이해하고 작성해 보며 배포 시스템과 서버에 대한 이해도가 높아졌습니다.

기술 스택: Linux PM2 Nginx Jenkins AWS

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

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

유연한 CSS 작성

다국어를 지원하는 웹 사이트를 개발하면서, 텍스트의 길이와 언어에 따라 레이아웃이 유연하게 조정되어야 했습니다. 이를 위해 절대적인 단위(px)보다는 상대적인 단위(%, rem)를 선호하고, 백그라운드 이미지와 flex를 활용하여 디자인을 구현했습니다.

업무 프로세스 개선

기획, 디자인, 개발 단계로 업무가 진행되었고, 개발 단계에서 반응형, 구현 가능성 등의 문제가 발생하여 기획 및 디자인을 수정해야 하는 경우가 종종 있었습니다. 이러한 문제를 사전에 예방하기 위해, 모든 회의에 자발적으로 참여하여 의견을 제시하고 서로의 입장 차이를 이해하며 협력했습니다.
 
이를 통해 기획, 디자인, 개발 간의 원활한 커뮤니케이션이 이루어졌고, 발생할 수 있는 이슈를 사전에 파악하여 해결할 수 있었습니다. 이로써 업무 프로세스의 효율성을 높이고, 프로젝트의 진행 속도와 품질을 개선할 수 있었습니다.

기술 스택: HTML5 CSS3 Javascript jQuery

취준 컴퍼니는 취업 준비/이직 희망자와 현직자가 커피챗을 통해 멘토링을 하는 플랫폼입니다.

퍼블리싱과 프론트엔드 관련 지식을 공유하는 멘토로 활동 중입니다. 다양한 실무 경험과 배운 점을 바탕으로 취업 준비생과 이직 희망자들에게 도움을 제공하고 있습니다.

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

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