서비스 페이지는 어떻게 만들 것인가 - 기술계·B2B를 위한 정리 절차

· 업데이트: · · 웹사이트 제작, SEO, 서비스 페이지, B2B, 문의 동선

수정 이력(5건, 최종 수정 2026년 08월 23일)

이 글에 적용한 변경 사항의 기록입니다. 보관해 둔 수정 전 버전은 DOI가 부여된 고정 URL에서 읽을 수 있습니다.

서비스 페이지의 역할을 정하는 방법, CTA 문구 나눠 쓰기, 공개 전 체크 사용법을 그림으로도 따라갈 수 있도록 Mermaid 그림 5점을 추가했습니다(본문 500~750자당 그림 1점 규약에 맞춘 것입니다). 기존 와이어프레임 그림에도 캡션을 붙이고, 그림 번호를 일련으로 다시 매겼습니다. 본문 문장은 바꾸지 않았습니다.
글 맨 앞에 「이 글의 지식 맵」절을 추가했습니다. 본문에서 다루는 개념과 그 관계를 요약·그림·상세 페이지 링크로 정리한 것입니다. 본문의 주장은 바꾸지 않았습니다.
외부 리뷰(1283건) 대응으로 본문을 갱신했습니다. 개별 변경 내용은 아래 이력을 참고하십시오.
중복되어 있던 2장과 3장을 하나의 표로 합쳤습니다. 다른 업종(장치 제조사, 수주 개발)에서 쓰면 어떻게 되는지의 예를 새로 만들고, CTA 예는 나눠 쓰는 축마다 다시 정리했습니다. 6블록 배열을 보여 주는 와이어프레임 그림과, 체크리스트가 1장·2장의 어디에 해당하는지를 보여 주는 열을 추가했습니다.
출처가 본문 어디에서도 참조되지 않아 「참고 자료」에 표시되지 않던 문제를 수정했습니다. 본문 내용은 바꾸지 않았습니다.
최초 공개
이 글을 인용하기(DOI: 10.5281/zenodo.21635222)

이 글은 Zenodo에 보관되어 있습니다. 항상 최신 버전으로 연결되는 DOI와 지금 보고 있는 버전에 고정된 DOI를 아래에 함께 제시합니다.

Go Komura (2026). 「서비스 페이지는 어떻게 만들 것인가 - 기술계·B2B를 위한 정리 절차」. 합동회사 코무라소프트. https://doi.org/10.5281/zenodo.21635222 https://comcomponent.com/ko/blog/service-page-structure-for-technical-b2b/

DOI(최신 버전)
10.5281/zenodo.21635222
DOI(이 버전)
10.5281/zenodo.21635223

서비스 페이지는 회사 소개의 연장이 아닙니다. 누구를 위한 어떤 상담을 받는 페이지인지를, 처음 수십 초 안에 알 수 있게 만들어야 합니다.

기술계·B2B 사이트에서 서비스 페이지가 약해지는 것은, 설명이 부족해서만은 아닙니다. 오히려 설명이 너무 넓어서, 누구를 위한 무엇의 페이지인지가 보이지 않게 되는 경우가 많습니다.

웹사이트 제작으로 사이트 구성을 다듬는 경우에도, SEO·문의 동선을 다시 보는 경우에도, 서비스 페이지의 역할은 같습니다. 「이 회사에 무엇을 맡길 수 있는가」를, 검색해서 온 사람이 바로 판단할 수 있게 하는 것입니다.

서비스 페이지가 약해지는 진짜 원인기술계·B2B 사이트에서 서비스 페이지가 약해지는 것은 설명이 부족해서만은 아니며, 오히려 설명이 너무 넓어서 누구를 위한 무엇의 페이지인지가 보이지 않게 되는 경우가 많고, 필요한 것은 무엇을 맡길 수 있는지를 검색해서 온 사람이 바로 판단할 수 있게 하는 것임을 나타내는 그림.서비스 페이지가 약하다원인이 설명 부족인 것만은 아니다설명이 너무 넓어 누구를 위한 무엇의 페이지인지 보이지 않는다목표 상태: 무엇을 맡길 수 있는지를 바로 판단할 수 있다

