템플릿화 시스템의 구조

템플릿화 시스템의 구조

Admin Side

• 이벤트 운영에 필요한 정보를 입력하고 저장하는 백오피스 역할이다.
• 특정 유저 노출에 필요한 정보와 이벤트 당첨 정보를 관리한다.
• 백오피스에서 입력된 정보를 저장하고 조회 기능을 통해 다시 확인이 가능

 

Data Side

• 이벤트 정보와 신청 정보를 저장하는 데이터베이스(DB)로 구성된다.
• 데이터는 필요 시 조회하여 User Side에 노출한다.

 

User Side:

• 저장된 정보를 바탕으로 화면에 노출되는 구조이다.
• FO 템플릿 (유형 1, 2, 3):
  • 여러 유형의 템플릿이 존재하며, 각 유형에 맞춰 화면에 표시된다.
  • 분기 처리하여 하나의 구조로 다양한 템플릿을 노출하거나, 각각의 템플릿을 별도로 설정할 수 있다.

---

템플릿 시스템의 작동 원리

• 어드민(백오피스)에서 이벤트 정보를 입력하고 저장하면,
  저장된 정보를 기반으로 화면에 노출할 항목들이 각 유형별로 자동으로 적용될 수 있도록 로직화가 필요하다
• 템플릿 유형(유형 1, 2, 3 등)을 하나의 구조에서 분기 처리하여 다양한 형태로 노출하거나,
  각각의 유형에 따라 별도의 템플릿을 설정하여 랜딩 페이지를 다르게 구성하는 방법이 있다.
• 이러한 방식 선택은 기획과 개발상의 자유도에 따라 결정이 가능하다.

 

기획 시 고려해야 할 항목들

1) 템플릿 기획 및 프론트 기획

- 저장된 정보를 기반으로 각 템플릿에 대한 로직을 정의해야 하므로, 템플릿과 프론트엔드에 대한 기획이 선행되어야 한다.

 

2) 데이터 기획

- 프론트 기획이 데이터를 참고하기 때문에, 프론트 기획에 필요한 데이터 기획이 함께 이루어져야 한다.

 

3) 백오피스 기획

- 데이터를 입력하는 화면을 설계할 때 기획자마다 접근 방식이 다르다.

 

---

템플릿에 대한 이해

예시 1.

 

1) 템플릿과 URL 구조 이해

- 템플릿은 여러 가지 유형으로 나누어질 수 있으며, URL 구조를 통해 내부에서 템플릿을 분리하여 노출한다.

- URL에서 특정 ID 값이나 시퀀스 번호가 템플릿에 데이터를 호출하는 역할을 한다.

- 예를 들어, 기사 URL에서 ID 값만 다르고 나머지가 동일하다면, 이는 특정 데이터를 호출해오는 값으로 볼 수 있다,

 

2) 템플릿의 이름과 시퀀스 번호

- URL 앞부분에 위치한 특정 값(예: 템플릿의 이름)을 통해 템플릿이 무엇인지 식별할 수 있다.

- 뒤에 붙는 시퀀스 번호는 데이터베이스에서 호출한 데이터를 템플릿에 전달하는 역할을 하며, 이 값에 따라 콘텐츠가 달라진다.

- 유형 관리가 필요한 경우, 시퀀스 번호 외에 유형 번호를 추가하여 여러 콘텐츠 유형을 구분할 수 있다.

 

3) 데이터 호출 방식의 확인 방법

- URL의 시퀀스 번호를 변경(예: 48011 → 48012 → 48013)하며 페이지 변화를 확인할 수 있다.

- 동일한 위치에 동일한 형식으로 나타나는 UI가 있다면, 이는 로직화된 템플릿으로 볼 수 있으며,
정해진 위치에 데이터를 불러와 고정된 형식으로 보여주는 방식.

- 상품 상세 페이지나 기사 페이지처럼 구조는 동일하되 내용만 달라지는 형태로
기획자가 로직을 설정해 두었을 가능성이 크다고 볼 수 있다.

 

4) 기획 시 고려 사항

- 템플릿을 구성할 때 고정적인 위치와 변경될 데이터 항목을 구분하여 설계해야 한다..

- 반복적으로 사용될 데이터 항목에 대해 로직을 정의하고,
이를 통해 다양한 콘텐츠 유형을 효과적으로 노출할 수 있도록 템플릿을 기획해야 한다.

 

 

5) 각각에 대한 설명

 

