AI로 웹앱이나 랜딩페이지를 만들 때 ‘세련되게 디자인해줘’라는 요청은 생각보다 정보가 부족합니다. 세련됨의 기준이 사람마다 다르고, AI도 구체적인 방향이 없으면 최근 웹에서 자주 보이는 무난한 카드형 레이아웃과 그라데이션, 둥근 버튼을 조합하는 쪽으로 결과를 만들기 쉽기 때문입니다.

원하는 결과에 가까워지려면 감상적인 형용사보다 디자인 언어를 지정하는 편이 낫습니다. 글래스모피즘, 브루탈리즘, 벤토 그리드, Y2K처럼 이름이 붙은 UI 스타일은 색상, 질감, 여백, 컴포넌트 형태, 화면 분위기에 대한 단서를 함께 제공합니다. 다만 스타일 이름 하나만 넣는 것으로 충분하지는 않습니다. 어떤 업종의 누구를 위한 화면인지, 사용자가 무엇을 해야 하는지까지 알려줘야 실제로 사용할 수 있는 UI가 나옵니다.

‘세련되게’라는 요청이 비슷한 결과를 만드는 이유

AI는 ‘세련된 디자인’이라는 말을 해석할 때 특정 브랜드나 서비스의 고유한 맥락보다 일반적으로 많이 사용되는 시각적 패턴을 우선할 가능성이 큽니다. 그래서 서로 다른 업종의 결과물인데도 비슷한 히어로 섹션, 둥근 모서리, 파스텔 계열 배경, 카드형 기능 소개가 반복될 수 있습니다.

문제는 단순히 결과가 평범하다는 데 있지 않습니다. 금융 서비스와 어린이 교육 서비스, 개발자용 SaaS는 신뢰를 주는 방식과 사용자가 반응해야 하는 버튼이 서로 다릅니다. 그런데 목적과 대상이 빠진 프롬프트는 이런 차이를 반영하기 어렵습니다.

반면 ‘브루탈리즘 기반의 개발자 도구 랜딩페이지’처럼 요청하면 방향이 달라집니다. 강한 대비, 장식적인 정돈보다 정보의 충돌감, 투박한 버튼과 직선적인 구성처럼 특정 스타일에서 기대되는 요소를 생성할 가능성이 높아집니다. 스타일명은 AI에게 결과의 범위를 좁혀 주는 일종의 디자인 기준점으로 작동합니다.

자주 언급되는 UI 스타일은 무엇이 다른가

글에서 언급된 스타일 중 글래스모피즘은 반투명한 패널, 배경 블러, 빛이 비치는 듯한 레이어를 활용하는 방식입니다. 시각적으로 가볍고 미래적인 인상을 만들기 좋지만, 배경과 패널의 명도 차이가 작으면 텍스트가 쉽게 묻힙니다. 투명도와 장식보다 글자 대비와 버튼 식별성을 먼저 지정해야 하는 이유입니다.

브루탈리즘은 정제된 그리드나 고급스러운 장식보다 강한 색상 대비, 거친 형태, 큼직한 타이포그래피, 일부러 덜 다듬은 듯한 구성을 사용하는 경향이 있습니다. 개성이 강한 포트폴리오나 문화·창작 분야에는 어울릴 수 있지만, 결제나 회원가입처럼 실수가 치명적인 화면에서는 과도한 장식이 사용자의 행동을 방해할 수 있습니다.

벤토 그리드는 여러 크기의 모듈형 카드를 도시락 칸처럼 배치하는 레이아웃입니다. 기능, 통계, 이미지, 고객 사례를 한 화면 안에서 나누어 보여주기 좋고 SaaS 랜딩페이지에도 활용하기 쉽습니다. 다만 카드가 많아지면 모든 정보가 같은 중요도로 보이는 문제가 생깁니다. 가장 중요한 가치 제안과 CTA가 어느 칸에 있어야 하는지 함께 지정하는 것이 좋습니다.