그림 1: 고칠 것은 설명의 양이 아니라, 누구를 위한 무엇의 페이지인가라는 범위 좁히기입니다.

1. 먼저 역할을 정합니다

서비스 페이지에는 적어도 세 가지 역할이 있습니다.

역할 무엇을 전하는가 자주 있는 실패
상담 입구 무엇을 맡길 수 있는가 할 수 있는 일이 너무 많아 고를 수 없다
비교 자료 다른 회사나 다른 서비스와의 차이 추상적이어서 판단할 수 없다
전송 전 확인 상담해도 되는 내용인가 문의 전에 불안이 남는다

이 세 가지를 정하지 않고 쓰기 시작하면, 누구의 무엇을 위한 페이지인지가 정해지지 않은 채로 문장만 늘어납니다. 증상은 분명해서, 5장의 체크포인트를 하나도 통과하지 못합니다. H1에 서비스 이름이 없고, 리드에 대상자를 쓰지 못하며, 대응 범위가 추상어로 채워지는 형태로 반드시 나타납니다. 서비스 페이지는 「잘 쓴 설명문」을 찾는 곳이 아니라, 판단하기 쉬운 구조를 만드는 곳입니다.

역할을 정하지 않고 쓰기 시작하면 어떻게 되는가상담 입구·비교 자료·전송 전 확인이라는 역할을 정하지 않고 쓰기 시작하면, 누구의 무엇을 위한 페이지인지가 정해지지 않은 채로 문장만 늘어나고, H1에 서비스 이름이 없으며 리드에 대상자를 쓰지 못하고 대응 범위가 추상어로 채워지는 형태로 반드시 나타난다는 것을 나타내는 그림.역할을 정하지 않고 쓰기 시작한다누구의 무엇을 위한 것인지 정해지지 않은 채 문장만 늘어난다H1에 서비스 이름이 없다·대상자를 쓰지 못한다·추상어서비스 페이지는 설명문이 아니라 구조를 만드는 곳

그림 2: 역할을 먼저 정하지 않으면, 증상은 반드시 같은 형태로 나타납니다.

이 글의 지식 맵

기술계·B2B 서비스 페이지는 상담 입구, 비교 자료, 제출 전 확인이라는 세 가지 역할을 전제로 하며, 이 역할은 H1과 짧은 리드, 지원 범위, 자주 묻는 질문과 같은 6블록 제목 구성이 각각 구현을 담당합니다. 제목은 H1부터 상담으로의 동선까지 상담자가 알고 싶은 순서로 배열해야 하며, 지원 범위 설명이 추상적인 말에 묻히면 누구를 위한 어떤 페이지인지가 알기 어려워지므로, 6블록 구성과 공개 전 5가지 점검이 이런 사태를 막는 역할을 합니다. 검색어를 그대로 제목에 쓰는 것과, 누른 뒤에 무엇이 일어나는지 알 수 있는 CTA 문구를 역할·세밀도·산출물·대상의 네 축으로 나눠 쓰는 것도 제출률을 좌우하는 실무상 권고로 둡니다.

서비스 페이지 구성의 지식 맵기술계·B2B 서비스 페이지가 맡아야 할 세 가지 역할과, 이를 구현하는 6블록 제목 구성, CTA 문구 설계, 공개 전 체크리스트의 관계를 보여주는 그림전제로 한다전제로 한다전제로 한다권장되는 대응보다 먼저 해야 한다보다 먼저 해야 한다보다 먼저 해야 한다보다 먼저 해야 한다보다 먼저 해야 한다권장되는 대응권장되는 대응사용은 비권장권장되는 대응권장되는 대응원인이 될 수 있다완화한다권장되는 대응권장되는 대응구현을 담당한다구현을 담당한다구현을 담당한다서비스 페이지서비스 페이지 6블록 구성상담 입구로서의 역할비교 자료로서의 역할전송 전 확인으로서의 역할H1과 짧은 리드 블록적합한 상담 블록대응 범위 블록산출물·진행 방식 블록자주 묻는 질문 블록상담 유도 블록검색어에 맞춘 제목 표현CTA 버튼 문구 설계범용 CTA 문구CTA 문구 구분 축페이지 중간에 상담 동선 배치대응 범위의 추상적 표현누구를 위한 어떤 페이지인지 알 수 없는 상태서비스 페이지 공개 전 체크리스트주어를 상담자 상황으로 바꾸는 작성법

