섹션 템플릿 ③ 기능·프로세스·통계·로고·팀·포트폴리오

서비스의 강점을 나열하고, 진행 순서를 보여 주고, 숫자와 고객사로 신뢰를 더하고, 사람과 작업물을 소개하는 부분은 대부분의 랜딩 페이지에 들어갑니다. 에디터의 섹션 추가 창에는 이런 내용을 담는 템플릿이 기능 10종, 프로세스 7종, 통계 8종, 로고 벽 7종, 팀 소개 7종, 포트폴리오 6종 준비되어 있습니다. 이 글에서는 카테고리별로 어떤 모양이 있는지 살펴보고, 넣은 뒤 숫자를 고치고 카드를 늘리는 방법까지 안내합니다. 창을 여는 방법과 탭 구성, 히어로·CTA, 후기·가격·FAQ 템플릿은 별도 글에서 다룹니다.

1. 어디에 있나요

섹션 추가 창의 섹션 템플릿 탭에서 왼쪽 카테고리 목록의 기능, 프로세스, 통계, 로고 벽, 팀 소개, 포트폴리오를 고르면 카드가 나타납니다. 카드를 누르면 그 섹션이 바로 페이지에 들어갑니다. 이름의 일부를 위쪽 템플릿 검색에 넣어 좁혀 볼 수도 있습니다.

2. 기능 템플릿 10종

서비스나 상품의 장점을 카드·목록·표로 보여 주는 템플릿입니다.

• 3열 기능 카드, 아이콘 가로형: 아이콘과 짧은 설명이 든 카드 여러 장
• 좌우 기능 리스트, 좌우 교차 기능: 사진 자리와 체크 목록을 좌우로 배치
• 비교 테이블 기능: 우리 서비스와 다른 서비스 두 곳을 표로 비교
• [SaaS] 다크 보라 카드, [Dev B2B] 코드 + 기능 듀얼, [Agency] 과감한 그리드: 어두운 배경의 영문 제목형
• [Editorial] 따뜻한 큐레이션 카드: 번호가 붙은 항목 목록
• [Ecommerce] 상품 가치 강조: 큰 수치 4칸과 구성 항목 체크 목록

3. 프로세스 템플릿 7종

진행 순서를 단계나 시간 순으로 보여 줍니다. 단계별 프로세스는 번호 카드 3장, 타임라인 프로세스는 세로선을 따라 Day 1부터 Day 30까지 이어지는 형태입니다. [SaaS] 다크 4단계 워크플로우, [Agency] 4단계 협업 방식은 4단계에 소요 시간이나 기간이 붙고, [Editorial] 12주 학습 여정은 주차 구간별 세로 목록, [Dev B2B] 코드 워크플로우는 단계마다 명령어 예시 박스가 있습니다. [Ecommerce] 주문 → 배송 프로세스는 주문부터 시작까지 4단계 카드와 하단 보장 문구로 구성됩니다.

4. 통계 템플릿 8종

다크 통계는 보라색 배경에 큰 숫자 4개, 라이트 통계 카드는 제목 아래 흰 카드 4장입니다. 프로그레스 바 통계는 왼쪽에 설명, 오른쪽에 퍼센트 막대 4줄이 있습니다. [SaaS], [Editorial], [Dev B2B], [Ecommerce], [Agency] 이름이 붙은 5종은 각각 메트릭 그리드, 4칸 성과 숫자, 모니터링 지표 카드, 5개 숫자, 임팩트 숫자 구성입니다.

5. 로고 벽 템플릿 7종

함께한 고객사나 소개된 매체를 한 줄로 보여 주는 템플릿입니다. 심플 로고 벽은 한 줄 문구와 회사 이름 6개, 로고 + 수치는 수치 4칸과 파트너 이름 줄, [Editorial] 추천 매체 로고는 인용문과 매체 이름, [Ecommerce] 미디어 노출 + 인증은 매체 이름과 인증 배지 4개를 담습니다. 템플릿 안의 로고는 이미지가 아니라 회사 이름 글자로 들어 있습니다.

6. 팀 소개와 포트폴리오

팀 소개 7종 중 팀원 카드는 이니셜 원 아래에 이름·직함·소개가 들어가고, 미니멀 팀 소개는 왼쪽 문구와 오른쪽 구성원 목록으로 나뉩니다. [Dev B2B] 엔지니어 팀은 이니셜 카드이고, [SaaS]·[Editorial]·[Ecommerce]·[Agency] 계열은 사진 자리가 있는 카드형입니다.

포트폴리오 6종 중 포트폴리오 그리드는 분야 태그와 성과 문구가 든 색 카드이고, [SaaS] 다크 케이스 스터디·[Editorial] 졸업생 성과 사례는 사진 자리와 사례 설명, [Ecommerce] 베스트셀러 그리드는 순위와 가격이 붙은 상품 카드입니다.

7. 넣은 뒤 고치기

카드로 고르면 섹션이 페이지 맨 아래에 붙습니다. 글자를 누르면 텍스트 편집 창이 열리며, 한 덩어리 글자는 Ctrl+A로 모두 선택한 뒤 새로 입력하고 Esc로 마칩니다. 통계 카드는 숫자와 설명이 각각 따로 있으니 하나씩 고칩니다.

카드 칸을 누르면 카드 전체가 선택되고 오른쪽 위에 작은 ⋮ 단추가 나타납니다. 누르면 툴바가 펼쳐지며 왼쪽으로 이동, 오른쪽으로 이동, 요소 설정 열기, 레이아웃 / 간격, 링크 넣기, 요소 복제, 요소 삭제 단추가 있습니다. 칸의 순서를 바꾸거나 필요 없는 칸을 지울 때 씁니다.

칸을 늘리려면 요소 복제를 누릅니다. 복제한 카드는 원본 바로 옆에 생기고 카드 폭은 한 줄에 맞게 다시 나뉩니다. 복제본의 글자를 고치면 칸 하나가 새로 추가됩니다.

섹션 전체는 옆의 위로 이동, 아래로 이동 버튼으로 순서를 바꾸고, 섹션 도구 모음의 섹션 복제, 섹션 삭제로 늘리거나 지웁니다. 사진 자리는 이미지 요소를 다룬 별도 글에서 안내합니다.

8. 이렇게 활용해 보세요

• 소개 페이지는 기능 → 프로세스 → 통계 → 팀 소개 순으로 쌓으면 무엇을 하고, 어떻게 진행하고, 누가 하는지가 이어집니다.
• 같은 이름 계열([SaaS], [Editorial] 등)끼리 묶어 쓰면 배경과 글꼴의 분위기가 맞습니다.
• 영문 제목형 템플릿도 제목과 설명을 한글로 바꿔 쓸 수 있습니다.

9. 알아 두실 점

• 템플릿에는 수치, 회사·매체·기관 이름, 인증 문구, 사람 이름, 가격이 예시로 들어 있습니다. 공개 전에 모두 실제 사실에 맞게 바꾸거나 지워 주세요.
• 비교 테이블 기능의 다른 서비스 열과 가격, 팀·포트폴리오의 사진 자리도 예시입니다.
• 고친 내용은 상단의 저장을 눌러야 보관됩니다.

색과 글꼴을 한꺼번에 맞추는 방법은 테마를 다룬 별도 글에서 안내합니다.