미리보기

[실시간성과 구조 설계로 팬 경험을 설계하는 개발자]

메이크스타는 235개국 팬들과 아티스트를 연결하며, 콘텐츠 유통의 플랫폼을 넘어 팬 경험 자체를 설계하는 기업입니다. 특히 크라우드 펀딩, 라이브 방송 등 복합적인 기능을 안정적으로 통합하는 환경에서 트래픽과 이슈에 유연하게 대응해야 합니다. 이 때문에 서비스를 구조화하는 역량과 실시간 환경을 처리하는 기술력이 중요하다고 생각합니다. 이러한 환경 속에서 빠른 실험과 반복적 개선을 지향하는 스쿼드 중심의 자율 협업 체계 안에서 제가 가지고 있는 경험과 역량을 발휘하고 싶습니다.

저는 삼성 청년 SW 아카데미에서 800명 동시 접속 환경의 실시간 웹 게임을 직접 기획하고 프론트엔드 구조를 설계하며,
WebSocket 구조 최적화, 정적 CSS 사용, 상태관리 리팩토링을 통해 성능과 실시간성을 함께 확보한 경험이 있습니다. 기획 - 설계 - 개발 - 배포까지의 과정을 수행하면서 사용자 피드백을 빠르게 수집하고, 인터랙션 흐름을 개선했습니다.
이 과정에서 서비스 구조화 · 새로운 개발 도구 학습 · 협업 중심 설계 체계 구축에 집중하며 개발 역량을 쌓았습니다.

또한, Electron 기반 앱, WebRTC, Stomp 통신 등 새로운 기술을 도입할 때마다 서비스 흐름을 먼저 설계하고 필요한 기술을 빠르게 흡수해 구현해 왔습니다. 기술 자체보다 문제 해결에 집중하며 구조를 설계했던 경험은, Vue 기반 생태계에서도 빠르게 적응하고, 핵심 과제에 기여할 수 있는 학습 민첩성을 발휘할 수 있다고 생각합니다. 메이크스타의 개발 프로세스에 빠르게 적응하고 팀과 시너지를 내는 사원이 되겠습니다. 팬분들의 경험을 향상하고, 이 산업에서 비즈니스 임팩트를 낼 수 있는 개발자가 되겠습니다.

[1100명 플레이, 800명 동시 접속을 가능하게 한 실시간 웹 게임 성능 최적화 경험]

웹 기반 숨바꼭질 대전 게임 "NoColored" 프로젝트에서 프론트엔드 개발을 담당하며 실시간성과 성능 최적화를 동시에 해결하는 데 집중했습니다. 게임 특성상 사용자의 입력이 즉각적으로 반영되어야 하며, 렌더링 속도나 네트워크 응답 속도가 지연될 경우 플레이 경험이 크게 저하되는 문제가 있었습니다. 이를 해결하기 위해 두 가지 최적화를 진행했습니다.

1. 렌더링 최적화

   • Figma를 통해 프로토타입을 설계했을 때, 웹 게임의 특성상 많은 디자인 요소와 반복되는 컴포넌트가 존재했습니다.

   • 공통 컴포넌트 설계에 용이하고, 정적 CSS를 빌드 과정에서 제공하는 Vanilla-Extract-CSS를 적용했습니다.

   • 공통 스타일을 모듈화하고, 스타일 계산을 정적으로 수행하는 방식으로 변경하여 CSR 환경에서도 성능 저하 없이 UI를 빠르게 렌더링할 수 있도록했습니다.

   • 나아가 Desktop, Mobile 환경에서 호환될 수 있도록, Media-Query를 적용하여, 서비스의 접근성을 확대하는 크로스 플랫폼을 구현했습니다.

2. 실시간 데이터 처리 최적화

   • 게임 내 플레이어의 위치 정보와 상태 데이터를 WebSocket의 JSON의 구조로 주고 받았습니다. 패킷 크기가 크고 응답 속도가 지연되는 문제가 있었습니다.

   • 위치 정보를 Integer로 이동 상태를 Boolean 형식으로 전송(Unit8Array)하는 방식으로 변경해 응답 속도를 개선하고 데이터 전송량을 줄이며 서버 부하를 감소시켰습니다.

최종적으로, JUnit 부하 테스트를 통해 동시 접속자 800명을 감당할 수 있는 성능을 확보했으며, 프로젝트 결과로 2주간 게임 회원 수 1,100명, 누적 플레이 타임 55시간을 기록하며 우수 프로젝트로 선정되었습니다.
이 경험을 통해 사용자 경험을 극대화하기 위해 프론트엔드 최적화뿐만 아니라 네트워크 성능 개선까지 고려해야 한다는 점을 배웠으며, 앞으로도 기술적으로 최적화하는 역량을 지속적으로 발전시켜 나가겠습니다.

[실시간 집중 상태 판별을 위한 AI 연동 경험]

SSAFY 마지막 프로젝트 "모각냥"을 진행하며 새로운 기술을 학습하고 도입하며 서비스에 AI를 연동한 경험을 가지고 있습니다. 실시간 그룹 집중 모드 웹앱을 개발하며, Electron, WebSocket, 생성형 AI GPT-4o모델을 적용했으며, 각각의 대체 기술을 분석한 후 최적의 선택을 내렸습니다.

1. Electron

   • 프로젝트 기획 단계에서 사용자의 집중 여부를 보다 정밀하게 판별할 필요가 있었습니다.

   • 웹 환경에서는 접근할 수 있는 정보가 제한적이었기에, 웹보다 더 큰 범위에서 사용자의 활동을 감지할 수 있는 기술이 필요했습니다.

   • PWA도 고려했지만, 브라우저 기반 실행 방식의 한계로 인해 시스템 접근 및 백그라운드 실행 기능이 제한적이었습니다.

   • 이에 따라 사용자의 PC 환경에 직접 접근할 수 있는 Electron을 선택했습니다.

2. WebSocket 도입 (실시간성 확보)

   • 그룹 단위의 실시간 상호작용이 필수적인 기능이었습니다. REST API를 활용한 방식은 실시간성을 제공하지 못하는 한계가 있었습니다.

   • 이를 해결하기 위해 양방향 통신이 가능한 WebSocket을 도입하여 빠르고 원활한 데이터 송수신을 구현했습니다.

   • StompJS를 활용하여 Sub/Pub을 통해 지속적으로 WebSocket이 연결되고 있는지 확인했습니다.

3. GPT-4o모델 도입

   • Electron을 통해 사용자의 DeskTop 최상단 프로세스에 접근할 수 있었습니다.

   • 이 정보를 WebSocket에 담아 프롬프트 엔지니어링을 진행한 GPT-4o에게 사용자가 집중하고 있는 상태인지 판별하도록 했습니다.

   • 집중하고 있지 못하다면, 웹 앱의 UI가 변경되며, 그룹의 다른 사용자들이 Web RTC를 통해 사용자의 화면에 진입하여 방해할 수 있도록 설계했습니다.

이 프로젝트를 통해, AI 연동과 함께 실시간성과 사용자 경험을 동시에 고려한 프론트 구조 설계 경험을 쌓았습니다. 실무에서도 최신 기술을 분석하고, 가장 적절한 해결책을 찾는 태도로 적용해 나가겠습니다.

[조직의 생산성을 높이기 위한 시스템/문화를 구축한 경험]

게임 매니저의 업데이트된 버전을 테스트하는 과정에서 자동화 코드를 구축하여 테스트 자원 투입률을 70% 감소시켰습니다.

문제 상황

• 게임 시작 시 게임 매니저 툴에 노출되는 이미지를 GIF에서 JSON 파일로 변경하는 과정에서, 이미지가 여러 OS 및 URL 환경에서 정상적으로 노출되는지 확인해야 했습니다.

• 총 500여 개의 URL을 제한된 시간 안에 수작업으로 확인해야 했기 때문에, 작업량이 많고 비효율적이었습니다.

해결 방법

• 회사 내부에 테스트 자동화 툴이 존재했지만, 원하는 기능(영상 촬영 기능)이 없었음

• 따라서 테스트 설계 단계에서 필요한 자동화 스텝을 설정하고, 직접 자동화 프로그램을 제작

• 여러 자동화 라이브러리를 분석한 후, 여러 OS 상에서의 자동화에 특화된 Selenium을 선택하여 코드 작성

• 게임 매니저 툴 구동을 확인하고, 테스트 과정을 영상으로 저장하는 자동화 프로그램을 완성

결과

• 이후 다른 테스트에서도 이 프로그램을 재사용하여 테스트에 필요한 시간과 인력 투입을 감축

• 효율적인 QA 프로세스 전략을 수립하여 테스트 리소스를 70% 절감

이 경험을 통해 효율적인 프로세스 개선에 대한 시도와 도전을 두려워하지 않고, 문제 해결을 위해 다양한 기술을 학습하고 적용하는 능력을 기를 수 있었습니다.