AI를 이용해 웹사이트나 앱 디자인 시안을 뚝딱 만들어내는 시대, 정말 편리하지만 한 가지 아쉬운 점이 있죠. 바로 결과물이 어딘가 모르게 'AI스러운' 느낌을 준다는 것입니다. 예를 들면 이런 디자인처럼 말이죠.
반복되는 사각 '라운드' 처리, '이모지'활용, 애매한 그라디언트 처리 등등..
분명 깔끔하긴 한데, 어딘가 밋밋하고 특색 없는 느낌을 지우기 어렵습니다. 😥
그래서 이번 글에서는 이런 AI스러움을 싹 빼고, 마치 실제 디자이너가 작업한 것처럼 고퀄리티 디자인을 AI로 만드는 방법을 소개해 드리겠습니다.
👎 그냥 AI에게 맡기면 생기는 일
비교를 위해, 먼저 일반적인 방법으로 AI에게 디자인을 요청해 보겠습니다. 참고할 만한 1. 디자인 샘플을 보여주고, 2. 이걸 분석해서 'AI 교육 과정 제안서' 디자인을 만들어 달라고 바로 요청했습니다.
결과물은 나쁘지 않았지만, 우리가 흔히 보는 클로드 스타일의 디자인에서 크게 벗어나지 않았습니다.
깔끔하긴 하지만 , 특유의 외곽 라운드 처리된 사각형, 가운데 정렬 CTA형태로 좀 따분한 AI 디자인이 생성되었죠.
👍 Ascii 코드로 '디자인 뼈대'부터 잡기
이번에는 다른 방법을 써보겠습니다. 디자인을 바로 만들어달라고 요청하는 대신, 우선 참고할 디자인을 'ASCII 아트'로 시각화해서 전체적인 레이아웃, 즉 '디자인의 뼈대'를 먼저 보여달라고 요청하는 겁니다.
ASCII아트란, 키보드에 있는 문자, 기호, 숫자 등을 활용해 그림이나 그래픽처럼 표현하는 것을 말합니다.
예를 들어 아래처럼요:
+----------------------------------------------------+
| HEADER |
| (Logo, Navigation Menu) |
+----------------------------------------------------+
| |
| MAIN CONTENT AREA |
| |
| +------------------------+ +-------------------+ |
| | | | | |
| | Article/Post | | SIDEBAR | |
| | | | (Categories, Ads) | |
| | | | | |
| +------------------------+ +-------------------+ |
| |
+----------------------------------------------------+
| FOOTER |
| (Copyright, Links) |
+----------------------------------------------------+웹페이지를 ASCII로 시각화한 예시
Ascii 코드를 활용하면 몇 가지 장점이 있습니다.
- 빠른 레이아웃 확인: 무거운 HTML 코드가 생성될 때까지 기다릴 필요 없이, 텍스트 기반의 간단한 레이아웃을 통해 디자인의 큰 그림을 순식간에 파악할 수 있습니다.
- 간편한 수정: 전체적인 구조가 마음에 들지 않을 때, 텍스트로 된 이 뼈대 단계에서 손쉽게 수정을 요청하고 바로 반영된 결과를 확인할 수 있습니다.
이렇게 Ascii 코드로 디자인의 전체적인 구조를 먼저 확인하도록 요청해보겠습니다.디자인을 참고하고 싶은 PDF자료를 업로드하고, 아래와 같이 프롬프트를 입력해주었습니다.
프롬프트 :
너는 2025년 웹디자인/프론트엔드 디자인 트렌드에 아주 빠삭한 시니어 웹디자이너이자 프론트엔드개발자야. 이 pdf 스타일 너무 좋은데 각 페이지의 디자인 분석해서 ascii코드로 띄워줘.
디자인을 생성하기 전에 "분석해서 ascii코드로 띄워달라"고 요청하니 위와 같이 각 페이지의 레이아웃, 디자인 요소를 ascii코드로 시각화해주었습니다.
이렇게 HTML코드 구현 없이도 전체적인 디자인/레이아웃을 확인할 수 있습니다. 필요하면, 추가 요청을 통해 ascii코드를 수정해달라고 하면 됩니다.
시각화한 디자인이 마음에 든다면, 이 디자인을 적용해 원하는 주제의 웹페이지/보고서 디자인을 만들어달라고 요청합니다.
저는 아래와 같이 프롬프트를 구성해 요청해주었습니다:
- 디자인에 들어갈 주제 제시(ex- 5장짜리 생성형 AI교육과정 제안서)
- 각 페이지 레이아웃을 ascii로 표현할 것.
- 각 페이지 내에 들어갈 요소 (폰트크기, 여백, 배경색상)는 별도의 텍스트로 작성
프롬프트:
좋아 이거 바탕으로 5장짜리 생성형AI 교육과정 제안서 디자인 만들어줘. ascii코드로. 각 페이지별로 폰트크기, 여백, 배경색상, 폰트색상, 폰트종류 등 모든 요소들을 명확하게 지정해줘. 각 페이지 레이아웃마다 ascii코드로 표현해주고, 각 페이지내에 들어갈 각 요소들의 스펙사항은 별도의 텍스트로 작성해줘.
요청한 내용에 따라, 각 Page의 디자인, 폰트 색상, 배경색 등등을 깔끔하게 기획해주었습니다.
저는 첫 페이지의 배경색이 흰색 (#fffff)보다 파란색 (#0066ff)가 좋을 것 같아, 그부분만 최종적으로 수정을 요청한 뒤, "이 레이아웃을 바탕으로 HTML 코드를 작성해 줘"라고 요청했습니다.
✨ 결과 비교
결과는 어땠을까요? 두 방법의 차이는 명확했습니다.
Ascii 코드를 중간 단계로 활용하자, AI가 참고 디자인의 레이아웃과 디자인 요소를 훨씬 더 깊이 이해하고 반영하는 것을 볼 수 있었습니다. AI스러운 반복되는 디자인 요소는 사라지고, 마치 디자이너가 의도를 가지고 구성한 듯한 일관된 디자인의 결과물이 완성되었죠.
이 방법으로 만든 제안서 샘플은 아래 링크에서 직접 확인하실 수 있습니다. 👇
https://claude.ai/public/artifacts/894a7d3c-819b-41a3-9a7e-ad49ef036091
처음부터 완벽한 결과물을 기대하기보다, 이처럼 Ascii 코드라는 중간 단계를 통해 AI와 소통하며 결과물을 다듬어 나간다면 훨씬 더 만족스러운 디자인을 얻을 수 있을 거에요.
Member discussion: