SK쉴더스·캡스홈·사이버가드: 보안 서비스 B2C 웹 운영 및 통합

SK쉴더스는 물리보안, 사이버보안, 융합보안 등의 보안 서비스를 개인과 기업 고객에게 제공하는 종합 보안 기업입니다.

캡스홈은 가정과 소규모 사업장을 대상으로 CCTV, 출동 보안 등을 제공하는 홈 보안 서비스입니다. 사이버가드는 중소·중견기업에 정보보안 서비스를 제공하는 기업용 보안 서비스입니다.

이 프로젝트에서는 운영 중이던 SK쉴더스 통합 홈페이지에 캡스홈과 사이버가드를 추가로 개발했습니다. 따로 제공되던 두 서비스의 콘텐츠와 기능을 기존 홈페이지 구조에 맞게 연결해, 사용자가 SK쉴더스의 보안 서비스를 한 웹사이트에서 찾아보고 이용할 수 있게 했습니다.

• 통합 웹 편입 중 신규 개발과 운영 병행: 따로 운영되던 캡스홈·사이버가드를 SK쉴더스 통합 웹으로 편입하는 동안 신규 UI/UX 개발과 기존 사이트 운영·유지보수를 함께 맡았습니다.
• Webflow와 Vue.js 역할 분리: Webflow로는 디자인과 공통 스타일을 관리하고, 인라인 Vue.js로는 서버 통신과 상태·동적 값을 처리했습니다. 이렇게 나눠서 Webflow로 만든 화면에도 동적 기능을 넣을 수 있었습니다.
• 실시간 요금 계산과 가입 흐름 단순화: 제품·옵션별 단가로 요금을 계산하는 클라이언트 로직을 구현해, 옵션을 고르는 즉시 예상 구독 요금이 보이게 했습니다. 본인 인증, 할인 선택, 주소 입력, 결제 정보 입력도 단계를 다시 구성했습니다.
• 결제 시나리오 정의와 검수: 옵션 개수, 할인 적용 여부, 오류 처리, 뒤로가기·새로고침 시 상태 유지 등 결제 중에 생길 수 있는 시나리오를 정의하고, 이 목록으로 구독·결제 기능을 검수했습니다.
• 개발 PM으로 요구사항·일정 관리: 현업 요구사항을 구현 가능한 단위로 정리하고, 개발 흐름과 예상 작업 시간, 우선순위를 담당 책임자와 조율했습니다. 일정과 업무를 관리하면서 WBS, 프로세스 흐름도 같은 산출물을 정리해 개발과 현업이 같은 문서를 기준으로 소통할 수 있게 했습니다.

다른 직군과 문서를 작성하며 서비스 흐름을 함께 정리한 점

개발 PM을 맡으면서 다른 직군 담당자들과 일하며 WBS, 플로우차트, 테스트 시나리오를 직접 써 봤습니다. 개발과 함께 일정, 처리 흐름, 검수 기준까지 문서로 남겨 본 게 좋았습니다.

플로우차트를 그릴 때는 화면 뒤에서 서버끼리 데이터가 어떻게 오가는지도 같이 논의했습니다. 덕분에 화면 동작을 서버 간 데이터 흐름과 이어서 이해하게 됐습니다.

테스트 시나리오로 엣지 케이스를 구체화한 점

테스트 시나리오를 쓰면서 조건과 예외 상황을 하나씩 정의했고, 그 기준대로 테스트했습니다. 옵션 선택, 할인 적용, 오류 표시, 뒤로가기·새로고침 후 상태 유지 같은 경우를 미리 적어 두고 그대로 검수해 본 경험이 좋았습니다.

사용자 행동을 자세히 비교·분석하지 못한 점

화면과 결제 흐름은 바꿨지만, 바꾸기 전후로 사용자 행동이 어떻게 달라졌는지는 제대로 비교해 보지 못했습니다. 다음에는 GA/GTM을 설정하기 전에 무엇을 확인할지, 어떤 기준으로 잴지부터 정하려고 합니다. 그 기준으로 전후 행동 차이를 보고, A/B 테스트로 대안을 비교하는 것도 해 보고 싶습니다.

테스트 코드 작성과 자동화까지 이어 가지 못한 점

테스트 시나리오로 검수까지는 했지만, 그 시나리오를 테스트 코드로 옮기거나 자동화하지는 못했습니다.

다음 프로젝트에서는 시나리오를 테스트 코드로 작성하고 자동화까지 직접 해 보고 싶습니다.