들어가며

작년까지 나는 회사에서 상담시스템의 Frontend를 개발하고 있었다. 이 시스템은 사내망을 사용하는 상담사가 사용하기 때문에 인증과정 등을 포함한 모든 설계가 사내망을 기준으로 진행되었는데, 이 시스템의 데이터를 활용하고자 하는 다른 요구가 있어 사외에서도 이 시스템의 데이터를 활용할 수 있는 서비스를 추가적으로 개발하게 되었다.

주요 요구사항

자세히 기재할 수는 없지만 신규 시스템에 대한 아래와 같은 요구사항이 있었고, 이를 만족시킬 수 있는 시스템을 구현하기로 하였다.

1. 사외망에서 접근하는 상담사도 사용할 수 있어야 함
2. 사내 특정 직군에서 사용하는 모바일 앱을 통해 본 시스템에 접속할 수 있어야 함
   (모바일 전용 페이지 제공)
3. 위 두 요구사항을 만족하기 위해서는 기존 상담시스템의 사내 인증절차가 없어야 함

한 마디로 요약하면, 사외에서 활동하는 직원을 위해 사내 인증절차를 생략하고 시스템의 데이터를 활용할 수 있는 시스템을 만들어 달라는 것이다.

시스템 설계

위 요구사항을 만족하는 시스템을 만들기 위해 고민을 참 많이 했었는데, 일단 현재 투입할 수 있는 리소스를 고민하지 않을 수가 없었다. 대략 다음과 같았다.

현재 리소스 상황

1. 개발자는 나 포함 2명이다.
2. 기존 상담시스템은 Vue.js 3.3.4 기반의 SPA Application이며, 자체 UI 컴포넌트를 사용하여 구현한다.
3. 자체 UI 컴포넌트는 모바일(반응형) 설계가 되어있지 않은 상태이다.
4. 서버 인프라는 AWS VPC 기반의 정적 구성 (ALB + EC2) 조합
5. PoC 성격으로 일부 사외 상담사 지원을 위해 기 구현된 서비스가 있음
   (연초에 PHP + Vue.js non-compiled 방식으로 재구현 한 이력이 있으며, 사내인증을 하지 않고 서버간 인증을 수행하는 방식으로 동작함)

도출된 개발 방향

위 리소스 상황을 고려했을 때, 최대한 불필요한 작업은 하고싶지 않았다. 일단 개발인력이 많지 않고 초도버전 배포까지의 개발 기간도 길지 않기(2 ~ 3개월) 때문이었다. 따라서 나는 자체적으로 다음과 같은 구현목표를 설정해 두고 개발을 시작하였다.

1. 서버 인프라는 기존 인프라를 재사용한다. (배포시스템 포함)
2. 기술스택은 PHP + Vue.js non-compile 방식을 사용
   1. 기존에 PoC 성격으로 운영중인 외부 연동 서비스의 개발방식을 그대로 사용
      (해당 서비스도 함께 호환성을 유지했어야 했음)
   2. PHP가 필요한 이유는 시스템 접속시 서버간 인증 처리를 구현하기 위함
   3. 기존 상담시스템을 위해 기 구현해 둔 UI 컴포넌트를 재사용할 수 있음
3. user-agent 식별과 화면폭 감지를 통해 적응형 / 반응형 기능을 적절히 혼합하여 구현

구현과정에서의 어려웠던 부분

사외 서비스를 구현하면서 대표적으로 어려웠던 부분을 정리하면 아래와 같다.

UI컴포넌트의 반응형 UI 지원

기존에 구현했던 상담시스템은 PC사용을 기반으로 구현되었기에 UI컴포넌트 또한 반응형 또는 모바일 UI를 고려하지 않고 구현된 상태였다. 가장 대표적인 컴포넌트가 바로 DataTable 컴포넌트였는데, 아래 그림과 같이 가로로 나열되던 테이블을 세로로 표현하도록 구현하였다. 그리고 그 밖에 모바일 화면을 위한 전용 디자인잉 필요한 UI 컴포넌트는 그때그때 필요한 부분을 구현 하면서 대응해 갔다.

기존 DataTable 컴포넌트가 렌더링 했던 표의 형태

모바일 환경에서 필요한 DataTable의 형태

기존 DataTable 컴포넌트의 기능을 확장하여 모바일 환경일 때 위 테이블의 형태를 아래와 같은 형태로 변경하도록 구현하였다. 위 테이블은 table 태그로 구현되었지만, 아래 표의 형태는 유연성을 갖추기 위해 flex box로 구현하였으며, props를 이용하여 형태의 변화를 자유롭게 할 수 있도록 DataTable 컴포넌트의 기능을 확장하였다.

캐싱전략의 부재

신규 시스템의 초기버전을 운영배포 하면서 문제가 한 가지 발생했는데, 바로 브라우저 캐시로 인해 신규 버전의 리소스 다운로드가 진행되지 않았다는 점이다. 이로 인해 서비스를 배포하자마자 기존 외부연동 서비스가 정상적으로 동작하지 않는 문제가 발생했었다. 원인은 각종 리소스파일(.vue 파일 포함)이 모두 브라우저에 캐싱 되어있어서 신규 배포된 파일을 브라우저가 다운로드 하지 않아 발생했던 것이었다.

이 문제는 다음과 같은 원칙을 웹서버 설정에 적용함으로써 방법으로 해결할 수 있었다.

1. html 응답을 수행하는 php 파일은 캐시하지 않도록 한다.
2. 배포스크립트가 실행되는 시점에 임의의 문자열을 생성하여 리소스 캐싱 parameter로 사용한다.
   
   1. 빌드스크립트가 실행되는 시점에 생성되는 임의의 문자열을 _STRING_ 이라 할 때,
   2. 빌드스크립트가 endpoint 역할을 수행하는 php 파일의 $VERSION 변수 값을 _STRING_으로 교체한다.
   3. $VERSION 값을 활용하여 각종 리소스파일을 import 할 때 하기와 같은 query parameter를 전달함으로써 최신버전의 리소스파일을 무조건 다운로드 할 수 있게 한다.
      https://도메인/리소스.js?ver=_STRING_
   4. js 파일에서 직접 import문으로 불러오는 파일의 경우, query parameter를 부여할 수 없기 때문에 빌드시점에 파일명을 변경함으로써 신규 버전의 파일을 무조건 다운로드 할 수 있게 한다.
      예) import a from './file.js'; 인 경우 빌드시점에 import a from './file._STRING_.js'; 로 변경한다.

정리

내용이 굉장히 짧게 정리 되었지만 여기에는 적을 수 없는 내용도 너무 많고, 기억도 잘 안 나기에 이 정도로 정리할까 한다. 생각보다 vue.js를 non-compile 방식으로 사용하는 것도 여러모로 편리했다.

관련 컨텐츠

1. [개발] 상담시스템 Frontend 개발기 - 1편
2. [개발] 상담시스템 Frontend 개발기 - 2편
3. [개발] 상담시스템 Frontend 개발기 - 3편