이 글은 2026년 11월 6일에 썼습니다.
AI 도구는 하루가 다르게 바뀝니다. 하지만 페이지를 받치는 뼈대는 쉽게 변하지 않습니다. header, hero, section, footer, navigation, card. 이 여섯 가지 명칭만 알아도 첫 화면을 얼마든지 요청할 수 있습니다. 제품 내부의 메뉴 위치는 달라질 수 있어도 이 구조는 그대로 남습니다. 이 글은 특정 웹 빌더의 조작법 안내가 아니라, 페이지 전체를 조망하는 지도입니다.
화면을 화려하게 꾸미기 전에, 먼저 페이지가 담당할 작업의 순서를 정리해야 합니다. 지금 내가 있는 장소가 어디인지 알려주는 일, 이곳이 무엇을 하는 곳인지 한 문장으로 제시하는 일, 비슷한 종류의 정보를 반복해서 보여주는 일, 다음 단계로 이동할 경로를 안내하는 일, 그리고 페이지의 마무리를 짓는 일입니다. 이런 역할에 명확한 이름이 붙지 않으면, AI 모델은 웹페이지 대신 한 장의 포스터를 그려냅니다. 커다란 이미지에 글자만 둥둥 떠 있고, 아래로 내려갈 길은 없는 화면 말입니다. 겉보기에는 근사해 보일지 몰라도 모바일 환경에서는 전혀 사용할 수 없습니다.
프롬프트를 작성할 때는 각 역할의 영어 명칭을 적고, 그 아래에 본래의 언어로 상세한 설명을 덧붙여주십시오. 널리 통용되는 한국어 표현이 있다면 처음 등장할 때 영어를 괄호에 함께 적어주시면 됩니다. 딱 맞는 번역어가 없다면 억지로 새 단어를 만들어내지 않아도 괜찮습니다. 짧은 부연 설명과 정확한 영어 명사 하나면 충분합니다.
사용자가 페이지를 만나는 순서대로 보는 여섯 가지 핵심 공간
header는 화면 맨 위에 위치한 얇은 띠 영역입니다. 장소의 이름과 핵심 이동 경로 몇 개만 깔끔하게 배치합니다. 이곳을 두 번째 hero처럼 쓰면 안 됩니다. 중요하다고 해서 온갖 요소를 header에 다 집어넣으면, 화면 상단은 명확한 안내 구실을 못 하고 산만해질 뿐입니다.
hero는 사용자가 처음 마주하는 커다란 메인 영역입니다. 명확한 주 메시지 하나, 이를 받쳐주는 설명 한 문장, 그리고 유도할 행동(action) 하나로 구성합니다. 병원 웹사이트라면 어떤 진료를 하는지 알리고 “예약하기” 버튼을 두는 식입니다. 빵집이라면 어떤 빵을 만드는지 알리고 “오늘의 빵 보기” 버튼을 넣습니다. 사업 내용 전체를 hero 하나에 전부 욱여넣으면 상단에 전단지를 붙여놓은 것과 다름없어집니다. 본문 내용은 중복되기 십상이고, 모바일 사용자는 가격이나 주소 정보까지 스크롤해서 내려가지도 못합니다.
section은 명확한 제목을 가진 하나의 주제 영역입니다. 진료 시간, 가격 안내, 의료진 소개, 자주 묻는 질문 등이 여기에 해당합니다. 길게 이어지는 페이지를 사용자가 쉽게 훑어볼 수 있게 만드는 단위입니다. 단순히 “section을 만들어줘”라고만 하지 마시고, 방문자가 실제 궁금해할 질문을 바탕으로 지시하십시오. “진료 시간이라는 제목의 section을 만들고, 요일별 시간은 이미지 파일이 아닌 읽을 수 있는 텍스트로 넣어줘”라고 프롬프트에 작성하면, 다른 언어로 번역되어도 정보가 손상되지 않고 정확히 남습니다. 시간표를 통이미지로 넣어버리면 텍스트 정보가 남지 않습니다.
footer는 페이지의 가장 하단 마무리 영역입니다. 주소, 필요한 경우 한 번 더 강조할 운영 시간, 그리고 문의를 보낼 수 있는 연락처를 둡니다. 화면에서 길을 잃은 사용자는 의도적으로 스크롤을 맨 아래까지 내리곤 합니다. 장식용 띠로만 이루어진 footer는 이런 사용자들을 그냥 놓쳐버립니다.
navigation은 다른 공간으로 이동하는 주요 링크 목록이며, 주로 header 안에 배치됩니다. 모바일 화면에서는 메뉴 5개만 들어가도 이미 빽빽합니다. 그보다 많은 메뉴가 필요하다면 글자 크기를 억지로 줄여서 나열하지 말고, 하나의 메뉴 조작 뒤에 숨겨두어야 합니다. 페이지 안의 모든 section 제목을 그대로 나열하는 navigation은 사이트 메뉴가 아니라 목차에 불과합니다.
card는 같은 형식의 정보 단위를 반복해서 보여주는 상자입니다. 제공하는 서비스 목록, 수업 강좌, 상품 라인업 등을 담을 때 씁니다. 한 페이지 안의 card들은 규격과 틀이 일정해야 합니다. 준비된 자료가 있을 때에 한하여 아이콘이나 사진, 제목, 한 줄 설명, 행동 버튼 하나씩을 균일하게 넣습니다. 카드마다 레이아웃이 제각각이면 통일된 세트가 아니라 개별 포스터 5장을 흩어놓은 모양새가 됩니다.
동일한 카드 콘텐츠, 화면 폭에 따른 두 가지 배치
데스크톱처럼 넓은 화면만 기준으로 만든 페이지는 모바일 기기가 곧 컴퓨터 역할을 하는 환경에서 쉽게 깨집니다. 프롬프트에서 레이아웃의 열(column) 수를 명확히 지정해 주어야 합니다. 화면이 넓을 때는 card 3개를 한 줄에 배치하고, 화면이 좁아지면 하나씩 세로로 차례로 쌓이도록 만듭니다. 카드 안의 텍스트 내용은 그대로 유지되면서 줄바꿈 배치만 달라지는 것입니다. 이것이 바로 반응형 레이아웃(responsive layout)이며, 뭉뚱그린 스타일이 아니라 명확한 구현 조건입니다. 단순히 “반응형으로 만들어줘”라고만 적으면 AI 모델이 마음대로 주요 버튼을 숨기거나 레이아웃을 틀어버릴 수 있습니다. 반면 “넓은 화면에서는 3열, 좁은 화면에서는 1열로 배치하고, 행동 버튼은 항상 보이게 해줘”라고 요청하면 결과물이 흐트러지지 않습니다.
태블릿 화면은 그 중간 단계인 2열로 지정하셔도 됩니다. 굳이 프롬프트에 태블릿 조건까지 매번 적지 않으셔도 괜찮습니다. 1열과 3열 조건만 명시해도 핵심 원리는 충분히 전달됩니다. 정보의 본질은 목록이며, 한 줄에 여러 개를 나열하는 것은 화면 폭에 여유가 있을 때 누리는 구성일 뿐입니다.
스크롤을 내려도 화면 상단에 고정되는 sticky header는 선택 사항입니다. navigation을 통한 이동이 자주 필요한 페이지에서는 유용하지만, 화면이 작은 모바일 기기에서 전체 화면의 3분의 1을 차지하면 오히려 읽기를 방해합니다. 다음 문단을 읽는 것보다 상단 메뉴로 돌아가는 경로가 더 중요할 때에만 요청하십시오. 영어 명칭이 필요하면 sticky header라고 적고, “높이를 얇게 유지하고 본문의 첫 제목을 가리지 말 것”이라는 조건도 함께 명시해 줍니다.
겉보기엔 완성된 듯했으나 실제로는 쓸 수 없었던 웹페이지
어느 작은 동네 병원에서 “아름다운 메인 페이지”를 만드는 작업을 AI에게 부탁했습니다. AI 모델은 병원 복도가 찍힌 커다란 사진 한 장과 그 위에 얹은 슬로건 글귀, 그리고 설명 텍스트도 없이 옅은 색 아이콘만 나열된 화면을 만들어주었습니다. 원장님의 노트북 모니터로 보았을 때는 차분하고 세련되어 보였습니다. 하지만 버스 정류장에서 서서 모바일로 접속한 환자에게는 슬로건이 화면 입구를 가려버렸고, 아이콘은 겹쳐서 읽을 수 없게 구겨졌으며, 진료 시간은 이미지 파일 안에 글자로 그리어져 있어서 번역도 불가능하고 화면 읽어주기(screen reader) 기능도 동작하지 않았습니다. 그 페이지에는 header도, hero도, section도, card도 없었습니다. 그저 스크롤만 되는 디지털 포스터였을 뿐입니다.
두 번째로 프롬프트를 작성할 때는 미사여구를 빼고 화면의 뼈대 명칭을 정확히 지시했습니다. 병원 이름과 3개의 이동 링크(진료 안내, 운영 시간, 오시는 길)가 있는 header, 한 줄 설명과 “진료 예약하기” 버튼이 있는 hero, 텍스트로 작성된 3개의 section, 3가지 진료 항목을 담은 card 목록(넓은 화면에서는 3열, 좁은 화면에서는 1열), 그리고 주소가 텍스트로 적힌 footer를 요청했습니다. 그러자 완성된 페이지는 매우 명확하고 실용적으로 바뀌었고, 버스 정류장에서 모바일로 접속한 사람도 즉시 이용할 수 있게 되었습니다. 병원 복도 사진은 hero 영역 안에서 텍스트보다 작은 배경 요소로 활용하면 충분합니다. 더 이상 사진 자체가 페이지 전체를 대신하지 않게 된 것입니다.
여섯 가지 뼈대 단어가 실무 현장에서 가져오는 변화가 바로 이것입니다. AI 모델이 전체 응답을 그저 예쁜 분위기를 내는 데 소비하지 않도록 막아줍니다. 분위기나 스타일은 지정된 영역 안에서 살아나야 하는 것이지, 구조 영역 자체를 대체할 수는 없습니다. 인도네시아어나 힌디어, 한국어로 프롬프트를 작성하더라도 6개의 영어 명칭은 프롬프트에 그대로 남겨두고, 병원의 실제 안내 문구는 그 아래에 적어주십시오. 구조의 뼈대는 그대로 전달되고, 구체적인 문장은 사용자가 살고 있는 지역에 맞게 남아있게 됩니다.
첫 번째 프롬프트 작성 예시
처음 AI에게 작업을 지시할 때는 한 문단 정도의 프롬프트면 충분합니다.
Build a page with a header (the name and three links), a hero (one sentence and one button), three sections, a row of cards that becomes a single column on a narrow screen, and a footer with the address as text.
이 영문 프롬프트 바로 아래에, 자신의 언어로 세 개의 section이 각각 어떤 내용을 다루는지 적어주시면 됩니다. AI 모델이 header를 제대로 배치하기 위해 한국어 설명까지 필수로 요구하는 것은 아닙니다. 하지만 section이 그저 무의미한 구호의 반복이 아니라 진료 시간, 가격 안내, 오시는 길이어야 한다는 판단은 사람이 직접 결정해주어야 합니다.
작은 조직이나 동네 가게에 실제로 필요한 웹페이지의 형태가 바로 이것입니다. 단순히 “현대적이고 깔끔하게 만들어줘”라고만 말하면, AI 모델은 겉모습만 화려하고 실속 없는 페이지를 내놓기 십상입니다. ‘현대적’이라는 말은 페이지의 구조를 뜻하는 용어가 아닙니다. header, hero, section, footer, navigation, card가 바로 진짜 공간의 구조입니다. 이 명칭들을 익혀 프롬프트에 영어로 붙여넣으시고, 그 안에 들어갈 실제 사실 정보는 읽는 사람의 언어로 채워 넣으십시오.
다음 단계의 의사결정은 화면 구역을 더 쪼개어 늘리는 일이 아닙니다. 페이지가 사용자에게 무언가를 물어보거나, 새로운 정보 묶음을 다른 페이지로 튕겨내지 않고 그 자리에서 보여주어야 할 때의 구성법입니다. 이것은 section과는 전혀 다른 형태이며, 다음 글에서 다룰 주제입니다.