AI로 랜딩 페이지나 화면 시안을 만드는 일이 늘어나면서, 결과물에 대한 피드백 역량이 곧 결과물의 품질을 좌우하게 됐습니다. 코드를 직접 작성하지 않더라도 문제를 정확한 용어로 지목하는 수준까지는 10~20분이면 익힐 수 있으며, 이 글에서는 그 기준을 실제 화면과 함께 정리합니다.

"뭔가 어색하다"는 피드백으로는 AI도 디자이너도 정확히 고칠 수 없습니다. 반면 "헤드라인과 본문의 크기 차이가 부족해 위계가 안 잡힌다"고 짚어주면 수정이 훨씬 쉬워집니다.

화면을 구성하는 2개 층: 구조(HTML)와 표현(CSS)

화면은 두 개의 층으로 이루어져 있습니다.

  • 구조(HTML)는 화면의 각 조각에 제목, 버튼, 이미지, 입력칸 같은 역할을 부여하는 층입니다. 어떻게 보일지는 관여하지 않습니다.
  • 표현(CSS)은 각 조각을 얼마나 크게, 무슨 색으로, 얼마나 띄워서 보여줄지 정하는 층입니다. "보기 좋다" 또는 "어색하다"고 느끼는 지점은 대부분 여기서 결정됩니다.
구조 HTML과 표현 CSS 두 층으로 구성된 웹 화면
구분 구조(HTML) 표현(CSS)
역할 제목, 버튼, 이미지, 입력칸 역할 부여 크기, 색, 여백 지정
관여 범위 보이는 방식에 관여하지 않음 보이는 방식 전체
문제 예시 버튼이 아예 없음 버튼이 배경색에 묻혀 보이지 않음

구조와 표현의 구분은 화면 문제를 지목할 때 첫 번째 질문이 됩니다. 버튼이 아예 없다면 구조 문제이고, 버튼은 있는데 배경색에 묻혀 보이지 않는다면 표현 문제입니다. 두 경우는 수정해야 할 대상이 다르므로 AI에 내리는 지시 내용도 달라집니다.

브라우저 검사 도구로 확인하는 4개 핵심 속성: font-size, color, padding, margin

브라우저 검사 도구는 웹페이지에서 우클릭 후 검사를 선택하거나 F12를 누르면 열리며, 해당 화면을 구성하는 코드를 표시합니다.

웹 화면 구조를 확인하는 브라우저 검사 도구 화면

검사 도구 활용법은 3가지입니다.

  • 첫째, 패널 좌측 상단의 화살표 아이콘을 켜고 화면 요소에 마우스를 올리면 해당 요소가 코드의 어느 부분인지 하이라이트됩니다. 화면과 코드가 1:1로 연결되는 것을 확인할 수 있습니다.
  • 둘째, 요소를 클릭하면 하단에 적용된 스타일이 표시됩니다. 핵심 속성은 font-size(글자 크기), color(색), padding(안쪽 여백), margin(바깥 여백) 네 가지입니다.
  • 셋째, 이 값들은 그 자리에서 직접 수정할 수 있습니다. 실제 사이트에는 영향이 없고 새로고침하면 원상복구되므로 자유롭게 실험 가능한 안전한 환경입니다.

검사 도구에서 익힌 속성명은 디자이너 및 개발자와의 협업에도 그대로 사용됩니다. "이 부분 padding이 좁아 보인다"처럼 속성을 지목한 피드백은 수정 지점을 특정하므로 커뮤니케이션 비용을 줄입니다.

시각 위계를 만드는 4가지 도구: 크기, 대비, 정렬, 여백

시각 위계(visual hierarchy)는 사용자의 시선이 어떤 순서로 움직일지를 설계하는 개념입니다. 정보의 중요도 순서와 시선의 순서가 일치할 때 좋은 화면이 됩니다.

시각 위계를 만드는 도구는 4가지이며, 앞 글자를 따 "크대정여"로 기억할 수 있습니다.

도구 원리 적용
크기(size) 클수록 먼저, 중요하게 인식됨 핵심 정보를 가장 크게 배치. 4가지 중 가장 강력한 도구
대비(contrast) 주변과 다를수록 시선을 끎 CTA는 튀는 색으로, 텍스트는 배경과 명도 차이 확보
정렬(alignment) 라인이 맞으면 정돈, 어긋나면 불안정 여러 줄 본문은 왼쪽 정렬 기본. 중간 정렬은 짧은 헤드라인에 한정
여백(proximity) 가까우면 같은 그룹, 멀면 다른 그룹 관련 요소는 가깝게, 무관한 요소는 멀게

ARTIENCE 메인 페이지에 적용된 크기, 대비, 여백 3가지

시각 위계가 적용된 웹사이트 메인 페이지 예시

