관리자 설정으로 앱·파트너 웹의 콘텐츠 화면을 관리한 템플릿 구조

에코야얼스에서는 앱 포인트로 응모·기부 프로모션에 참여할 수 있었습니다. 이 콘텐츠는 고객 앱의 WebView로 보여 줘야 했고, 일부 서비스는 파트너 웹에도 띄워야 했습니다.

관리자가 설정한 콘텐츠는 앱과 파트너 웹에서 같은 규칙으로 보여야 했습니다. 제휴사마다 제공하는 서비스가 다를 수 있어서, 관리자가 고른 서비스에 맞는 콘텐츠만 보여 줘야 하기도 했습니다.

앱은 앱 개발자가, 웹은 제가 맡았기 때문에 클라이언트마다 적용할 표시 규칙과 로직도 정리해서 공유해야 했습니다.

콘텐츠 화면을 한곳에서 관리하려고 HTML 템플릿, 데이터 치환, 미리보기 구조를 직접 설계했습니다.

클라이언트가 모두 JavaScript/TypeScript를 쓰고 있어서 필요한 로직을 같은 함수로 만들어 넘길 수 있었습니다. 템플릿을 관리하는 쪽과 클라이언트가 그 템플릿을 적용하는 쪽은 나눠서 만들었습니다.

처리 흐름은 다음과 같습니다.

1. 관리자에서 HTML 템플릿을 작성하고 미리보기로 표시를 확인합니다.
2. 작성한 템플릿을 서버에 저장합니다.
3. 클라이언트는 상세 API에서 마크업과 콘텐츠 데이터를 받습니다.
4. 정해진 규칙으로 문자열을 치환하고 HTML을 렌더링합니다. 표시 플래그와 CSS로 콘텐츠 영역을 제어합니다.

저는 템플릿, 데이터 치환, 미리보기 구조를 설계해 만들고, 클라이언트마다 필요한 로직을 함수로 정리해 넘겼습니다. 처음 적용하는 작업은 클라이언트마다 따로 했는데, 앱 쪽 개발과 적용은 앱 개발자가 맡았고 로그인 여부와 데이터도 앱이 관리해서 넘겨 줬습니다.

제휴사 웹은 관리자에서 제휴사를 등록하면 링크가 만들어지고, 그 링크의 플래그로 들어오면 서버가 검증하는 흐름이었습니다. 관리자가 제휴사별로 서비스를 고르면 그 콘텐츠만 보입니다. 예를 들어 한 제휴사에는 수거만, 다른 제휴사에는 수거와 기부를 같이 열어 줄 수 있습니다.

콘텐츠 화면은 관리자에서 관리하고, 앱과 파트너 웹은 같은 표시 규칙을 따르게 됐습니다. 제휴사별로 고른 서비스에 따라 보이는 콘텐츠도 달라집니다. 처음 구조를 잡은 뒤로는 크게 바뀐 부분이 없었습니다.