디자이너 없이 챗 GPT만으로 UI 디자인 해보셨나요?
졸업 프로젝트를 리팩토링하는 과정에서.. 그 당시 디자인 맡았던 친구는 다른 일을 하고있고, 새로운 디자이너를 구하기엔 너무 간단한 프로젝트라 민망해서 혼자 디자인을 시도해보았는데요.
아무래도 너무 심각하게 구리더라고요 ㅜㅜ ..ㅎㅎ
그래서 챗 GPT와 함께 디자인 리팩토링을 했는데요
GPT가 이미지 생성 기술로 아주 직관적으로 원하는 디자인을 해서 보여줄 것이라 믿고
'이런 사이트를 만들거고 이런 요소들을 넣을거야. 디자인 좀 해줄래?' 라고 채팅을 쳐봤는데요.
위의 이미지처럼 저런걸 슬라이더라고 만들어줬습니다.
ㅋㅋ.
GPT 의 이미지 생성 기능은 UI 디자인에는 정말 도움이 안됩니다.
그래도 잘만 활용하면 충분히 좋은 디자인 팁을 얻을 수 있는데요, 그 경험을 정리해보았습니다!
저와 같은 고민을 하는 분께 도움이 될까 싶어서 글을 올립니다!
제목은..
CHAT GPT와 UI 디자인 꿀팁!!
1. 컬러팔레트 구성하기
Q. 이 이미지 보고 컬러팔레트 좀 만들어줘
우선 아무리 힘들어도 전체적인 와이어프레임은 구성해두는 것이 좋습니다.
그 후 사진을 보내고 gpt에게 컬러 팔레트를 구성해달라고 이야기하세요.
서비스의 전체적인 분위기, 꼭 들어갔으면 하는 색 등 구체적으로 이야기하면 더욱 자세하게 알려줍니다.
적용해보고 마음에 안드는 부분은 다시 요청하면 됩니다.
Q. 이 컬로 좀 맘에 안드는데.. 지금 약간 파스텔 톤이잖아 그걸 좀 유지하고싶은데
기본적으로 배경색, 텍스트 색, 버튼 색 , 포인트컬러 등을 알려줍니다.
이렇게 박스를 만들어놓고 사용하면
혹시 나도 디자이너 .. ???
ㅎㅎ
2. 버튼 등 컴포넌트 디자인
Q. 버튼 사이즈랑 border radius 는 어떻게 하지?
버튼, chip , search bar 등 서비스 개발에는 다양한 컴포넌트들이 필요한데요.
사이즈, border-radius, padding 이런걸 어떻게 하면 좋을지 물어보면 좋습니다.
사실 디자인 감각이 없는 저같은 사람들은 그냥 네모난건 다 버튼이라고 생각하는데 ..
디자이너 친구의 뇌는 다르더라고요.
padding 값 , radius 값 등등 .. 폰트 크기, 사이즈 등 하나하나 정말 신경써야할게 많습니다.
이미 디자인 된 것을 보고 개발하는 건 익숙한 일이지만, 개발자가 직접 디자인하면 이런 부분은 생각 못할 수도 있으니 같이 적어봤습니다.
까먹지말고 적용하세요!
gpt에게 버튼 디자인할 때 어떤걸 더 고려하면 좋을까? 하고 물어본다면 좀 더 섬세한 디자인을 할 수 있을거예요.
Q. 하단에 건너뛰기 버튼을 아웃라인으로 할까 아니면 채워진 버튼으로 할까?
버튼 종류에도 아웃라인 , filled 등등 .. 다양하게 있는데 이부분에 대한 조언을 구해도 잘 답해줍니다.
ux 적인 부분까지 팁을 주기때문에 아주 유용해요.
3. gap 설정하기
Q. 그럼 로고, 설명, 버튼 간격은 어떻게하지?
gap 도 아주 중요한 디자인 요소 중에 하나입니다.
그냥 막 배치한다고 되는게 아니죠..
로고와 텍스트 간의 간격, 메인 콘텐츠와 버튼 사이의 간격, 버튼 끼리의 간격..등
이 부분도 놓치지 말고 gpt 에게 물어보세요 .
직접 figma 로 배치해보고 마음에 들지 않는 부분은 다시 구체적인 요구사항과 함께 질문하면 또 다른 방안을 제시해줍니다.
4. 컴포넌트 새로 디자인하기
Q. 진행바가 이렇게 생겼는데 색은 어떻게할까?
아예 컴포넌트 자체를 새로 디자인 하고 싶을때에도 gpt를 활용할 수 있습니다.
저는 진행단계를 나타내는 bar 를 새로 디자인하고싶어서, 원래 디자인했던 것을 보내주고
먼저 색상을 어떻게 바꿀지, 다음으로 각 라벨 디자인은 어떻게 할지 물어봤어요.
Q. 이거 CSS 로 좀 보여줘
사실 이 부분은 텍스트만으로 수정하기 힘들기때문에 css 코드를 받아서 직접 화면에 띄워보면서 마음에 들게 수정하면 더 좋습니다.
꿀팁!
마무리
저는 이렇게 챗 gpt 와 대화하며 디자인 수정을 마무리했습니다!
진짜 디자이너와 함께 작업하는 것처럼 완성도있는 디자인은 아니지만,
그래도 처음보다는 볼만해진것같아요 ..ㅎ
디자인이 어려운 개발자 분들 이 글을 참고해서 원하는 방향으로 잘 리팩토링 하시길 바랍니다 😊
