Skip to content
플랜디 블로그 상단 배경 일러스트

Blog

Planning and screen notes

Notes on planning and screens.

Blog
Screen Design

화면 그림만으로는 개발이 안 되는 이유

화면 그림만으로는 개발이 안 되는 이유

화면 그림만으로는 개발이 안 돼요. 버튼을 눌렀을 때 일어나는 일이 안 보여서예요.

예쁜 화면 그림을 AI나 개발자에게 주면 각자 다르게 만들어요.

그림에 설명을 더한 것이 화면 설계예요

설명이 있어야 AI도 개발자도 같은 화면을 만들어요.

예쁜 화면 그림을 들고 갸웃하는 칸칸과 이마를 짚는 체키, 어깨를 으쓱하는 폴디
그림은 예쁜데, 눌렀을 때가 안 보여요

안 보이는 부분은 각자 채워요. 채우는 방식이 다르면 결과도 달라요.

그림에는 무엇이 안 보이나요?

화면 그림에 보이는 것과 안 보이는 것은 이렇게 나뉘어요.

그림에 보이는 것 안 보이는 것
화면 모양 눌렀을 때 일어나는 일
글자와 색 예외 상황
버튼 위치 버튼을 누른 뒤의 화면

보이는 것은 셋이 같아도, 안 보이는 것은 각자 다르게 채워요. 그래서 같은 그림을 줘도 결과가 달라져요.

설명이 한 장이라도 있으면 이야기가 달라져요. 그림에 설명을 더한 것이 화면 설계예요.

플랜디는 25년차 기획자가 만든 AI 기획 도구예요. 화면 그림보다 설명을 먼저 봐요.

그림에 설명 카드를 붙이는 칸칸과 체키, 폴디
그림에 설명을 한 장씩 더하면 화면 설계가 돼요

설명이 있어야 같은 화면이 나와요.

그림만 주면 왜 다르게 만드나요?

1단계. 예쁜 화면 그림을 AI에게 줘요

그림만 주면 AI는 보이는 대로 만들어요. 안 보이는 부분은 AI가 추측해요.

추측은 물을 때마다 달라져요.

2단계. AI는 안 보이는 부분을 자기 멋대로 채워요

버튼을 누르면 어디로 가는지 그림에 없으면, AI가 그럴듯한 곳으로 정해요.

물을 때마다 다르게 정해요.

3단계. 개발자에게 주면 개발자는 자기 경험대로 채워요

개발자는 전에 만들던 방식대로 빈 곳을 채워요. 채우는 방식은 개발자마다 달라요.

AI가 채운 것과는 달라요.

4단계. 셋이 서로 다른 화면을 만들어요

그림은 하나였는데 결과는 셋이 돼요

어느 것도 틀렸다고 말하기 어려워요. 기준이 없었으니까요.

한계

그림을 자세히 그려도 설명이 없으면 같은 일이에요. 세밀한 그림은 보이는 것만 자세할 뿐, 안 보이는 것은 그대로 비어 있어요.

반대로 설명만 있고 그림이 없어도 감이 안 와요. 그림과 설명은 한 쌍이에요. 한 쌍으로 움직여야 같은 화면이 나와요.

자주 묻는 질문

그림을 자세히 그리면 되지 않나요?

안 돼요. 자세히 그려도 보이는 것만 자세해져요.

눌렀을 때 일어나는 일은 그림에 담기지 않아요. 담기지 않는 것은 설명으로 채워요.

AI에게 화면 그림을 주면 안 되나요?

줘도 돼요. 다만 그림과 함께 설명도 줘야 해요.

설명이 없으면 AI가 빈 곳을 추측해요. 추측한 것은 나중에 고쳐야 해요.

화면 설계는 누가 쓰나요?

처음에는 만드는 사람이 써요. 화면을 시키기 전에 한 화면당 한 장씩 적어 두는 거예요.

적어 두면 나중에 시킬 때도 써먹어요.

기획 문서를 넣는 순서와 관계가 있나요?

있어요. 화면 설계는 AI 코딩툴에 넣어 읽히는 문서 중 하나예요.

자세한 순서는 AI 코딩툴에 기획 문서를 넣는 법 글에서 볼 수 있어요.

오늘 내용 정리

  1. 화면 그림만으로는 개발이 안 돼요.
  2. 그림에 설명을 더한 것이 화면 설계예요.
  3. 그림과 설명은 한 쌍으로 움직여야 해요.

그림 다음은 설명이에요

그림에 무엇을 더해야 화면 설계가 되는지는 화면 설계 한 장을 남기는 순서에서 이어져요.

One line of an idea is enough to start

Try a planning interview without signing in, then send us an inquiry if you get stuck

Contact

You need a Planning Pass to start a new plan

1 Planning Pass = a new plan (IA included) + 20 screens

Sign up and get a trial project

Sign up and you get one trial project: IA and up to 5 screens. A Planning Pass opens 20 screens and file downloads.

Sign up free

See Planning Pass pricing