Y2K 스타일은 1990년대 말에서 2000년대 초반의 디지털 문화를 연상시키는 색상, 크롬 질감, 픽셀 요소, 과장된 그래픽을 활용합니다. 브랜드의 개성을 빠르게 드러낼 수 있지만, 화면이 복잡해지고 모바일에서 장식 요소가 콘텐츠보다 커질 수 있습니다. Y2K를 요청하더라도 본문 글꼴, 버튼 크기, 모바일에서 제거할 장식까지 제한해 두는 편이 안전합니다.

예시 프롬프트에 함께 등장한 미니멀리즘은 여백과 단순한 구성, 제한된 색상, 낮은 시각적 복잡도를 중시합니다. 벤토 그리드와 조합하면 정보를 모듈 단위로 보여주면서도 화면이 지나치게 산만해지는 것을 줄일 수 있습니다. 단, 미니멀리즘이 곧 정보가 적다는 뜻은 아닙니다. 무엇을 남기고 무엇을 숨길지 정하는 정보 구조가 핵심입니다.

제공된 원문에는 ‘10가지 스타일’이라는 언급은 있지만, 발췌된 내용에서 확인되는 스타일명은 글래스모피즘, 브루탈리즘, 벤토 그리드, Y2K, 미니멀리즘입니다. 나머지 스타일 목록은 자료만으로 확인할 수 없으므로 임의로 10개를 채워 넣기보다, 실제 프롬프트에는 확인된 스타일명과 원하는 조합을 정확히 쓰는 것이 안전합니다.

UI 스타일만큼 중요한 프롬프트 구성 요소

스타일명을 지정한 뒤에는 화면의 목적을 구체화해야 합니다. 가장 실용적인 순서는 다음과 같습니다.

먼저 대상 사용자를 적습니다. ‘모든 사람을 위한 서비스’보다 ‘20~30대 창업자’, ‘처음 AI 도구를 사용하는 소규모 팀’, ‘개발자용 SaaS를 검토하는 제품 관리자’처럼 범위를 좁히는 편이 좋습니다. 사용자의 배경지식과 기대 수준이 달라지면 화면에 필요한 설명량도 달라집니다.

그다음 페이지 종류를 구분합니다. 랜딩페이지, 가격 페이지, 대시보드, 온보딩 화면, 로그인 화면은 같은 스타일을 적용하더라도 구조가 달라야 합니다. 랜딩페이지는 가치 제안과 CTA가 중요하지만 대시보드는 정보 밀도와 탐색 구조가 우선입니다.

핵심 색상과 레이아웃 방식도 분리해서 적어야 합니다. ‘네이비와 라임’처럼 주요 색을 제시할 수 있고, ‘첫 화면은 좌우 분할’, ‘기능 설명은 벤토 그리드’, ‘모바일에서는 한 열로 전환’처럼 배치 규칙을 추가할 수 있습니다. 색상만 요청하면 AI가 배경과 버튼, 본문에 어떤 비율로 적용해야 하는지 임의로 판단합니다.

마지막으로 가장 중요한 CTA를 하나 정합니다. 데모 신청, 무료 시작, 가격 확인, 상담 예약처럼 사용자가 첫 화면에서 해야 할 행동이 분명해야 합니다. CTA가 여러 개면 우선순위를 주고, 주 CTA와 보조 링크를 구분해 달라고 요청하는 편이 낫습니다.

접근성과 모바일 조건을 프롬프트에 넣어야 하는 이유

스타일을 강하게 적용할수록 접근성과 반대 방향으로 갈 위험이 있습니다. 반투명한 글래스모피즘 패널은 낮은 대비를 만들 수 있고, Y2K의 작은 장식 글자나 브루탈리즘의 과도한 색상 충돌은 읽기 피로를 키울 수 있습니다. 따라서 ‘예쁘게 만들어줘’ 뒤에 접근성을 나중에 덧붙이는 방식보다 처음부터 제약 조건으로 넣는 것이 좋습니다.

프롬프트에는 모바일에서 텍스트가 잘리지 않게 하고, 주요 버튼은 충분히 구분되며, 배경과 본문 텍스트의 대비를 확보하라고 적을 수 있습니다. 장식 요소가 핵심 행동을 가리지 않도록 하고, 화면 폭이 줄어들면 카드가 자연스럽게 한 열로 재배치되도록 요청하는 것도 유용합니다.

