Luna Whale AI Web Class · Web Brief 03

한 줄 메시지 One Line Message

Big Idea

한 줄 메시지는 방문자가 들어오자마자 알아야 할 핵심 문장입니다

첫 화면에는 모든 설명을 다 넣지 않습니다. 이 페이지가 누구를 위해 무엇을 해 주는지, 왜 봐야 하는지를 한 문장으로 먼저 보여주면 제목과 이미지와 버튼이 함께 정리됩니다.

Goal첫 화면에서 가장 크게 보여줄 핵심 문장 정하기
Output한 줄 메시지와 그 아래 보조 설명 1~2줄 잡기
Scope이번 시간은 핵심 문장, 다음 시간은 섹션 순서로 확장
Check내 페이지를 한 문장으로 소개할 수 있는지 확인하기
한 줄 메시지는 방문자가 들어오자마자 알아야 할 핵심 문장이라는 수업용 화면
Message First핵심 문장이 정해지면 제목과 이미지와 버튼이 함께 정리됩니다
Page 02

듀오링고는 한 줄 메시지로 이 페이지가 주는 이득을 바로 보여줍니다

“재미있고 효과적인 무료 언어 공부!”라는 큰 문장을 보자마자 이 서비스가 무엇을 주는지 바로 이해할 수 있습니다. 첫 화면에서 가장 먼저 보여야 하는 것이 바로 이런 핵심 문장입니다.

  • 1무엇을 하는 서비스인지 한눈에 보입니다.
  • 2버튼도 그 문장에 맞춰 가볍게 시작하게 합니다.
듀오링고 홈페이지 스크린샷
Duolingo첫 문장만 읽어도 무엇을 얻는지 바로 이해됩니다
Page 03

노션도 큰 한 줄로 누구를 위해 어떤 도움을 주는지 먼저 말합니다

“언제든지 든든한 나만의 AI팀”이라는 문장은 AI 도구를 설명하는 긴 문장 대신, 사용자가 얻게 될 도움을 먼저 말합니다. 좋은 한 줄 메시지는 기능 목록보다 먼저 읽히는 이득의 문장입니다.

WhoAI 도움을 원하는 사람에게 바로 말을 겁니다.
Benefit기능보다 먼저 든든한 도움이라는 결과를 보여줍니다.
노션 홈페이지 스크린샷
Notion기능 설명보다 먼저 얻는 도움을 큰 문장으로 보여줍니다
Page 04

슬랙은 한 줄 메시지로 페이지의 역할을 아주 크게 못 박습니다

“모든 사람과 AI 에이전트가 협력하여 일하는 곳.”이라는 문장은 이 페이지가 무엇에 대한 페이지인지 길게 읽지 않아도 알게 합니다. 좋은 한 줄 메시지는 페이지 전체의 방향 표지판처럼 작동합니다.

  • 1누가 함께 일하는지 바로 보입니다.
  • 2아래 버튼과 화면 이미지도 그 문장을 따라갑니다.
슬랙 홈페이지 스크린샷
Slack큰 문장이 페이지 전체 역할을 바로 못 박아 줍니다
Page 05

같은 수업 페이지라도 막연한 제목과 분명한 한 줄 메시지는 힘이 다릅니다

주제가 같아도 첫 화면의 말이 다르면 방문자가 이해하는 속도가 크게 달라집니다. 무엇을 하는 페이지인지, 왜 지금 봐야 하는지가 한 문장 안에 보이면 훨씬 빨리 읽힙니다.

Vague초등 메이커 수업: 있다는 사실만 말합니다.
Clear부모가 안심하고 신청하는 초등 메이커 캠프: 누구와 이득이 보입니다.
막연한 제목과 분명한 한 줄 메시지를 비교하는 수업용 장면
Same Topic같은 주제도 한 줄 메시지가 분명하면 읽히는 힘이 달라집니다
Page 06

처음에는 누구에게, 무엇을, 어떤 이득인지 세 조각으로 쓰면 쉽습니다

한 줄 메시지를 멋있게 쓰려고 애쓰기보다, 방문자와 페이지 내용과 얻는 결과를 먼저 적어 보는 편이 더 정확합니다. 이 세 조각만 있으면 AI에게도 훨씬 잘 전달됩니다.

  • 1누구에게: 부모가 먼저 보는, 초등학생을 위한
  • 2무엇을: 메이커 캠프 모집, 독서 모임 안내
  • 3이득: 쉽게 신청하는, 재미있게 배우는
누구에게 무엇을 어떤 이득인지 세 조각으로 한 줄 메시지를 쓰는 수업용 장면
Simple Formula세 조각으로 나누면 한 줄 메시지를 훨씬 쉽게 만들 수 있습니다
Page 07

좋은 한 줄 메시지는 짧고 분명해야 하고, 많은 일을 한 문장에 다 넣지 않습니다