그림의 실선은 항상 성립하는 관계, 점선은 조건이 붙는 관계입니다(성립 조건은 상세 페이지의 관계별 설명에 적혀 있습니다). 관계 전체 목록(총 21건, 근거와 확신도 포함)과 주요 개념의 정의는 지식 맵 상세 페이지에 정리되어 있습니다(일본어). 데이터: JSON-LD / Turtle

2. 권장하는 구성은 하나로 충분합니다

서비스 페이지에서는 제목의 배열이 곧 독자의 이해 순서가 됩니다. 그래서 제목은 내용의 이름이 아니라, 상담자가 알고 싶은 순서로 배열합니다. 기술계·B2B라면 다음 6블록이면 충분합니다.

순서 요소 제목 쓰는 법의 예 거기에 쓸 것 자주 있는 실패
1 H1과 짧은 리드 서비스 이름을 그대로 H1에 둔다 누구를 위한 무엇의 페이지인지를 2~3줄로 분명히 말한다 회사 이념부터 쓰기 시작한다
2 어떤 상담에 맞는지 이런 과제에 대응합니다/어떤 회사에 맞는지 상담자가 자기 상황을 찾을 수 있는 증상의 말. 맞지 않는 조건도 쓴다 제공 측의 기술 이름만 나열한다
3 대응 범위 대응 범위 어디부터 어디까지 하는지. 대상 외도 쓴다 「폭넓게 대응합니다」로 끝낸다
4 성과물이나 진행 방식 진행 방식/넘겨 드리는 것 상담 뒤에 무슨 일이 일어나고, 마지막에 무엇이 손에 남는지 공정 이름만 나열하고 성과물이 보이지 않는다
5 자주 묻는 질문 자주 묻는 질문 전송 전에 남는 불안을 먼저 없앤다 질문이 채용용이나 일반론이라 상담자의 불안과 무관하다
6 상담으로의 동선 상담하기 누른 뒤에 무슨 일이 일어나는지 알 수 있는 문구로 한다. 4장에서 자세히 다룹니다 버튼만 두고 문구가 「전송」인 채로 둔다

2의 「맞지 않는 조건」을 쓸 수 있는지가 가장 차이가 납니다. 거절처럼 보이지만, 실제로는 읽는 사람이 자신을 대입하는 도움이 되므로 상담의 질이 올라갑니다.

Google도, 사용자가 검색하는 말을 title이나 제목, 링크의 표시 문자(link text)에 두는 것을 권합니다. 서비스 페이지에서는 웹사이트 제작이나 SEO 같은 말을 그대로 쓰는 편이 헤매지 않습니다.12

2.1 화면에서는 어떻게 배열되는가

위의 6블록을, 페이지를 위에서 본 형태로 바꾸면 다음과 같습니다.

여기서 자기에게 맞다고 안 사람은먼저 상담으로 나아간다대응 범위에서 확신이 선 사람도여기서 나아간다1. H1과 짧은 리드누구를 위한 무엇의 페이지인가2. 어떤 상담에 맞는지맞는 조건·맞지 않는 조건3. 대응 범위어디까지 하는지·대상 외는 어디인가4. 성과물이나 진행 방식5. 자주 묻는 질문6. 상담으로의 동선

그림 3: 6블록의 배열과, 중간에 판단이 선 사람이 상담으로 나아가는 지름길 두 갈래입니다.

점선은, 중간에 판단이 선 사람이 그대로 상담으로 나아가는 길입니다. CTA를 맨 아래에만 두면 이 두 갈래가 사라집니다. 페이지 중간에도 상담으로의 동선을 두면, 판단이 선 시점에 나아갈 수 있습니다.