• template_id=001 : 템플릿 ID로, 어떤 화면 템플릿을 사용할지 지정. 여기서 "001"은 특정 템플릿 유형을 의미함.
• content_id=202411030001 : 콘텐츠 ID로, 특정 기사나 콘텐츠의 고유 ID. 이 번호만 변경하면 다른 콘텐츠가 동일한 템플릿에 표시됨.
• category=politics : 콘텐츠의 카테고리. 정치, 경제, 사회 등 카테고리에 따라 다른 콘텐츠를 분류할 수 있음.
• utm_source=google : 트래픽 소스를 나타내며, 여기서는 Google에서 유입된 트래픽을 의미.
• utm_medium=search : 트래픽의 유입 방식으로, 검색 엔진을 통한 유입을 나타냄.
• utm_campaign=fall_promo : 캠페인 이름으로, 특정 프로모션이나 마케팅 캠페인에 따른 트래픽을 분석하기 위해 사용.

 

 

예시 2. 네이버 블로그 형태

네이버 블로그 URL 예시

 

 

네이버 블로그의 URL에서는 ID와 시퀀스 번호를 통해 특정 콘텐츠를 호출한다.

- ID : techknockknock / 시퀀스 번호 : 32451

- techknockknock : 특정 사용자의 블로그임을 지정 / 32451: 해당 블로그의 특정 게시글을 지정.

 

[특징]

1) 템플릿 구조의 부재

- 네이버 블로그는 일반적인 웹사이트처럼 별도의 템플릿을 명시적으로 사용하지 않는다.

- 대신, ID별로 설정된 노출 방식을 이용하여, 게시글이 다양한 레이아웃으로 표시되도록 구성된다.

 

2) ID 설정을 통한 템플릿 호출 방식

- 네이버 블로그는 블로그 ID에 따라 레이아웃(템플릿) 설정이 다르게 적용된다.

> 예를 들어, 블로그 설정에서 게시글이 가운데 정렬되거나 오른쪽으로 정렬되도록 레이아웃을 지정할 수 있으며,
   이러한 정보가 ID에 연동되어 템플릿처럼 동작한다.

- 따라서, 특정 블로그 ID일 때 해당 ID에 설정된 레이아웃 방식에 따라 게시글이 자동으로 노출되는 구조다.

 

3) 데이터 호출 방식

- 블로그 ID에 맞는 레이아웃을 불러온 후, 시퀀스 번호를 통해 해당 게시글의 데이터를 호출하여 노출한다.

- ID에 따라 정해진 레이아웃을 유지하면서, 시퀀스 번호에 해당하는 게시글만 변경하여 화면에 표시된다.

 

 

예시 3. 네이버 블로그 vs 브런치

브런치 URL 예시

 

 

• @exampleuser : 브런치 사용자의 고유 아이디. 각 사용자는 이 고유 아이디로 구분된다.
• /164 : 해당 사용자가 작성한 특정 글의 시퀀스 번호로, 사용자별로 독립적인 번호가 부여된다.

브런치 특징

# 브런치는 모든 콘텐츠가 동일한 템플릿을 사용하므로 별도의 템플릿 ID가 없다!

- URL을 통해 특정 데이터를 직접 불러와서 동일한 구조로 표시하는 방식.

 

 

네이버 블로그와의 비교

1) 시퀀스 번호 구조 차이

# 네이버 블로그

• 모든 사용자 글의 시퀀스 번호가 전체적으로 유니크.
• 예를 들어, A라는 사람과 B라는 사람이 첫 글을 작성할 때, 각각 다른 유니크 번호가 할당된다.
• 블로그 전체에서 고유한 시퀀스를 사용하여 데이터를 관리한다.

 

# 브런치

• 각 사용자마다 독립적으로 시퀀스 번호를 부여받는다.
• 예를 들어, A와 B가 각각 첫 번째 글을 작성하면 둘 다 시퀀스 번호가 1번으로 시작된다.
• 사용자 ID를 키 값으로 하여 개인별 시퀀스 번호를 사용하는 방식으로 데이터를 저장한다.

 

2) 데이터 구조상의 장단점

블로그 방식 (전체 시퀀스 기준)

• 블로그는 검색이나 전체 데이터 관리 측면에서 유리하다.
• 전체 글을 대상으로 쿼리를 사용하여 검색하거나 정렬할 때,
  유니크한 시퀀스 번호가 있어 확장성이 뛰어나다는 장점을 가지고 있다.
• 네이버처럼 검색 기반 서비스를 제공하는 플랫폼에 적합한 구조이다.

 

브런치 방식 (개별 ID 기준)

• 개별 사용자의 글을 독립적으로 관리하는 방식이라 단순하다고 할 수 있다.
• 그러나 플랫폼이 확장되고 데이터 복잡성이 증가하면, 이 구조는 한계가 존재할 수 있다.
• 향후 복잡성이 증가할 경우, 구조 변경이 필요할 가능성이 높다.

 

3) 기획 시 고려사항

- 블로그와 같은 전체 유니크 시퀀스 구조는 검색과 데이터 활용에 유리하며, 데이터의 확장성을 고려한 기획에 적합하다.- - 브런치와 같은 개별 시퀀스 구조는 사용자별 독립적인 데이터 관리를 위한 간단한 기획에 적합하나,
장기적으로는 확장성에 유의해야 한다.