AI로 만든 화면,
어디부터 고칠까요?

화면 전체를 다시 만들기 전에, 사용자가 무엇을 이해하고 눌러야 하는지부터 살펴보세요.

AI로 첫 화면을 만들었습니다. 필요한 기능도 있고 버튼도 눌리는데, 다른 사람에게 보여주려니 어딘가 어색해요. “좀 더 예쁘게”라고 요청하면 색과 배치가 한꺼번에 바뀌고 무엇이 좋아졌는지는 설명하기 어렵습니다.

이럴 때는 다른 사람이 어느 부분을 보고, 왜 고쳤는지 따라가 보는 편이 도움이 됩니다. 동의 화면의 문구를 바꾼 사례, 바꿀 범위를 먼저 정하는 설명, 랜딩페이지의 배치를 다듬는 과정을 골랐어요. 지금 만들고 있는 화면 하나를 옆에 열어두고 읽어보세요.

1. 이 화면에서 무엇을 해야 하는지 보이나요?

모임에 초대받았다고 생각해보세요. 아래 화면에는 모임 이름과 함께 AI가 하는 일, 하지 않는 일이 나열돼 있습니다. 내용을 읽을 수는 있지만 사용자가 지금 결정해야 할 일은 맨 아래 버튼까지 내려가야 보입니다.

Eric Park (박의준)는 AI가 참여하는 단체 채팅 앱의 동의 화면을 여러 버전으로 비교합니다. 두 번째 버전에서는 제목이 참여 여부를 묻는 질문으로 바뀌어요. 설명도 짧은 핵심 문장과 그 아래의 보조 문장으로 나눕니다.

달라진 것은 제목과 버튼의 관계예요

색과 일러스트도 바뀌었지만 여기서는 화면이 묻는 질문과 버튼이 제공하는 답을 눈여겨보세요. 제목에서 참여 여부를 묻고 버튼에서 그 결정을 내리게 합니다. AI의 역할과 제약은 그 결정을 돕는 설명이 됩니다. 설명을 무조건 지우는 대신, 핵심 문장과 자세한 내용의 역할을 나눈 셈이에요.

Eric Park는 14:23 이후에 이러한 제목과 설명의 변화를 짚고 15:38부터는 개선안에 남은 버튼 색상 불일치도 지적합니다. 새로 만든 화면에도 다시 살펴볼 부분이 있다는 점까지 함께 볼 수 있어요.

내 프로젝트에는 이렇게 적용해보세요

가입, 파일 업로드, 일정 저장처럼 결정이나 행동이 있는 화면 하나를 골라보세요.

1. 사용자가 결정할 일을 한 문장으로 적어요. 예: “작성한 일정을 저장할지 결정한다.”
2. 제목과 주 버튼을 함께 읽어요. 제목이 화면의 이름만 말하고 있다면, 해야 할 일이나 결과를 더 분명하게 설명할 수 있는지 살펴봅니다.
3. 결정에 필요한 설명을 남겨요. 비용, 공개 범위, 되돌릴 수 있는지처럼 중요한 조건을 짧게 만들겠다는 이유로 빼지는 마세요.

예를 들어 개인 일정 앱에서 “일정 관리”라는 제목 아래 “확인” 버튼이 있다면, 무엇을 확인하는지 모호할 수 있어요. “새 일정 추가”와 “일정 저장”처럼 행동이 드러나는 문구를 비교해볼 수 있습니다. 이 예시는 원문 화면을 바탕으로 한 인플피드의 적용 제안이에요.

처음 보는 사람에게 “이 버튼을 누르면 무슨 일이 생길 것 같나요?”라고 물어보세요. 의도한 행동과 답이 다르다면, 설명을 더 붙이기 전에 제목과 버튼을 다시 살펴볼 이유가 있습니다. 원문 사례에서는 사용자 실험을 하지 않았으므로 이 확인은 내 프로젝트에서 직접 해봐야 해요.

2. 고치고 싶은 부분만 바꾸고 있나요?

제목을 고치고 나니 이번에는 색과 버튼 모양이 아쉽습니다. 참고 이미지를 붙여 “이런 느낌으로 바꿔줘”라고 요청했더니, 잘 작동하던 메뉴 위치와 입력 순서까지 달라졌어요. 무엇을 참고하고 무엇을 유지할지 나눠 말하지 않으면 수정 범위가 커질 수 있습니다.

디자인베이스의 강좌는 개인 일정 도우미를 예로 들어 기능·정보 구조와 시각적 스타일을 분리해서 요청하는 방법을 설명합니다. 04:23 슬라이드가 그 구분을 보여줘요.

참고 이미지에서 가져올 부분을 정해요

이 영상에서 참고 이미지는 전반적인 분위기를 고르는 데 쓰입니다. 그 이미지의 정보 구조가 내 사용자에게도 적합하다고 확인한 것은 아니에요. 디자인베이스는 기능, 사용성, 정보 구조와 배치를 유지하고 색·글꼴·간격·모서리 같은 시각적 요소를 참고하도록 설명합니다.

여기서 가져올 것은 “구조는 언제나 바꾸면 안 된다”는 규칙이 아닙니다. 이번에 해결하려는 문제에 맞춰 변경 범위를 정하는 방식이에요. 메뉴를 찾을 수 없는 문제가 있다면 배치도 고쳐야 하지만 버튼 모양을 다듬는 작업에서 입력 순서까지 바꿀 필요는 없겠죠.