3. 다른 업종에서 쓰면 어떻게 되는가

이 구성은 자사 서비스 설명에만 쓸 수 있는 것이 아닙니다. 업종을 바꿔, 리드 문장과 제목 구성을 나눠 쓴 예를 두 건 듭니다. 둘 다 가상의 회사 문장 예입니다.

3.1 장치 제조사의 「제어 소프트웨어 개수」 페이지

리드 문장은 고치기 전과 후가 이렇게 바뀝니다.

  문장 예
고치기 전 오랜 기간 쌓아 온 기술력으로, 고객의 설비에 최적의 솔루션을 제공합니다
고친 뒤 출하가 끝난 검사 장치의 제어 소프트웨어를, 장치를 멈추지 않고 개수합니다. 설계자가 퇴직해 문서가 남아 있지 않은 장치도 대상입니다

제목의 배열은 2장의 6블록에 그대로 들어맞습니다.

  1. 검사 장치의 제어 소프트웨어 개수 ── 출하가 끝난 장치의 소프트웨어를, 멈추지 않고 고칩니다
  2. 이런 증상 상담이 많습니다 ── 특정 로트만 판정이 흔들린다, 장시간 운전에서 멈춘다. 장치는 돌아가는데 손을 댈 사람이 없는 회사에 맞습니다
  3. 대응 범위 ── 제어 PC 쪽 소프트웨어. 장치의 기계 부분과 하드웨어 설계는 대상 외입니다
  4. 진행 방식과 넘겨 드리는 것 ── 원인 분리, 재현 환경 작성, 개수, 실제 장비 확인. 소스 코드와 개수 내용의 기록을 넘겨 드립니다
  5. 자주 묻는 질문 ── 실물을 보낼 필요가 있는지, 기존 벤더와의 관계는 어떻게 되는지
  6. 상담하기 ── 「증상은 알지만 원인은 모른다」 단계에서도 받습니다

3.2 수주 개발 회사의 「기간계 시스템 보수 인수」 페이지

  문장 예
고치기 전 풍부한 실적을 바탕으로, 시스템의 수명 주기 전체를 지원합니다
고친 뒤 이전 개발 회사와의 계약이 끝난 기간계 시스템을, 가동한 채로 인수해 보수합니다. 사양서가 없고 소스 코드만 남은 상태부터 시작할 수 있습니다

어느 예도, 바꾸고 있는 것은 기술 설명의 양이 아닙니다. 주어를 「자사의 능력」에서 「상담자의 상황」으로 바꾸고 있는 것뿐입니다.

업종이 바뀌어도 고치는 법은 같다장치 제조사의 제어 소프트웨어 개수이든 수주 개발 회사의 보수 인수이든, 바꾸고 있는 것은 기술 설명의 양이 아니라 주어를 자사의 능력에서 상담자의 상황으로 바꾸는 것이며, 6블록 구성은 그대로 쓸 수 있음을 나타내는 그림.자사의 능력상담자의 상황리드 문장의 주어는기술력·실적·솔루션사양서가 없다·담당자가 퇴직했다·멈출 수 없다업종이 바뀌어도 6블록 구성은 그대로

그림 4: 나눠 쓰기의 정체는 설명량이 아니라, 주어의 교체입니다.

4. CTA는 「상담하기 쉬움」을 만듭니다

서비스 페이지의 CTA는 버튼만 두면 되는 것이 아닙니다. 누른 뒤에 무슨 일이 일어나는지 알 수 있는 문구로 두면, 제출률이 바뀝니다.

나쁜 예는 「자세히 보기」「문의」「전송」입니다.3 모두, 누른 뒤에 무슨 일이 일어나는지가 버튼 글자에서 보이지 않습니다.

좋은 예는 한 종류가 아니라, 무엇을 노리고 나눠 쓰는가에 따라 달라집니다. 축을 네 가지로 나눠 늘어놓습니다.

