그라디언트부터 Chat gpt 그리고 UI design ai stitch 활용까지

 

안녕하세요! 새싹청년취업사관학교 9일차 강의 요약내용으로 돌아왔습니다. 이번 UI디자인 실습의 주제는 바로 '음악 감상 앱'이었는데요, 다들 아시는 Apple Music이나 Spotify 같은 서비스들을 참고해서 디자인을 만들어보는 시간을 가졌답니다. 그리고 Stitch AI도 활용하여 UI디자인 작업을 했어요. 저도 처음에는 막막했지만, 하나씩 만들어가면서 깨닫는 점이 정말 많았어요.

 

🎼 음악 앱, 비주얼 감성이 핵심! 그라디언트 팔레트 구성하기

음악 앱은 사실 기능도 중요하지만, 사용자에게 시각적인 감성과 분위기를 전달하는 게 정말 중요하잖아요. 그래서 이번 실습에서는 버튼과 배경에 들어갈 그라디언트 색상 팔레트도 함께 구성해봤어요. Spotify의 다크 그린이나 Apple Music의 화이트+핑크 조합처럼, 앱의 아이덴티티를 살리는 색상이 필요했죠.

Purple to Blue, Orange to Pink 같은 부드러운 이징(easing) 그라디언트를 적용해보니 앱이 훨씬 생동감 있고 매력적으로 느껴지더라고요. 저는 주로 UI Gradient 사이트를 참고했고, 여러 색조합을 Moodboard에 직접 적용해보면서 어떤 색이 가장 앱의 분위기에 잘 맞을지 고민하는 시간을 가졌어요. 생각보다 시간을 많이 할애해야 하는 부분이더라고요!

📱 최신 iOS 디자인 가이드에 딱 맞추기!

프로토타입을 만들 때는 Apple Human Interface Guidelines을 꼼꼼히 참고했어요. 최신 iOS 앱의 버튼 크기, 폰트 사이즈, 여백, 인터랙션 위치 등 세세한 부분까지 반영하려고 노력했답니다.(375*812) 특히 버튼은 텍스트 내용에 맞게 자연스럽게 크기가 조절되는 Hug contents 기능을 활용했는데, 이게 정말 편리하고 디자인 일관성을 유지하는 데 큰 도움이 되더라고요! 

🤖 AI 도구, 디자인 실습에도 활용해봤어요!

이번 실습에서 ChatGPT를 활용해서 디자인 보조를 받은 것도 신선한 경험이었어요. 물론 완전히 배경지식 없이 시작하면 어렵지만, 레퍼런스를 먼저 정하고 자연어로 요청하는 방식이 꽤 유용하다는 걸 알게 됐죠!

예를 들어, "애플 뮤직 스타일의 음악 감상 앱 하단 플레이어 UI를 디자인하려고 합니다. Stitch 프롬프트를 추천해주세요."라고 요청하면,  바로 사용할 수 있는 프롬프트를 뚝딱 만들어주더라고요. 완전 신기했어요! 아직은 사람의 검증이 꼭 필요하지만, 아이디어를 발화시키고 초기 방향성을 잡는 데는 정말 좋은 도구 같아요.

Stitch AI 🧪 (링크 들어가서 활용해보세요.)

디자인 자동화 도구인 Stitch AI는 간단한 설명이나 앱 목적만 입력하면 자동으로 와이어프레임 및 초기 디자인 시안을 생성해준다고 합니다! 물론 아직까지는 정교한 수정이 필요하지만, 아이디어가 떠오르지 않을 때 아이디어 발화용으로는 충분히 유용할 것 같다는 생각이 들었습니다. 미래에는 이런 AI 도구들이 디자이너의 작업 방식을 정말 많이 바꿀 것 같지 않나요?

https://stitch.withgoogle.com/

Stitch - Design with AI

 

✨ 오늘의 배움 요약 📝

이번 프로토타이핑 실습을 통해 정말 많은 것을 배웠는데요, 핵심 내용을 다시 한번 정리해봤어요!

1. 그라디언트: 음악 앱의 감성을 살리는 색상 팔레트 구성이 얼마나 중요한지, 그리고 무드보드의 유용성을 알게 됐습니다.
2. iOS 가이드: 최신 iOS 디자인 가이드라인을 따라 레이아웃, 버튼, 폰트 등을 활용하는 방법을 익혔어요. 이게 은근히 중요하더라고요!
3. ChatGPT 활용: 자연어 프롬프트를 통해 비주얼 자료를 생성하고 정리하는 AI 도구의 가능성을 엿봤어요. 완전 신세계!
4. Stitch AI: 빠른 시안 생성용 도구로서의 잠재력을 확인했고, 미래 디자인 프로세스에 대한 기대가 커졌습니다.

정말 유익한 시간이었고, 앞으로도 이런 실습들을 통해 더 많이 배우고 성장하고 싶어요!

💡

앱 프로토타이핑 핵심 요약!

핵심 감성: 그라디언트 팔레트로 앱의 분위기 확 살리기! Moodboard 활용

디자인 기준: 최신 iOS HIG 준수 (버튼, 폰트, 여백 등). Hug contents로 효율적인 UI 구성.

AI 활용법:

자연어 프롬프트 (ChatGPT) → 이미지/시안 (Midjourney, Galileo AI)

배운 점: 아이디어 구체화부터 시각화, AI 도구의 잠재력까지 경험한 알찬 실습!

새싹청년취업사관학교 DAY9, 프로토타이핑 여정의 시작! 🚀

 

자주 묻는 질문 ❓

Q: 프로토타이핑 실습에서 가장 중요하다고 느낀 점은 무엇인가요?

A: 개인적으로 아이디어를 단순히 생각하는 것을 넘어, 실제 사용자 흐름과 UI/UX를 직접 연결해 보는 과정이 가장 중요하다고 느꼈어요. 머릿속 아이디어를 구체적인 형태로 만들어내는 과정이잖아요!

 

Q: AI 도구를 디자인 실습에 활용하는 것이 정말 도움이 되나요?

A: 네, 정말 도움이 돼요! 완전히 백지상태에서 시작하는 것보다는, 어느 정도 레퍼런스를 정하고 AI에게 구체적인 요청을 하면 초기 시안이나 아이디어 발화에 큰 도움을 받을 수 있어요. 시간을 절약하고 다양한 시도를 해볼 수 있죠.

 

오늘 내용은 저처럼 디자인에 관심 있는 분들이라면 이번 경험이 정말 값진 배움이 될 거라고 생각해요. 혹시 더 궁금한 점이 있다면 언제든지 댓글로 물어봐주세요~ 😊 함께 성장해서 취뽀합시다!