(DAY41) 프롬프트 엔지니어링, 구글 Stitch AI 사용 후기

 

안녕하세요 :) 오늘은 AI와 LLM, 생성형 AI 프롬프트에 대해 공부했습니다.

예전 챕터에서 다양한 AI를 써보는 시간을 가졌었는데요, 오늘은 그때 했던 내용을 복기하는 시간 + Stitch AI를 써서 프로토타입을 뽑아보는 시간을 가져봤습니다.

 

 

 

✏️오늘의 학습

샘 올트먼 블로그 The Gentle Singularity 읽고 요약하기

Stitch AI 써보기

쿠폰 UI 그리기 미션

 

 

📖오늘의 핵심

의사소통이 전부다.

everything!

 

의사소통을 잘하면 권력을 갖는데 도움이 된다.

권력이란 사회 집단에서 존경, 존중을 받는 것

 

 

 

📝 수업 내용 메모장 👇🏻

📝 수업 내용 메모장

 

 LLM, 프롬프트

 

온화한 특이점 The Gentle Singularity

 

 

 

 

샘 올트먼 블로그

https://blog.samaltman.com/

Sam Altman

 

 

 

 

 

Stitch AI 써보기

 구글에서 나온 모바일 앱/웹 프로토타입 제작 전용 생성형 AI

https://stitch.withgoogle.com/

Stitch - Design with AI

 

 

 

 

(실험모드) music streaming app 뽑아보기

(일반모드) Copy to Figma 가능

 

랜드북 : 웹사이트 레퍼런스 디자인 영감 사이트

https://land-book.com/

Landbook - website design inspiration gallery

 

 

 

구글 디자인 블로그

https://design.google/

Google Design - Discover the people and stories behind the products

 

 

 

KRDS 디자인시스템 (피그마 파일)

https://www.figma.com/design/HxjsbR0R1BrzUY539aUfTu/KRDS_v1.0.0--Community-?node-id=2499-33230&p=f&t=rvYJytmTCHwb0tGa-0

 

 

 

 

 

실습 1) The Gentle Singularity 글 읽고 정리하기

 

온화한 특이점 핵심 논점

• AI 발전은 이미 현실이 됐고, 되돌릴 수 없다.
• 다가오는 시대의 핵심은 ‘지능’과 ‘에너지의 풍요’이다. → 인간의 생산성과 창의성의 한계를 근본적으로 재정의한다.
• 앞으로 가장 중요한 과제는 AI를 인간의 가치에 맞게 조율해서 사용하고, 특정 세력이 독점하지 않도록 해야 한다.

💡 인사이트

• AI는 앞으로 ‘도구’가 아니라 함께 가는 ‘동반자’로서 활용해야 한다.
• 사용자와 AI가 같은 목적을 향해 나아가도록 경험을 설계해야 한다.
• 지능이 풍요로워질수록 ‘아이디어의 품질’이 중요해진다. → ‘어떻게 사람에게 의미 있게 만들까?’를 고민해야 한다.

 

 

 

실습 2) Stitch AI 써보기

 

01. 챗GPT로 디자인기획서 뽑기 👇🏻

01) 디자인 기획서 Chat gpt로 작성해보기

• 수업시간 내용 배운 프롬프트 활용했습니다.

🗣 작성한 프롬프트

모바일 교육앱을 디자인할거야. 타겟은 10대~20대 코로나 세대이고, 듀오링고처럼 매일매일 가볍게 학습할 수 있는 문해력 향상과 의사소통능력 향상이 목표야. 키컬러는 A78BFA, 창의적이고 신뢰감있고 센스있는 느낌으로 iOS 디자인 가이드에 따라서 디자인 기획서를 작성해줘. #형식

1. 아이디어 제목 (한문장)
2. 문제점 설명(2~3문장)
3. 해결방안 (bullet point 3개)
4. 예상 효과 (100자 이내) #제약조건 -iOS 디자인 시스템 가이드를 따르되, 핵심만 담아서 읽기 쉬운 문단으로 정리한다.

---

챗GPT 결과

1. 아이디어 제목

매일 5분, 문해력과 소통력을 키우는 감각적인 학습 앱 “링크(LINK)”

“매일 5분, 나의 언어감각을 연결하다”

 

2. 문제점 설명

• 코로나 세대를 중심으로 한 10~20대는 비대면 학습과 온라인 커뮤니케이션 중심의 환경 속에서 자발적 표현력과 문해력이 약화되었다.
• 기존 교육앱들은 딱딱한 인터페이스와 지속 동기 부여 부족으로 꾸준한 학습 습관을 만들기 어렵다.
• 학습이 “재미있고 일상적인 루틴”이 되기 위해선 감각적인 UX와 짧고 명확한 보상 구조가 필요하다.