나눠 쓰는 축 CTA 문구의 예 이 형태를 고르는 장면
페이지의 역할을 그대로 둔다 웹사이트 제작 상담하기 상담 내용이 정해진 사람이 많은 페이지. 가장 솔직한 형태입니다
상담 문턱을 낮춘다 지금 사이트의 약한 곳을 봐 주세요 아직 의뢰를 정하지 않은 단계의 독자가 많은 페이지. 의뢰 선언처럼 보이지 않아 누르기 쉬워집니다
누른 뒤에 받는 것을 쓴다 구성안과 대략 비용 받기 사내에서 품의를 통과해야 하는 상대용. 가져갈 자료가 이름으로 보입니다
대상을 한정한다 기술계·B2B 사이트 구성 상담하기 맞지 않는 상담이 많이 오는 페이지. 건수는 줄지만 내용이 맞춰집니다

네 가지 중 어느 것을 골라도 되지만, 같은 페이지 안에서 축을 섞지 않는 것이 요점입니다. 위쪽에 「상담 문턱을 낮춘 CTA」를 두고, 아래쪽에 「역할을 그대로 둔 CTA」를 두는, 위아래 나눠 쓰기라면 성립합니다.

CTA 문구를 정하는 법누른 뒤에 무슨 일이 일어나는지 보이지 않는 「자세히 보기」 같은 문구를 피하고, 나눠 쓰는 축을 골라 문구를 정하며, 같은 페이지 안에서 축을 섞지 않는 것이 요점이고, 위쪽은 문턱을 낮춘 CTA, 아래쪽은 역할을 그대로 둔 CTA라는 위아래 나눠 쓰기라면 성립함을 나타내는 그림.누른 뒤에 무슨 일이 일어나는지 알 수 있는 문구로 한다나눠 쓰는 축을 하나 고른다같은 페이지 안에서 축을 섞지 않는다위쪽=문턱을 낮춘 CTA·아래쪽=역할 그대로라면 성립「자세히 보기」「전송」은 내용이 보이지 않는다

그림 5: CTA는 축을 하나 골라 쓰고, 같은 페이지에서 축을 섞지 않습니다.

CTA 문구는 페이지의 역할과 일치시키는 것이 기본입니다. 웹사이트 제작의 서비스 페이지를 입구로 한다면, 거기에서 제작 내용, SEO, 문의 동선 이야기로 나누면 상담자도 고르기 쉬워집니다.

5. 공개 전에 볼 체크포인트

서비스 페이지를 쓸 때는, 이 다섯 가지를 한 번 갖춘 뒤에 공개하면 안정됩니다. 1장에서 정한 역할과, 2장의 어느 블록에서 충족하는지를 늘어놓아 둡니다.

확인할 것 충족하는 역할 (1장) 충족하는 블록 (2장)
H1에 서비스 이름이 들어가 있는가 상담 입구 1
리드에서 대상자가 보이는가 상담 입구 1·2
대응 범위가 추상어만으로 되어 있지 않은가 비교 자료 3
문의 전에 불안이 남는 곳이 없는가 전송 전 확인 4·5
회사 정보나 관련 글로의 동선이 있는가 비교 자료·전송 전 확인 6

체크가 하나라도 통과하지 못하면, 고칠 것은 문장의 솜씨가 아니라 오른쪽 두 열에 적힌 역할과 블록입니다. 이 체크를 통과하면, 서비스 페이지는 「설명 페이지」에서 「상담 페이지」로 바뀝니다.

공개 전 체크의 사용법공개 전 다섯 가지 체크가 하나라도 통과하지 못할 때, 고칠 것은 문장의 솜씨가 아니라 1장에서 정한 역할과 2장의 블록이며, 체크를 통과하면 서비스 페이지는 설명 페이지에서 상담 페이지로 바뀐다는 것을 나타내는 그림.있다모두 통과한다공개 전에 다섯 가지를 갖춰 확인한다통과하지 못한 항목이 있는가문장의 솜씨가 아니라 해당하는 역할과 블록을 고친다설명 페이지에서 상담 페이지로 바뀐다