ARTIENCE 메인 페이지는 4가지 도구 중 크기, 대비, 여백 3가지가 확인되는 화면입니다.

  • 크기: "DISCOVER YOUR TRUE VALUE" 헤드라인이 화면에서 가장 크며, 시선이 헤드라인에서 시작됩니다.
  • 대비: 어두운 배경 이미지 위에 흰색 텍스트를 배치해 명도 대비를 확보했습니다.
  • 여백: 하단 4개 서비스 메뉴가 균등한 간격으로 배치되어 하나의 그룹으로 읽히며, 근접성 원리가 적용된 사례입니다.

font-size 축소와 대비 소실이 만드는 위계 붕괴 2가지 사례

검사 도구로 속성값 하나만 바꿔도 화면 전체의 위계가 무너집니다. ARTIENCE 메인 페이지에서 헤드라인의 font-size와 color를 각각 조정한 결과가 아래 2가지 사례입니다.

헤드라인 크기 축소로 시각 위계가 무너진 화면 비교

첫 번째 사례는 크기 축소입니다. 헤드라인 font-size를 본문 수준으로 줄이자 헤드라인이 하단 문구와 비슷한 크기가 되고, 시선이 어디서 시작해야 할지 불분명해집니다. 4가지 도구 중 크기 하나가 빠졌을 뿐인데 화면 전체의 위계가 무너집니다.

명도 대비 소실로 텍스트가 보이지 않는 화면 예시

두 번째 사례는 대비 소실입니다. 헤드라인 color를 배경과 비슷한 색으로 바꾸면 정보가 존재해도 전달되지 않습니다. 요소가 있는가와 요소가 보이는가는 별개의 문제입니다.

AI가 생성한 화면이 어색하게 느껴질 때, 상당수가 위 2가지와 같은 위계 문제에 해당합니다.

모호한 피드백을 구체적 피드백으로 바꾸는 4개 문장 전환

구조와 표현의 구분, 검사 도구의 4개 속성, 시각 위계 4가지 도구를 갖추면 피드백 문장의 형태가 바뀝니다. 전환 전후 문장은 아래와 같습니다.

  • 전환 전: "뭔가 좀 이상한데 다시 만들어줘."
  • 전환 후: "헤드라인과 본문의 크기 차이가 부족해 위계가 안 잡힌다. CTA 버튼은 배경과 대비가 약해 눈에 띄지 않는다. 설명 문구와 버튼은 한 세트인데 여백이 너무 벌어져 있어 연결이 끊겨 보인다."
모호한 피드백 구체적인 피드백 지목한 도구
화면이 밋밋하다 주요 CTA와 배경의 대비가 약해 행동 유도가 부족하다 대비
요소들이 따로 논다 설명과 버튼 사이 간격이 커서 하나의 그룹으로 인식되지 않는다 여백
글자가 이상하다 헤드라인과 본문의 크기와 굵기 차이가 작아 정보 위계가 약하다 크기
정리가 안 된 느낌이다 요소별 왼쪽 기준선이 달라 시각적 정렬이 깨져 보인다 정렬

구체적 피드백은 수정 대상 속성과 방향을 함께 담기 때문에 AI와 디자이너 모두 한 번에 반영할 수 있습니다. 실행 도구가 좋아질수록 결과물의 품질은 문제를 정확히 짚는 사람의 눈에 좌우됩니다.

검사 도구를 열어 임의의 사이트에서 글자 크기와 여백을 바꿔보는 것이 가장 빠른 연습 방법입니다. 필요한 부분은 AI에 질문하며 10분 정도 직접 조작해보는 방식을 권장합니다.

화면을 직접 구현하지 않더라도 문제를 구체적인 언어로 설명할 수 있다면, AI의 결과물을 개선하고 디자이너 및 개발자와 협업하는 과정도 훨씬 효율적으로 바뀝니다.

상세 학습을 위한 키워드 3개: 게슈탈트 원리, WCAG 명도 대비 기준, F-패턴과 Z-패턴

더 상세한 내용을 찾아보고 싶다면 3가지 키워드(게슈탈트 원리, WCAG 명도 대비 기준, F-패턴과 Z-패턴)로 찾아보시길 권합니다.

자주 묻는 질문

코드를 작성할 줄 몰라도 AI가 만든 화면을 피드백할 수 있습니까?

코드 작성 없이도 피드백이 가능합니다. 목표는 코드를 수정하는 것이 아니라 문제를 정확한 용어로 지목하는 것까지이며, 이 범위는 10~20분이면 익힐 수 있습니다.

브라우저 검사 도구에서 값을 바꾸면 실제 사이트가 변경됩니까?

실제 사이트는 변경되지 않습니다. 검사 도구에서 수정한 값은 보고 있는 브라우저 화면에만 적용되며, 새로고침하면 원래 값으로 돌아옵니다.

화면 문제가 구조 문제인지 표현 문제인지 어떻게 구분합니까?

요소의 존재 여부로 구분합니다. 버튼이 화면에 아예 없다면 구조(HTML) 문제이고, 버튼은 있는데 배경색에 묻혀 보이지 않는다면 표현(CSS) 문제입니다.