이 조건은 결과를 덜 화려하게 만들기 위한 것이 아닙니다. 사용자가 읽고 클릭하고 다음 단계로 이동하는 데 필요한 시각적 우선순위를 보존하기 위한 장치입니다. 특히 모바일에서는 데스크톱 화면을 단순히 축소한 결과가 충분하지 않습니다. 카드 순서, 버튼 위치, 이미지 비율이 다시 설계되어야 합니다.

실제로 사용할 수 있는 프롬프트 예시

원문에서 제시한 구조를 실무에 맞게 풀어 쓰면 다음과 같은 형태가 됩니다.

“20~30대 창업자를 위한 AI SaaS 랜딩페이지를 만들어줘. 벤토 그리드와 미니멀리즘을 조합하고, 네이비와 라임을 핵심 색상으로 사용해줘. 첫 화면에는 짧은 가치 제안, 데모 버튼, 고객 로고를 배치하고, 데모 버튼을 가장 눈에 띄는 CTA로 만들어줘. 기능 소개는 카드 크기에 차이를 두어 중요도를 표현하고, 모바일에서는 한 열 레이아웃으로 바꿔줘. 본문 텍스트는 충분한 대비를 확보하고, 장식 요소가 버튼과 설명을 방해하지 않게 해줘.”

스타일 조합을 바꿀 때도 나머지 조건은 유지하는 것이 좋습니다. 예를 들어 같은 서비스에 글래스모피즘을 적용한다면 다음처럼 요청할 수 있습니다.

“20~30대 창업자를 위한 AI SaaS 랜딩페이지를 글래스모피즘 스타일로 구성해줘. 어두운 네이비 배경 위에 반투명 패널과 제한적인 블러를 사용하고, 라임색 데모 버튼을 주 CTA로 배치해줘. 패널 안의 본문 텍스트는 배경과 충분히 구분되게 하고, 모바일에서는 블러와 장식 그래픽을 줄여 가독성을 우선해줘.”

이처럼 업종·고객·페이지 종류·스타일·색상·레이아웃·CTA를 한 문장 안에서 연결하면 스타일만 던지는 것보다 결과를 비교하기 쉽습니다. AI가 만든 첫 결과를 그대로 채택하기보다, 같은 구조에서 스타일만 바꿔 여러 시안을 생성하면 어떤 분위기가 서비스 목적에 맞는지도 판단할 수 있습니다.

결과를 고칠 때는 미적 평가보다 규칙을 수정하기

첫 시안이 마음에 들지 않을 때 ‘더 고급스럽게’, ‘조금 더 예쁘게’라고 다시 요청하면 수정 범위가 모호합니다. 대신 문제가 발생한 위치를 규칙으로 설명해야 합니다. 예를 들어 ‘카드가 너무 많아 CTA가 묻히니 첫 화면에는 핵심 기능 세 개만 남겨줘’, ‘Y2K 장식은 유지하되 본문 글꼴은 읽기 쉬운 산세리프로 바꿔줘’, ‘글래스 패널의 투명도를 낮추고 텍스트 대비를 높여줘’처럼 지시할 수 있습니다.

또한 화면 전체를 한 번에 고치기보다 히어로 영역, 기능 소개, 가격 영역처럼 구간을 나누어 수정하는 편이 결과를 통제하기 쉽습니다. AI가 생성한 코드나 디자인 파일을 사용하는 경우에도 스타일 이름만 확인하지 말고 실제 간격, 반응형 전환, 버튼 상태, 긴 문장이 들어갔을 때의 깨짐을 따로 확인해야 합니다.

스타일은 출발점이지 품질을 보장하는 인증서가 아닙니다. 방문자가 누구인지, 화면에서 어떤 행동을 해야 하는지, 모바일에서 무엇을 읽고 눌러야 하는지가 더 중요합니다. 따라서 프롬프트를 작성할 때는 ‘세련된 UI’라는 추상적인 표현을 줄이고, 스타일명과 함께 사용자·페이지 목적·정보 우선순위·CTA·접근성 조건을 명시하는 방식이 가장 재현성이 높습니다.