그림 6: 체크가 떨어지면 고칠 것은 문장이 아니라, 역할과 블록입니다.

정리

기술계·B2B의 서비스 페이지는, 문장량보다 역할의 정리가 중요합니다. 누구를 위한 무엇의 페이지인지를 먼저 정하고, 그 위에서 웹사이트 제작 안에서 SEO와 문의 동선까지 포함해 조립하면, 문의까지의 거리가 짧아집니다.

페이지 쓰는 법이 헷갈리면, 먼저 「무엇을 판단해 주었으면 하는 페이지인가」를 한 줄로 말할 수 있게 하는 것이 출발점입니다.

관련 글

참고 자료

  1. Google Search Central, Search Essentials 

같은 태그를 공유하는 최신 기사입니다. 더 가까운 주제로 지식을 넓힐 수 있습니다.

이 기사와 가까운 토픽 페이지입니다. 기사를 출발점 삼아 관련 서비스와 다른 기사로 이어집니다.

실제 정리와 개선 진행 방식이 가까운 사례 페이지입니다.

이 기사는 다음 서비스 페이지로 이어집니다. 가까운 입구부터 확인해 주세요.

자주 묻는 질문

이 기사 주제에 대해 상담 시 자주 나오는 질문을 모았습니다.

서비스 페이지에는 어떤 역할이 있나요?
적어도 세 가지입니다. 무엇을 맡길 수 있는지를 전하는 상담 입구, 다른 회사나 다른 서비스와의 차이를 보여 주는 비교 자료, 상담해도 되는 내용인지 확인하는 전송 전 확인입니다. 이 역할을 정하지 않고 쓰기 시작하면 페이지가 흐릿해집니다. 서비스 페이지는 잘 쓴 설명문을 찾는 곳이 아니라, 판단하기 쉬운 구조를 만드는 곳입니다.
B2B 서비스 페이지는 어떤 구성으로 만들면 되나요?
H1과 짧은 리드, 어떤 상담에 맞는지, 대응 범위, 성과물이나 진행 방식, 자주 묻는 질문, 상담으로의 동선, 이 순서의 뼈대면 충분합니다. 제목은 내용의 이름이 아니라, 상담자가 알고 싶은 순서로 배열하는 편이 전해집니다. 또한 Google도 사용자가 검색하는 말을 title이나 제목, 링크 문구에 두는 것을 권하므로, 「웹사이트 제작」「SEO」 같은 말을 그대로 쓰는 편이 헤매지 않습니다.
서비스 페이지의 CTA 버튼은 어떻게 쓰면 되나요?
누른 뒤에 무슨 일이 일어나는지 알 수 있는 문구로 합니다. 나쁜 예는 「자세히 보기」이고, 좋은 예는 「웹사이트 제작 상담하기」「SEO·문의 동선 개선 상담하기」처럼 상담 내용이 구체적으로 보이는 문구입니다. CTA 문구는 페이지의 역할과 일치시키는 것이 기본이며, 이것만으로 제출률이 바뀝니다.
서비스 페이지 설명이 전해지지 않는 것은 설명이 부족해서인가요?
오히려 반대인 경우가 많습니다. 기술계·B2B 사이트에서 서비스 페이지가 약해지는 것은, 설명이 너무 넓어서 누구를 위한 무엇의 페이지인지가 보이지 않게 되는 경우가 많기 때문입니다. 공개 전에는 H1에 서비스 이름이 들어가 있는지, 리드에서 대상자가 보이는지, 대응 범위가 추상어만으로 되어 있지 않은지, 문의 전에 불안이 남는 곳이 없는지, 회사 정보나 관련 글로의 동선이 있는지, 이 다섯 가지를 갖추면 안정됩니다.

저자 프로필

기사 저자의 프로필 페이지입니다.

Go Komura

합동회사 코무라소프트 대표

Windows 소프트웨어 개발, 기술 상담, 장애 조사를 중심으로 재현이 어려운 장애 조사와 기존 자산이 남아 있는 프로젝트에 강점이 있습니다.

블로그 목록으로 돌아가기