다음 수정 요청에 두 줄을 더해보세요

인플피드의 적용 예시입니다. 내 화면에 맞게 항목을 바꿔 적어보세요.

• 유지할 것: 일정 입력 순서, 저장 버튼의 위치와 동작, 이미 입력한 값.
• 바꿀 것: 주 버튼과 보조 버튼이 구분되도록 색과 테두리 조정.

참고 이미지를 함께 준다면 “이 이미지의 버튼 구분 방식을 참고하고, 메뉴와 입력 순서는 유지해줘”처럼 범위를 덧붙일 수 있어요. 요청한 뒤에는 좋아진 모양과 유지돼야 할 동작을 따로 확인합니다. 저장 버튼이 구분되는지 보고 실제로 입력한 일정이 저장되는지도 확인하는 식이에요.

이미 잘되는 부분을 적어두면 결과가 달라졌을 때 비교할 기준이 생깁니다. 같은 도구를 설치하지 않아도, 지금 쓰는 AI에 수정 요청을 할 때 적용해볼 수 있어요.

3. 제목, 설명, 버튼이 한 흐름으로 읽히나요?

무엇을 보여줄지와 어디까지 바꿀지를 정했다면, 이제 배치를 살펴볼 차례예요. 제목, 설명, 버튼이 각각 괜찮아 보여도 화면 전체에서는 서로의 관계가 흐릿할 수 있습니다.

Steve Schoger의 영상은 수익 관리 도구의 랜딩페이지를 다듬는 과정을 보여줍니다. 아래는 글꼴을 일부 수정한 09:45 시점이에요. 제목, 설명, 두 버튼이 중앙에 쌓여 있고 그 아래에 제품 화면이 있습니다.

Steve Schoger는 자신의 다른 작업에서 사용한 구성을 참고해 제목과 설명을 나누는 배치를 시도합니다. 제목을 왼쪽에 두고 설명과 버튼을 오른쪽에 묶어요. 아래의 제품 화면은 더 넓게 펼칩니다.

두 칸 배치보다 읽을 순서를 살펴보세요

이 장면이 모든 랜딩페이지에 두 칸 배치를 권하는 것은 아닙니다. Steve Schoger는 왼쪽 정렬에 대한 자신의 선호를 말하며 대안을 시도해요. 이 선택이 실제 가입률이나 이해도를 높였다는 실험 결과는 영상에서 확인되지 않았습니다.

내 작업으로 가져올 부분은 제목의 약속, 설명의 근거, 다음 행동을 구분해서 보는 과정입니다. 이 화면에서는 제목이 제품의 가치를 말하고 설명과 버튼이 이어서 내용을 확인하거나 시작할 길을 엽니다. 제품 화면은 실제로 무엇을 쓰게 되는지 보여줘요.

내 화면에서도 세 역할을 찾아보세요

1. 제목: 가장 먼저 이해해야 할 내용은 무엇인가요?
2. 설명: 그 내용을 이해하거나 선택하는 데 꼭 필요한 정보는 무엇인가요?
3. 버튼: 읽고 난 뒤 무엇을 할 수 있나요?

인플피드의 제안은 이 세 부분을 먼저 표시하고 한 부분만 비교해보는 거예요. 설명과 버튼이 멀리 떨어져 있다면 가까이 묶어보거나, 모든 문장이 비슷하게 강조돼 있다면 보조 설명의 굵기를 조정해볼 수 있습니다. 처음부터 글꼴·색·간격·배치를 모두 바꾸면 어떤 선택이 도움이 됐는지 살피기 어려워요.

넓은 화면에서 괜찮아 보이면, 창을 좁혀 같은 내용을 다시 읽고 버튼을 눌러보세요. 제목이 어색하게 잘리거나 버튼이 화면 밖으로 밀려나는지도 확인합니다. 원문의 데스크톱 배치를 그대로 옮기는 대신, 내가 보여줄 화면 크기에서 확인하는 단계예요.

영어로 진행되는 긴 영상입니다. 전체를 한 번에 보기 부담스럽다면 06:38–13:21의 글꼴과 첫 화면 배치 과정부터 보세요.

지금 열어둔 화면에서 한 가지를 골라보세요

세 사례는 모두 화면을 바꾸지만 고치는 대상은 달라요. 첫 사례는 사용자가 결정할 일, 두 번째는 수정 범위, 세 번째는 읽을 순서를 보여줍니다. 지금 내 화면에서 가장 막히는 질문 하나부터 골라보세요.

• 무슨 화면인지 모르겠다면: 제목과 주 버튼이 같은 행동을 안내하는지 봅니다.
• 고칠 때마다 다른 부분이 망가진다면: 유지할 것과 바꿀 것을 나눠 적습니다.
• 무엇부터 읽어야 할지 흐릿하다면: 제목·설명·버튼의 강조와 거리를 비교합니다.

수정 전 화면을 남기고, 바꿀 이유를 한 문장으로 적은 다음, 같은 크기의 화면에서 다시 확인해보세요. 버튼을 누를 수 없거나 내용이 잘리는 문제가 있다면 그 문제부터 해결해야 합니다.

오늘의 목표는 새 디자인 한 벌을 얻는 게 아니라, 내가 고친 한 부분의 이유를 설명할 수 있게 되는 거예요.