첫 화면의 큰 문장은 방문자를 멈추게 하는 문장입니다. 모든 설명을 한 줄에 다 담으려 하면 오히려 읽기 어렵고 힘이 약해집니다. 자세한 내용은 아래 줄이나 아래 섹션으로 내리면 됩니다.

Too Long기능과 소개와 신청을 한 문장에 몰아넣으면 흐려집니다.
Focused누구와 무엇이 보이는 짧은 문장이 훨씬 빨리 읽힙니다.
너무 긴 문장과 줄인 한 줄 메시지를 비교하는 수업용 장면
Short And Clear짧고 분명한 한 줄이 첫 화면에서는 더 강하게 작동합니다
Page 08

한 페이지에는 대표 한 줄이 하나 있고, 자세한 설명은 그 아래 줄로 내려갑니다

첫 화면의 구조는 큰 문장 1개, 짧은 보조 문장 1~2줄, 그리고 첫 버튼으로 나누면 읽기 쉽습니다. 중요한 건 모든 정보를 같은 크기로 올리지 않는 것입니다.

  • 1큰 문장은 가장 크게 보입니다.
  • 2보조 설명은 짧게 두 줄 정도로 붙입니다.
  • 3버튼은 행동만 말하게 둡니다.
대표 한 줄과 보조 설명과 버튼으로 첫 화면 층을 나누는 수업용 장면
Layered Hero대표 한 줄과 보조 설명과 버튼을 층으로 나누면 훨씬 읽기 쉽습니다
Page 09

한 줄 메시지가 달라지면 첫 이미지와 첫 버튼도 함께 달라져야 합니다

메시지는 혼자 존재하지 않습니다. “오늘 바로 시작해 보기”를 말하는 문장이라면 이미지도 밝고 가볍게 시작이 쉬워 보여야 하고, “지금 신청하기”를 말하는 문장이라면 정보와 버튼도 신청 쪽으로 맞춰집니다.

Start체험 시작 메시지는 예시 둘러보기 같은 버튼이 어울립니다.
Apply모집 메시지는 지금 신청하기 같은 버튼이 어울립니다.
한 줄 메시지에 따라 첫 이미지와 첫 버튼이 함께 달라지는 수업용 장면
Message Match문장이 달라지면 이미지와 버튼도 그 문장에 맞춰 바뀌어야 합니다
Page 10

AI에게는 내가 원하는 한 줄 메시지를 정확히 말해 줘야 합니다

“첫 화면 제목 알아서 써줘”라고 두면 AI가 막연한 문장을 만들기 쉽습니다. 내가 원하는 핵심 문장을 직접 주면 그 문장을 중심으로 이미지와 버튼과 아래 설명을 맞추기 쉬워집니다.

부모가 먼저 보는 초등 메이커 캠프 모집 페이지를 만들어줘. 첫 화면의 큰 한 줄 메시지는 "부모가 안심하고 신청하는 초등 메이커 캠프" 로 써줘. 그 아래에는 대상 학년과 일정 설명 2줄, 대표 버튼은 "지금 신청하기"로 넣어줘.
AI에게 원하는 한 줄 메시지를 정확히 말해 줘야 한다는 수업용 장면
Prompt With Message내가 원하는 큰 문장을 직접 주면 AI 결과가 훨씬 정확해집니다
Page 11

막연한 요청을 한 줄 메시지까지 넣은 요청으로 고치면 결과가 훨씬 좋아집니다

AI는 큰 방향이 없으면 흔한 문장을 만들기 쉽습니다. 반대로 내가 원하는 첫 문장을 직접 주면 페이지 전체가 그 문장 중심으로 정리됩니다.

Bad여름 캠프 페이지 만들어줘. 제목은 알아서 써줘.
Good첫 화면 한 줄 메시지는 “부모가 안심하고 신청하는 여름 메이커 캠프”로 써줘.
Bad멋있게만 해 달라고 하면 방향이 흐립니다.
Good대표 버튼과 보조 설명까지 같이 정해 주면 결과가 또렷해집니다.
막연한 요청과 한 줄 메시지를 포함한 요청을 비교하는 수업용 장면
Repair Prompt한 줄 메시지를 넣으면 AI 요청이 훨씬 또렷해집니다
Page 12

오늘의 실습: 내 페이지의 한 줄 메시지를 직접 적어봅니다

다음 시간에는 이 문장을 기준으로 섹션 순서를 짜게 됩니다. 오늘은 첫 화면에서 가장 크게 보여줄 문장을 한 줄로 정리할 수 있으면 충분합니다. 대표 문장이 정해지면 그 아래 설명과 버튼도 쉬워집니다.

  • 1누가 먼저 보는지 적습니다.
  • 2페이지가 하는 일과 얻는 이득을 적습니다.
  • 3그 셋을 묶어 한 줄 메시지로 바꿉니다.
내 페이지의 한 줄 메시지를 적어보는 활동지 화면
Worksheet내 페이지의 첫 화면에서 가장 크게 보일 한 줄을 직접 적어봅니다