손으로 대충 그린 와이어프레임 하나만 있어도
AI가 실제 앱처럼 만들어줄 수 있을까요?
똑같은 운동 코치 앱 와이어프레임을
챗GPT 5.6 SOL과 클로드 오푸스 5한테
모바일 앱 프로토타입으로 만들어보라고 했습니다.
똑같은 뼈대를 줬을 때
AI가 어디까지 알아서 디자인하고 구현하는지 비교해봤습니다.
테스트 조건 & 프롬프트
테스트 조건은 간단합니다.
✔ GPT-5.6 sol vs 클로드 오푸스 5 비교
✔ 동일한 손그림 와이어프레임과 프롬프트 적용
✔ 디자인 스타일·색상·폰트 별도 지정 X
✔ 첫 번째 완성 결과물로 1차 비교 후 수정 1회 진행
참고로 와이어프레임은 앱 화면에 어떤 정보와 기능을
어디에 배치할지 대략 그려놓은 설계도를 말합니다.
색상이나 디자인 세부 요소는 AI 판단에 맞기고
오늘의 운동 / 운동 기록 / 운동 통계 / 운동 완료
4개 화면의 구조와 핵심 기능만 간단하게 정리했습니다.
제가 사용한 프롬프트는 아래와 같습니다.
첨부한 손그림 와이어프레임 이미지를 바탕으로
모바일 운동 코치 앱의 실행 가능한 프로토타입을 제작해주세요.
기본 조건:
- 총 4개 화면으로 구성해주세요.
- 오늘의 운동, 운동 기록, 운동 통계, 운동 완료
- 손그림 와이어프레임의 화면 구조, 정보 배치, 핵심 기능은 유지해주세요.
- 모바일 앱처럼 보이는 UI로 구성해주세요.
- 텍스트는 한국어로 유지해주세요.
- 실제 피트니스/운동 앱처럼 직관적이고 완성도 있게 디자인해주세요.
- 색상, 타이포그래피, 아이콘, 버튼 스타일, 카드 디자인, 차트 스타일,
여백, 전체 분위기는 자유롭게 판단해주세요.
- 4개 화면은 하나의 통일된 디자인 시스템 안에서 일관성 있게 구성해주세요.
이번 테스트에서는 GPT-5.6 Sol은 ChatGPT Work, 클로드 오푸스 5는 클로드 디자인을 사용했습니다.
둘 다 앱 UI를 만들고 수정하는 데 특화된 도구라, 같은 조건에서 비교하기에도 잘 맞았죠.
비교해보니
왼쪽 : GPT 5.6 Sol vs 오른쪽 : 오푸스 5
둘 다 한 번의 시도만에 완성됐습니다.
GPT-5.6 솔은 약 20분, 클로드는 약 15분 정도 걸렸습니다.
와이어프레임이 같아서 앱의 기본 골격은 비슷했지만, 결과물의 분위기는 꽤 달랐습니다.
GPT는 화이트톤, 클로드는 블랙톤을 중심으로 잡았습니다.
같은 구조인데도 컬러와 여백, 카드 구성 방식이 달라 첫인상부터 차이가 났습니다.
왼쪽 : GPT 5.6 Sol vs 오른쪽 : 오푸스 5
홈 화면에서를 보면 GPT 버전은 운동 시작 버튼이
텍스트 일부를 가리면서 디자인 완성도가 조금 아쉬웠습니다.
반면 클로드는 주요 요소 간 간격이 비교적 안정적으로 정리돼 있었습니다.
운동 기록 화면에서도 차이가 났습니다.
GPT는 한 화면에 2개 운동 목록만 노출됐고,
클로드는 설정된 운동 목록을 아래로 계속 내려가며 확인할 수 있도록 구성해
실제 운동 중 루틴 전체를 확인하는 흐름은 클로드 쪽이 더 자연스러웠습니다.
왼쪽 : GPT 5.6 Sol vs 오른쪽 : 오푸스 5
운동 통계는 방향 자체가 달랐습니다.
클로드는 운동 볼륨 그래프에 애니메이션 효과를 넣어 시각적인 완성도를 높였고,
GPT는 연속 기록, 누적 기록, 한줄평 같은 정보를 추가해 데이터를 해석해주는 쪽으로 구성했습니다.
프롬프트에 세부 내용이 없었던 마이 메뉴에서도 차이가 있었습니다.
클로드는 버튼과 세부 항목까지 직접 구성해 하나의 화면처럼 완성한 반면,
GPT는 메뉴만 만들어둔 수준에 가까웠습니다.
정리하면 첫 결과에서는
GPT는 정보 확장과 해석,
클로드는 화면 완성도와 세부 UI 구성에서
차이가 났습니다.
가장 차이가 난 부분
차이가 크게 느껴진 건 수정 방식이었습니다.
GPT는 결과물을 수정하려면 기본적으로 대화창에서 다시 프롬프트로 요청해야 합니다.
(왼쪽) 수정 전, (오른쪽) 수정 후
예를 들어 “운동 예시 이미지를 추가해줘”라고 명령어를 넣으면 수정이 되긴 합니다.
여러번 수정이 필요하거나, 특정 세부 항목만 지정해서 수정해야 하는 상황이라면
프롬프트 자세히 적은 다음 버튼 누르고 운에 기대는 방법 밖에 없죠.
반면 클로드 디자인은 수정 방식이 더 다양했습니다.
대화창에 프롬프트를 입력해 전체적으로 수정하는 건 물론이고,
코멘트 기능으로 시안에서 원하는 지점을 직접 찍은 뒤 그 부분만 수정 요청도 가능하죠.
예를 들어 특정 그래프나 버튼을 선택하고
“이 그래프 색상을 다른 색상으로 바꿔줘”처럼 범위를 좁혀서 지시할 수 있습니다.
여기에 편집 기능을 이용하면 사용자가 직접 텍스트나 레이아웃, 디자인 요소를 손볼 수도 있죠.
실제 작업 현장에서 디자인 시안을 만드는 과정에서는
원하는 결과를 만들어주느냐만큼
원하는 부분만 수정할 수 있느냐도 중요해서
클로드 디자인의 수정 기능은 사용자 경험 영역에서 메리트가 큽니다.
최종 결론
클로드 버전 최종본
지피티 버전 최종본
이번 테스트만 놓고 보면 초안을 빠르게 만드는 용도라면 챗GPT-5.6 Sol,
수정까지 거쳐 최종 완성도를 높이는 작업이라면 클로드 오푸스 5가 잘 맞았습니다.
GPT는 5시간 한도 기준 57%만 사용해 여러 번 시도하거나 초안을 뽑는 데 부담이 적었습니다.
반면 클로드는 5시간 한도 대부분을 소진했지만 첫 결과물의 완성도가 높았고
특정 영역만 수정하거나 직접 편집할 수 있어 마무리 작업이 훨씬 편했습니다.
다음에는 어떤 비교를 해볼까요?
직접 붙여봤으면 하는 아이디어가 있다면 댓글로 알려주세요.
수