3. 해결방안

핵심 UX 컨셉 : “가볍지만 의미 있는 연결” → 하루 5분의 짧은 학습이 나의 언어 감각을 꾸준히 성장시키는 경험을 제공

① 마이크로 러닝 구조 (Micro Learning)

• 한 세션은 3~5분 이내, 5문항 이하 구성
• 텍스트 기반 퀴즈, 대화 완성, 공감형 리액션 선택 등으로 몰입 유도
• 매일 접속 시 iOS 스타일 Progress Ring으로 성장 시각화

디자인 가이드 적용

• Navigation 구조: Tab Bar (Home / 학습 / 리포트 / 마이)
• Layout: Safe Area 준수, Auto Layout 기반 반응형 구조
• 모션: Core Animation 기반으로 결과 화면에서 부드러운 Fade-in 효과

---

② 감정·상황 기반 학습 콘텐츠

• “친구에게 위로하기”, “선생님께 의견 전달하기” 등 생활 밀착형 주제 중심
• 각 상황별 톤앤매너 학습으로 상황적 문해력과 표현력을 강화
• 문장 선택형 대화 + 즉시 피드백(문장 추천, 어감 비교 등)

디자인 가이드 적용

• Typography:
  • Title: SF Pro Display Bold 28pt
  • Body: SF Pro Text Regular 17pt
  • Caption: SF Pro Text Medium 13pt
• Color System:
  • 키컬러: #A78BFA (Primary)
  • 보조컬러: #F4F1FE (Background), #3C3C43 (Text)
• Icons: SF Symbols 사용 (“chat.bubble”, “sparkles”, “book”)

---

③ 지속 동기부여 UX

• 연속 학습 시 iOS 스타일 배지 & 리워드 애니메이션 제공
• “오늘의 표현” 푸시 알림으로 자연스러운 학습 루틴 형성
• 프로필 카드에 학습 성향 태그(예: “공감형”, “논리형”) 표시

디자인 가이드 적용

• Component Style: Rounded Rectangle(24pt radius) / Soft Shadow(Opacity 10%)
• Interaction: Haptic Feedback(Impact Light)으로 클릭 반응 제공
• Accessibility: Dynamic Type, VoiceOver 대응

 

 

4. 예상 효과

사용자는 짧은 학습 루틴을 통해 자연스럽게 표현력과 문해력이 향상되고, 매일의 학습 경험이 생활 속 습관으로 자리 잡는다.

 

 

5. 시각적 톤앤매너 요약

키컬러	#A78BFA (창의적·신뢰감 있는 라벤더 톤)
보조컬러	#F4F1FE (밝은 배경), #3C3C43 (텍스트), #FFFFFF (카드 배경)
폰트	San Francisco (Display + Text 조합)
모션	자연스러운 이징(Ease In-Out), 0.3~0.5s 전환
아이콘 스타일	SF Symbols, 일관된 선형(Outline) 스타일
UI 구성요소	Rounded Card, Soft Gradient, Fluid Navigation
브랜드 감성 키워드	창의적 · 센스있는 · 신뢰감 있는 · 가볍게 즐기는

 

 

02. 뽑은 디자인기획서를 영어로 Stitch AI에 넣기

 

실습 결과물

 

💡 AI 쓰는 과제를 받으면 너무 재밌다

글로 쓴 결과가 시각적으로 똭! 나오는데 내가 상상했던 결과물과 비교해보는 과정이 즐거운 것 같다. 아직은 내가 상상한 화면디자인과는 다르게 나오는걸 보니, 인간의 멘탈모델에 대한 학습이 더 필요할 것 같다는 생각이 들었다. (물론 빠른 시일 내에 인간의 상상력을 따라잡을 수 있고, 그 이상으로 뛰어넘을수도 있다.)

 

 

 

실습 3) 쿠폰 UI 그리기 미션

 

실습 결과물

 

 

 💡투썸플레이스 화면을 참고해서 디자인했다.

사실 투썸하트 적립을 한 번도 해본 적이 없어서 쿠폰함이 비어있었지만, 메가커피는 자주 사먹기 때문에 메가커피 쿠폰과 카카오톡 선물하기를 참고하면서 상상해서 만들었다. 실제 투썸쿠폰이 저런 플로우를 갖는지는 잘 모른다..ㅎ

 

UI 그리기 미션을 수행할 때, 확실히 그냥 UI 컴포넌트만 그리는 것보다는 이렇게 오늘처럼 사용할 때를 상상해서 화면플로우를 전반적으로 디자인해보는 과정을 겪는 것이 더 공부에 도움이 되는 것 같다.

 

너무 완벽한 클론에 집착하지 말고, 플로우 위주로 빠르게 작업하고 공부해야겠다. (늘 다짐은 한다만...)