ZDNET을 팔로우하세요: 우리를 선호 소스로 추가하세요 Google에서.
ZDNET의 주요 시사점
- 두 개의 활성 제품 UI에서 ChatGPT Images 2.0을 테스트했습니다.
- AI는 설계 문제를 발견하고 실질적인 수정 사항을 제안했습니다.
- 개인 개발자에게 AI 디자인 검토는 큰 일이 될 수 있습니다.
지난 주 정도 동안 저는 OpenAI의 새로운 ChatGPT 이미지 2.0 릴리스에 대해 자세히 살펴보았습니다. 이것은 처음에 나타난 것보다 훨씬 더 중요한 릴리스입니다.
우리 모두는 AI 이미지 생성기에 깊은 인상을 받았습니다. 이 도구는 예쁜 그림을 만들고 재미있는 트릭을 할 수 있습니다. 그들은 또한 많은 AI 슬롭을 생성할 수 있습니다. 그러나 지금까지 그들은 자신들이 생산하는 제품에 대한 이해가 제한되어 있었습니다.
또한: 실제적이고 신뢰할 수 있는 제품을 빠르게 출시하는 데 사용하는 7가지 AI 코딩 기술
Images 2.0은 이미지 생성에 주제 지능을 추가합니다. 이 기능은 ChatGPT가 할당을 받고 높은 가치의 출력을 생성할 수 있음을 의미합니다.
이 문서에서는 이러한 할당 유형 중 하나인 사용자 인터페이스 업데이트를 살펴보겠습니다. 이전에는 코딩 에이전트가 여기저기서 UI 요소를 정리할 수 있었습니다. 챗봇은 수정이 필요한 부분에 대해 텍스트 기반 추천을 제공할 수 있습니다. 하지만 그들은 완전한 디자인을 할 수 없었습니다.
이제 그들은 할 수 있습니다. 저는 월 20달러 ChatGPT Plus 요금제의 ChatGPT Images 2.0에 적극적으로 작업 중인 두 가지 UI 디자인을 제공했습니다. 몇 분 만에 ChatGPT는 두 개의 재설계된 사용자 인터페이스를 반환했으며, 두 가지 모두 내 제품에 통합할 계획인 디자인 개선이 이루어졌습니다.
다음은 이 새로운 도구를 통해 제가 이미 발견한 내용을 빠르게 알려드릴 4개의 최근 기사입니다.
나는 ZDNET 검색 기사의 프로젝트 자료로 ZDNET이 아닌 작업을 자주 사용합니다. 나는 이해 상충을 원하지 않기 때문에 제품 이름과 링크를 공유하지 않으려고 노력합니다. 하지만 이 글에서는 제품명을 보여줄 필요가 있습니다. 이름은 제가 AI에게 작업을 요청한 기존 UI 디자인의 일부입니다. 그것들을 꺼내면 별 의미가 없을 것입니다. 앞으로도 제품 자체에 대한 링크는 피하겠습니다.
또한: 4년 간의 제품 개발을 4일 만에 200달러에 완료했지만 여전히 놀랍습니다.
시작해 봅시다.
맥 인터페이스 디자인
이 챌린지를 위해 AI에서 실행하고 싶은 인터페이스가 두 개 있었습니다.
또한: 저는 Claude Code를 사용하여 8시간 만에 Mac 앱의 코드를 작성했지만 마술보다 더 많은 작업이었습니다.
첫 번째는 Mac 앱입니다. 1월부터 Claude Code와 함께 바이브 코딩을 해왔습니다. 이 프로젝트는 일주일에 1~2시간 밖에 작업할 수 없고 이미지 처리 및 분석에 MacOS의 내부 AI를 사용하기 때문에 시간이 오래 걸립니다.
현재 내 앱에 있는 디자인은 다음과 같습니다. 여기서 많은 일이 일어나고 있습니다. 나는 특히 왼쪽에 있는 큰 버튼에 투자했는데, 그 이유는 그것이 아내의 전자상거래 사업을 위한 브랜드 색상을 반영하기 때문입니다. 또한 iPhone 앱에서도 매우 잘 변환됩니다.
저는 해당 스크린샷을 ChatGPT에 업로드하고 “이 사용자 인터페이스를 더 매력적이고 사용하기 쉽게 다시 디자인하세요.”라는 메시지를 표시했습니다. ChatGPT 이미지 2.0이 만든 내용은 다음과 같습니다.
처음에는 변화가 마음에 들지 않았습니다. 가장 눈에 띄는 변화는 컬러 버튼이 사라진 것입니다. 그러나 AI는 그리드 보기 하단에 보기 옵션이 있다는 사실도 잘 이해하지 못했습니다.
또한: AI가 어떻게 갑자기 오픈 소스 개발자에게 훨씬 더 유용해졌는가?
반면에 저 빨간색 사각형을 보세요. 다음은 제가 정말 좋아하는 새 모형의 영역이며 내 UI에 통합할 계획입니다.
- 왼쪽 하단에 있는 일련의 작업은 iPhone 앱의 아이콘이었지만 AI가 제공하는 UI를 사용하면 훨씬 더 좋아 보입니다.
- 마찬가지로 AI는 상단 중앙 빨간색 상자에 표시된 것처럼 그리드 보기 상단에 훨씬 더 명확한 헤더 영역을 추가했습니다.
- 또한 AI는 패턴 썸네일을 펼쳐 중앙의 아래쪽 빨간색 상자에 표시된 것처럼 선택 상자를 명확하고 매력적으로 만들기 위해 더 많은 호흡 공간을 제공합니다.
- AI는 내가 연결하지는 않았지만 정말 마음에 드는 즐겨찾기 옵션을 추가했습니다.
- 마지막으로, 세부정보 보기 하단에 지속적인 추가/업데이트 필드가 있다는 아이디어가 마음에 듭니다.
이 연습에서 제가 얻은 가장 큰 교훈은 제가 제품에 통합할 다섯 가지 새로운 디자인 노트입니다. 제안된 UI를 반영하기 위해 전체 앱을 다시 디자인하는 것은 아닙니다. 그러나 이미지에는 몇 가지 훌륭한 아이디어가 포함되어 있습니다.
게다가, 이와 같은 모형이 있으면 Claude Code에게 내가 원하는 것을 보여주기가 훨씬 더 쉬워질 것입니다. 이 연습은 더 나은 소프트웨어를 구축하기 위해 월 $20 ChatGPT Plus 플랜과 월 $100 Claude Code Max 5x 플랜을 사용하는 좋은 예입니다.
웹 인터페이스 디자인
다음은 내 보안 제품의 시작 페이지에 대한 UI입니다. 내 디자인은 깔끔하지만 아주 초보적입니다. 이는 주로 제가 CSS로 코딩하는 것을 싫어한다는 사실을 반영합니다.
또한: 저는 20달러짜리 AI 도구를 사용하여 12시간 만에 24일의 코딩을 완료했습니다. 하지만 한 가지 큰 함정이 있습니다.
지난 가을, 첫 번째 에이전트 기반 바이브 코딩 프로젝트에서 저는 ChatGPT Plus 계획(AI 할당량이 상당히 빨리 소진됨)에서 OpenAI의 Codex를 사용하여 UI를 상당히 추악한 것에서 불쾌한 것으로 다시 디자인했습니다. 지난 가을 첫 번째 통과의 결과는 다음과 같습니다. 저는 Codex에게 CSS를 배치할 위치와 방법을 알려주면서 디자인을 했습니다.
이번 주 테스트 결과는 흥미로웠습니다. 스크린샷을 ChatGPT에 붙여넣었지만 프롬프트를 표시하기 전에 실수로 Return 키를 눌렀습니다. ChatGPT는 자체적으로 페이지를 분석하기로 결정하고 “가장 큰 문제는 약한 시각적 계층 구조, 너무 많은 회색, 매우 긴 인트로 블록, 똑같이 중요하지 않음에도 관심을 끌기 위해 동등하게 경쟁하는 3개의 하위 카드”라고 추론했습니다.
또한 다음을 포함하여 “보다 현대적인 관리 미학”을 권장했습니다.
- 큰 회색 패널 대신 흰색 카드 배경입니다.
- 부드러운 테두리.
- 섹션 사이에 더 많은 간격이 있습니다.
- 버튼, 링크 및 활성 상태에 일관되게 사용되는 하나의 강력한 강조 색상입니다.
- 본문 텍스트의 줄 길이가 더 짧습니다.
- 제목, 부제목, 본문 문구 간의 대비가 향상되었습니다.
또한: Claude Code는 6개월 만에 10억 달러라는 놀라운 수익을 올렸습니다. 내 AI 코딩 iPhone 앱이 그 이유를 보여줍니다.
이 시점에서 저는 이미지 2.0을 사용하기로 결정하고 “새롭게 정의된 인터페이스의 이미지를 제공해주세요”라고 지시했습니다. AI가 생성한 내용은 다음과 같습니다.
이 출력은 Codex로 돌아갈 수 있는 몇 가지 디자인 노트도 제공합니다. 저는 웹 제품에는 OpenAI의 Codex를 사용하고 Mac 제품에는 Claude Code를 사용합니다. 주로 두 가지 에이전트 코딩 도구에 대한 경험을 제공하여 이에 대해 작성할 수 있습니다. 여기에 글을 쓰는 것이 주요 목표가 아니었다면 도구 중 하나를 선택했을 것입니다. 나는 둘 다 똑같이 도움이 된다는 것을 알았습니다.
또한: Claude Code의 새로운 자동 모드가 속도를 늦추지 않고 AI 코딩 재해를 방지하는 방법
ChatGPT 이미지 2.0은 로고를 만들기로 결정했습니다(주로 첫 번째 이미지에서 로고를 제공하지 않았기 때문입니다). AI에는 내가 좋아하는 몇 가지 기능이 추가되었습니다.
첫째, 추천하는 전반적인 디자인 미학이 정말 마음에 들었습니다. 이를 제품의 나머지 부분(대형 제품)에 전파하는 것은 많은 작업이 될 수 있지만 디자인은 마음에 들었습니다.
또한 AI가 빠른 설정 영역, 도움 필요 영역, 상단의 개인 정보 보호/문서 보기 섹션 등 세 가지 별도의 사용자 도움말 영역을 홍보하는 방식이 마음에 들었습니다. 원래 인터페이스에서는 사용자가 정보에 액세스할 수 있었지만 실제로는 어디서부터 시작해야 할지 명확하지 않았습니다.
하단의 사이트 상태 섹션도 마음에 들었습니다. 나는 종종 그런 기능을 추가하는 것에 대해 생각해 보았지만 코딩 요구 사항 때문에 약간 겁이 났습니다. 왜냐하면 상태 요소는 사용자가 설치한 부분 유료화 플러그인에 따라 변경되어야 하기 때문입니다. 그래도 해당 기능의 표현을 보니 추가하고 싶었습니다.
이것은 판도를 바꾸는 일이다
저는 이 기능이 ChatGPT가 처음 출시되었을 때와 마찬가지로 게임의 판도를 바꾸고 있다고 생각하며, 에이전트 쌍 프로그래밍이 지난 여름에 출시되었을 때처럼요.
또한: 음성과 마우스만으로 두 개의 앱을 만들었습니다. IDE는 이미 쓸모가 없나요?
저는 두 개의 제품 사용자 인터페이스를 AI에 제출하고 일련의 프로토타입 디자인과 함께 본질적으로 동료 검토를 거친 논평을 받았습니다. 솔로 프로그래머로서 이 결과물은 매우 귀중합니다.
프로그래머와 디자이너가 포함된 완전한 사내 팀이 있더라도 이 분석을 실행하고 검토할 프로토타입을 구성하는 데 아마도 일주일 정도 걸렸을 것입니다. 해당 프로젝트에 드는 인건비만 해도 꽤 상당했을 것입니다. 그러나 20달러에 나는 내 제품을 더 좋게 만들 실행 가능한 너겟을 포함하는 매우 유용하고 건설적이며 AI처럼 어리석지 않은 재설계 두 가지를 받았습니다.
와우.
ChatGPT Images 2.0을 Claude Code 또는 Codex와 페어링하는 경우 이미지 모형을 코딩 에이전트의 디자인 개요로 사용하시겠습니까? 아래 댓글을 통해 알려주세요.
소셜 미디어에서 저의 일상적인 프로젝트 업데이트를 팔로우하실 수 있습니다. 내 주간 업데이트 뉴스레터를 구독하고 Twitter/X에서 나를 팔로우하세요. @DavidGewirtzFacebook(Facebook.com/DavidGewirtz), Instagram(Instagram.com/DavidGewirtz), Bluesky(@DavidGewirtz.com), YouTube(YouTube.com/DavidGewirtzTV).
완벽 가이드 보기