소개
AI들이 단순한 코드만 잘 짜는지, 아니면 감성적 UI나 문장 생성까지 잘 해낼 수 있는지 궁금했습니다. 그래서 ChatGPT (GPT-4o), Claude, Gemini에게 똑같은 프롬프트를 주고, "버튼을 누르면 랜덤한 칭찬 문장을 출력하는 웹앱"을 만들어보도록 요청해봤어요. 단순한 기능 구현을 넘어, 코드 품질, 문장 감성, UI 감성까지 포함한 ‘AI 코딩 감각’을 비교해보고 싶었습니다!
진행 방법
사용 프롬프트:
"버튼을 클릭하면 AI가 랜덤으로 칭찬 문장을 출력해주는 '나만의 칭찬 생성기'를 만들어 줘."사용한 AI 툴:
GPT-4o (ChatGPT) – 간단하고 빠르게 실행 가능한 구조
Claude (Anthropic) – 감성 깊은 문장과 앱형 UI
Gemini (Google) – 시각적으로 예쁘고 컬러풀하면서 빠 결과물
동일한 프롬프트를 입력한 뒤, canvas 기능을 이용해서 앱을 비교해봤습니다.
ChatGPT
Claude
Gemini
결과와 배운 점
세 가지 모델(GPT-4o, Claude, Gemini)을 직접 비교해보면서 단순한 코드 생성 능력뿐 아니라,
얼마나 감성적이고 사용자 친화적인 결과물을 만들어내는가를 체험할 수 있었습니다.
✅ GPT-4o: 기능에 충실한 ‘개발자형 AI’
ChatGPT(GPT-4o)의 결과물은 매우 기본에 충실한 구조였습니다.
HTML, JS 코드가 함께 제공되며, 버튼을 눌렀을 때 랜덤 칭찬이 출력되는 구조는 직관적이고 이해하기 쉬웠습니다.
UI 구성은 첫 번째 이미지처럼 배경은 연한 노란색,버튼은 따뜻한 브라운 톤으로 되어 있어 정적인 웹페이지 느낌이 강했습니다.
코드 구조도 간단해서 초보자도 쉽게 커스터마이징할 수 있다는 점이 좋았어요.
다만 감 성적으로는 조금 단순한 느낌이 있었고, 설명 문구나 시각적 강조 요소는 따로 없었습니다.
장점: 빠르게 만들 수 있다, 코드 이해도 높음
단점: 감성 요소 부족, 디자인적 완성도 낮음
✅ Claude: 감성 최적화 ‘힐링형 AI’
Claude는 결과물 자체가 매우 앱스러운 분위기를 갖고 있어서 놀라웠습니다.
버튼을 누르면 나오는 칭찬 문장도 “당신은 어려운 순간에도 희망을 잃지 않는 사람입니다.”와 같이깊이 있는 문장과 정서적 안정감을 주는 표현이 많았습니다.
UI는 두 번째 이미지처럼 카드형 구조,
텍스트는 말풍선 형태로 강조되며, 상단에는 제목과 설명 문구까지 잘 갖춰져 있었습니다.하단에는 "칭찬 생성하기" 버튼, 그리고 작은 하단 문구(예: “당신은 소중한 사람입니다 ❤️”)까지 붙어 있어서정말 누군가를 위한 감성 케어 앱 같은 느낌이었어요.
코드도 구조적으로 짜여 있어서, 설명 요소, 칭찬 박스, 버튼 등을 모듈별로 나눠 관리 가능했습니다.
장점: 감성적 완성도 최고, 구조적 HTML 설계
단점: 초보자가 코드 양에 압도될 수 있음, 문장이 길어 UI에 맞춤 조절 필요
✅ Gemini: 디자인 감성 ‘비주얼형 AI’
Gemini의 결과물은 시각적 완성도에서 가장 눈에 띄었습니다. 그리고 엄청 빠릅니다.
세 번째 이미지에서 볼 수 있듯이, 그라데이션 배경, 강조된 이모지 버튼, 중앙 배치된 칭찬 문장 등이 잘 구성되어 있어 현대적인 느낌이 강했습니다.
칭찬 문장은 짧고 정중한 스타일이 많았고, 포멀한 톤을 유지하면서도 따뜻함은 살짝 묻어나는 느낌이었어요.
HTML 구조도 깔끔하고, CSS는 버튼 그라데이션이나 둥근 테두리 등 디자이너 감성이 반영된 구성이었구요.
버튼에는 이모지도 포함되어 있어 사용자가 더 친근하게 다가갈 수 있었습니다.
장점: 디자인 완성도 최고, 이모지/그라데이션 등 비주얼 중심
단점: 코드 커스터마이징이 제한적, 구조 파악이 GPT보다 어려움
종합적으로 얻은 인사이트
이번 실험을 통해 한 가지 확실히 느낀 점은, AI의 성능 비교는 단순히 정확도나 문장 수로만 판단할 수 없다는 것입니다.
각 AI는 자신만의 "해석 방식"과 "감성 톤"을 가지고 있었고, 동일한 요구에 대해 각기 다른 UI 스타일, 표현 방식, 코드 구성으로 결과를 제시했습니다.
앞으로의 계획
각 모델의 장점만 결합한 하이브리드 칭찬 생성기를 만들어보고 싶어요!
버튼을 누르면 API를 통해 DB에 저장하고, 사용자별 ‘오늘의 칭찬 히스토리’도 남길 수 있도록 기능 확장해볼 예정입니다