낭 만 당

3개월 개발 업무, 기억에 남는 업무 Key points 본문

Programming Record/Frontend

3개월 개발 업무, 기억에 남는 업무 Key points

낭만알파카 2026. 3. 25. 16:01

1. 식별의 정밀도: 사용자 ID를 넘어 oxuid 도입하기

일반적인 서비스는 유저 ID만으로 사용자를 식별하지만, 실제 운영 환경에서는 한 사용자가 여러 브라우저를 쓰거나 여러 개의 탭을 띄워놓고 작업하는 경우가 비일비재합니다. 이때 동일 계정 내에서 발생하는 데이터 충돌을 제어하기 위해 oxuid(Browser-level Unique ID)를 도입했습니다.

브라우저 세션이나 로컬 스토리지에 고유 키를 생성하여 저장하고, 모든 API 요청 헤더에 이를 포함시켰습니다. 이를 통해 로그 추적 시 어떤 사용자가 수정했는지를 넘어, 어느 브라우저 컨텍스트에서 발생한 행위인지 명확히 분리할 수 있게 되었습니다. 이는 CS 인입 시 클라이언트의 로컬 상태와 서버의 타임라인을 매칭하는 결정적인 단서가 됩니다.

2. 소켓 기반의 실시간 동시 편집 제어

관리자 대시보드에서 두 명 이상의 관리자가 동일한 항목을 편집할 때 발생하는 덮어쓰기 문제는 서비스의 신뢰도와 직결됩니다. 이를 해결하기 위해 단순 HTTP 요청이 아닌 웹소켓 기반의 실시간 상태 동기화 구조를 설계했습니다.

핵심은 세 가지입니다. 먼저 유저 ID와 oxuid를 조합하여 누가 어떤 브라우저에서 편집 중인지 식별합니다. 이후 입력 시작, 저장, 취소 같은 이벤트를 소켓으로 전파하여 다른 편집자의 화면에 즉시 반영합니다. 마지막으로 동일 항목 수정 시 잠금 표시나 경고 문구를 띄워 사용자가 현재 상태를 이해하고 안전하게 복구할 수 있는 UX를 제공합니다. 동시 편집에서 중요한 건 충돌을 0으로 만드는 것보다, 충돌 상황에서도 데이터가 안전하게 보존된다는 확신을 주는 것이었습니다.

3. 타입 시스템의 엄격함: any 배제와 제네릭의 경계

타입스크립트는 단순한 장식이 아니라 프로젝트의 설계도여야 합니다. 모든 변수와 함수에서 any 타입을 완전히 배제하고 명확한 인터페이스나 타입을 선언하는 것을 원칙으로 삼았습니다. 이는 협업 시 동료가 내 코드를 직관적으로 이해하게 만드는 최소한의 약속입니다.

특히 제네릭은 단순히 타입을 재사용하기 위한 문법을 넘어, 함수나 컴포넌트가 책임지는 입력과 출력의 경계를 분명히 해주는 도구로 활용했습니다. 이를 통해 기능이 커질수록 발생할 수 있는 런타임 에러를 컴파일 단계에서 차단하고 유지보수 효율을 극대화했습니다.

4. 도구와 습관: 집중력을 유지하는 기술

배열이나 객체 처리에서 매번 비슷한 로직을 새로 작성하면 실수가 늘어납니다. Lodash 같은 검증된 라이브러리를 적절히 활용해 반복 패턴을 줄이고 코드 가독성을 높였습니다. 또한 터미널 활용과 단축키 숙달은 단순히 속도를 높이는 것이 아니라 사고의 흐름을 유지하기 위한 전략입니다. 창 전환이나 파일 검색에 들어가는 에너지를 줄여 맥락 전환 피로를 최소화했습니다.

공식 문서를 읽을 때도 처음부터 끝까지 읽기보다는, 지금 해결해야 할 질문을 먼저 정의하고 필요한 섹션 중심으로 파고드는 방식을 택했습니다. 읽은 내용을 즉시 코드와 체크리스트에 반영할 때 지식은 비로소 내 것이 되었습니다.


UX와 환경의 디테일: 보이기보다 버티기

1. 반응형 레이아웃과 터치 인터페이스

반응형 작업의 본질은 화면 크기에 맞춰 예쁘게 보이는 것을 넘어, 어떠한 해상도에서도 레이아웃이 깨지지 않고 사용자 동선이 유지되는지에 있습니다. 브레이크포인트마다 텍스트 배치, 간격, 버튼의 우선순위를 확인하는 과정을 체크리스트에 넣었습니다. 특히 데스크톱의 마우스 클릭과 모바일의 터치 인터페이스가 각 환경에서 오동작 없이 정확히 트리거되는지 전 기기에서 교차 검증합니다.

2. 개발자 도구의 입체적 활용

문제 원인이 코드가 아닐 때도 많다는 것을 배웠습니다. 네트워크 탭을 통해 요청과 응답, 페이로드, 응답 시간을 집요하게 파악하고, 애플리케이션 탭에서 로컬 스토리지나 세션 값이 의도대로 들어가는지 확인하는 것을 습관화했습니다. 이를 통해 특정 상황에서만 발생하는 간헐적 이슈를 훨씬 빠르게 잡아낼 수 있게 되었습니다.


배포 전후 체크리스트: 마지막 방어선

배포 전: 환경의 분리와 정합성 점검

로컬 및 CI 환경에서 빌드 에러 없이 깔끔하게 완료되는지 확인하는 것은 기본입니다. 가장 중요한 것은 운영 환경용 API 엔드포인트, DB 접속 정보, 보안 키가 누락 없이 적용되었는지 점검하는 것입니다. 개발용 데이터와 운영용 데이터가 섞이지 않도록 환경 변수를 철저히 분리하고, 내가 구현한 기능이 기존의 타 플랫폼이나 모듈에 부정적인 영향을 주지 않는지 영향도를 평가합니다.

배포 후: 실시간 모니터링과 피드백

배포 직후 스테이징 서버에서 테스트했던 핵심 시나리오가 운영 환경에서도 동일하게 작동하는지 즉시 확인합니다. 브라우저 콘솔 창에 예기치 못한 에러 메시지가 출력되지 않는지, API 응답 속도가 사용자 경험을 저해할 정도로 느려지지는 않았는지 실시간으로 모니터링합니다. 마지막으로 배포 완료 상황을 팀에 공유함으로써 전체 공정의 마침표를 찍습니다.