디자인 효율을 높이는 AI 프롬프트 작성 원칙
프롬프트를 다루는 감각도 디자이너에게 중요해요
이제 우리 모두는 AI를 사용하면서 목적에 따라 프롬프트 작성 방식이 달라진다는 걸 경험으로 알고 있어요.
보고서나 논문 초안을 작성할 때는 논리적 흐름과 근거를 잡을 수 있게 서술 구조를 잡아주는 게 좋고, 데이터 분석이나 통계를 요청할 때는 정확한 수치와 결과 형태를 명확히 알 수 있도록 작성해 주는 게 좋죠. UI 디자인을 맡길 때도 마찬가지예요. 프롬프트를 얼마나 잘 작성하느냐에 따라 결과물의 퀄리티가 천차만별로 달라질 수 있거든요.
UI 디자인에 쓰이는 생성형 AI는 기본적으로 이미지를 합성하는 방식으로 작동해요. 그래서 장면을 얼마나 명확하고 구체적으로 묘사하는지가 가장 중요하죠. 예를 들어 UI의 핵심 요소(버튼, 내비게이션 바 등), 계층적 위치(상단, 하단 등), 그리고 스타일(모던한, 밝고 활기찬 등)이 모두 프롬프트에 담겨야 해요. 이런 키워드가 없거나 문맥상 이들이 서로 연결되지 않는다면 AI는 우리가 원하는 의도를 정확히 파악하지 못하고 엉뚱한 결과를 내놓을 가능성이 높아지거든요.
AI를 현명하게 잘 사용하는 방법은 AI가 어떻게 작동하고 어떤 원리로 움직이는지 이해하는 것에서부터 시작돼요. 그렇다면 UI를 AI로 그리기 위해선 어떤 프롬프트를 작성하면 좋을지 몇 가지 알게 된 원칙에 대해 나눠볼게요.
1. 명령 대신 결과를 묘사하기
UI 그리는 생성형 AI는 수정 명령을 순차적으로 실행하기보다 최종 형상을 한 번에 그려내는 방식으로 작동해요. 그래서 "상단 버튼을 파란색으로 바꾸고, 이미지는 변경하고 텍스트는 삭제해"와 같은 지시 형태의 명령은 AI에게 정확한 의도가 전달되지 못할 수 있어요.
묘사를 기반해 이미지를 합성해 주는 툴이라는 점을 잊으면 안 돼요. [요청]하는 형태보다 [서술]하는 형태로 말하는 것이 이 AI에겐 더 적합한 거죠. "상단에는 파란색 배경의 헤더 바가 있고, 중앙에는 이미지가 있음"과 같이 최종 결과물의 상태를 형상적으로 서술해 보세요. 지시를 내렸을 때보다 훨씬 더 원하는 결과물에 가까워질 수 있을 거예요.
2. 모순되거나 상충되는 표현은 피하기
혹시 “심플하면서 화려한 화면을 만들어줘”가 무슨 뜻인지 알겠나요? “많은 요소를 담되 미니멀하게 디자인해 줘”는요? 이런 표현을 왜 쓰는지 우리는 상황적으로 이해할 수 있지만, 디자이너를 괴롭히는 밈으로 쓰일 만큼 사실 해석하기 어려운 표현들이에요.
프롬프트 안에 서로 반대되는 스타일을 담아선 안 돼요. 결국 어느 쪽도 제대로 표현하지 못하는 어중간한 결과물이 나올 수 있거든요. 하나의 프롬프트 안에는 하나의 일관된 콘셉트만 담아서 AI가 명확한 스타일을 유지하며 디자인할 수 있도록 돕는 게 좋아요. 만약 다른 콘셉트의 아이디어 여러 개를 실험하고 싶다면 프롬프트를 나누어 여러 번 시도하는 것이 좋겠죠.
3. 두루뭉술하게 쓰지 말기
"깔끔하고 보기 좋게 만들어줘"도 마찬가지예요. 일관된 방향의 콘셉트일지는 몰라도 해석하기는 상당히 어렵죠. 제가 아는 깔끔함과 여러분이 아는 깔끔함이 다른 것처럼 AI도 나름의 깔끔함을 표현하긴 할 거예요. 그렇지만 생각한 것과 다른 결과물이 나온다면 몇 번이고 다시 시도할 수밖에 없게 되겠죠.
그러지 말고, 명확한 화면 목적을 언급하고 보충 설명으로 맥락을 보완해 보세요. "은행 앱 대시보드처럼 깔끔하고 직관적으로 만들어줘" 같은 식으로요. 나아가 추상적인 표현 "직관적으로"도 "여백이 충분하고 정보가 잘 정리되게"로 구체적으로 치환해서 작성하는 것이 좋아요. 그럼 처음부터 정확히 원하는 디자인을 이해하고 원하는 결과물을 한 번에 얻을 수 있겠죠.
4. 세세한 사항을 한꺼번에 다 넣지 말기
"헤더에 로고(200x50), 오른쪽에 20px 패딩으로 버튼 2개, 그 아래 10px 간격 메뉴 5개, 아이콘 크기는 24px...". 여러분은 다 기억하실 수 있나요? 아쉽게도 AI 역시 마찬가지예요. 챗 GPT 4o모델의 경우에도, 약 8,000 토큰까지가 입력을 받아들이는 한계라고 해요 (*토큰 : 정보를 처리하는 단위). 너무 세세한 내용을 한꺼번에 전달하면 AI는 맥락을 놓치고 여러분의 프롬프트를 일부 무시하거나 정확히 반영하지 않아요.
그래서 한 번에 모든 디테일을 담으려 하지 말고, 우선 "버튼 여백을 늘리고 아이콘 크기를 키워줘"처럼 핵심 사항에 집중해서 프롬프트를 작성하는 거예요. 그다음 아주 세밀한 부분(픽셀 단위 간격 등)을 2차 수정 프롬프트나, 나중에 수동으로 편집해서 다듬는 게 좋겠죠. 하나하나 차근차근 전달해 주면 아마 AI도 여러분을 아주 잘 따라올 거예요.
5. 정확하고 완전한 문장으로 쓰기
"사용자카드 옆 프로필 이미지 넣고 밑에버튼 3개"는 너무 축약시키고 띄어쓰기도 제대로 하지 않았어요. 사람이 읽을 때 이해가 어려운 문장은 AI도 오독할 확률이 높아요. 그래서 프롬프트는 되도록이면 정확한 언어 표현으로 구성되어야 해요.
예를 들어, 위에 문장을 "사용자 카드 옆에 프로필 이미지를 넣고, 그 아래에 3개의 버튼(프로필 수정, 이미지 삽입, 로그아웃)을 배치"처럼 끊어진 문장은 완성된 형태로 바로잡고, 쉼표나 마침표를 활용해 의미 덩어리별로 구분해 주는 게 좋아요. 또 혼동될 수 있는 약어는 풀어서 쓰세요. "NB"를 "내비게이션 바"로 풀어쓰거나 "FAB" 대신 "플로팅 액션 버튼"이라고 명확하게 표현하는 것이 해석의 정확성을 높일 수 있어요.
AI는 이제 우리 디자인 프로세스의 중요한 일부가 되었어요. 하지만 AI의 능력을 온전히 이끌어내기 위해서는 우리가 얼마나 명확하고 구체적으로 소통하느냐가 가장 중요해요.
AI를 잘 활용하는 것도 우리의 몫이고, 좋은 결과를 이끌어내는 것도 우리의 몫이에요.
이제 조금 더 명확한 프롬프트로 원하는 디자인을 빠르게 얻어보세요.
어떤 AI를 써야할지 고민된다면?
# UI그려주는 AI 3대장, 어떤게 나랑 잘 맞을까?