50일차까지 강의가 있고, 그 뒤는 프로젝트 기간인데요.
벌써 마지막에서 두번째 챕터인 AI 데이터 분석 파트까지 왔어요..~~
이 부트캠프 생활에 적응되니까 시간이 넘 빠르게 가는..+.+

AI 파트 오늘부터 시작입니다~~

---

생성형 AI(Generative AI)와
프롬프트 엔지니어링(Prompt Engineering)

생성형 AI & LLM이란?

LLM (Large Language Model)
: 인간의 언어를 이해하고 생성할 수 있는 대규모 언어 모델
대표적으로 ChatGPT, Claude, Gemini 등이 있다.

이 모델들은 우리가 입력한 문장을 이해하고,
그에 맞는 맥락 있는 답변을 만들어내는 것이 특징이다.

→ 하지만 “어떻게 질문하느냐”에 따라 결과의 품질이 달라진다.
그래서 등장한 것이 바로 프롬프트 엔지니어링!

---

프롬프트 엔지니어링이란?

프롬프트(Prompt)
: 생성형 AI에게 우리가 원하는 결과물을 얻기 위해 설계하는 명령문
단순히 “그림 그려줘”가 아니라,
“3D 느낌의 반투명 글래스모피즘 스타일로, #6155F5 색상 기반의 메시지 아이콘을 만들어줘”처럼
맥락을 세세하게 전달해야 AI가 ‘정확한’ 결과를 준다.

프롬프트 작성 핵심 포인트

1️⃣ 맥락(Context) 을 충분히 제공하기

시간적, 공간적, 상황적 배경을 포함해야 함
예: “카페 앱의 신규회원 웰컴 화면에 들어갈 일러스트”

2️⃣ 단계별로 나누기

한 번에 너무 많은 요구를 넣지 않기
“로고 → 컬러 → 레이아웃” 식으로 나누면 훨씬 깔끔하게 결과를 얻을 수 있음

3️⃣ 명확하고 구체적으로 작성하기

“귀여운 느낌”보다는 “둥근 형태, 파스텔톤, 부드러운 그림자”처럼 디테일을 주기

4️⃣ AI에게 역할을 부여하기

“너는 UX 디자이너야.” / “너는 브랜딩 전문가야.”
역할을 주면 모델이 답변을 그에 맞게 조정함

####5️⃣ 구분기호, 포맷 활용하기
예) markdown , “-”, “###” 등으로 구조를 명확히 보여주기

---

디자인 보조 AI 도구들

• Stitch: 프롬프트를 기반으로 UI 디자인을 자동 생성. Figma로 바로 연동 가능
• Lovable AI: 감성적인 디자인 자동화 툴. 사용자 중심의 인터페이스 제작 가능
• Land-book.com: 다양한 웹・앱 레이아웃 레퍼런스를 모아둔 디자인 큐레이션 사이트
• Google Design Blog: 최신 디자인 트렌드와 사례 연구를 볼 수 있는 공식 블로그

---

과제

오늘 과제는 배운 툴들을 사용해보는 것+디자인!

1. Gentle Singularity 의미 정리

샘 알트먼의 젠틀 싱귤러리티 블로그를 읽고 정리하는 것이 첫 번째 과제였다.

요약: 우리는 이미 초지능으로 향하는 궤도에 진입했으며, 앞으로 몇 년 안에 인지 노동과 현실 세계에 AI가 침투할 것이다. 이 거대한 변화를 안전하고 공평하게 활용하려면 AI 정렬(Alignment)과 광범위한 분배가 가장 중요하다.

🚀 인공지능 발전의 현주소와 속도

• 사건의 지평선 통과: 이미 GPT-4와 같은 시스템을 통해 인간보다 영리한 디지털 초지능(Superintelligence) 구축 단계에 진입했으며, 가장 어려웠던 과학적 통찰은 이미 확보했다.
• 의외의 전개: 발전 속도는 빠르지만, 아직 로봇이 거리에 가득 차거나 일상생활이 극적으로 변한 것은 아니다.
• 현재의 AI 영향력: ChatGPT는 이미 역사상 가장 강력한 '인간'보다 강력하며, 수억 명의 일상과 중요한 작업에 사용되고 있다.

🗓️ 향후 몇 년간의 예상 변화 (2025년 ~ 2027년)

• 2025년: 실제 인지 작업(Cognitive work)을 할 수 있는 AI 에이전트의 등장으로 코딩 작업이 영원히 바뀔 것이다.
• 2026년: 새로운 통찰력을 스스로 알아내는 시스템이 등장할 것으로 예상된다.
• 2027년: 현실 세계에서 작업을 수행하는 로봇이 등장할 수 있다.

💡 과학 및 생산성 혁신

• 생산성 증폭: AI는 과학 발전을 가속화하고 인간의 생산성을 엄청나게 높여 삶의 질을 향상시킬 것이다.
• 연구 속도의 가속: AI를 사용해 더 빠른 AI 연구가 가능해지면서, 10년치 연구가 1년 또는 한 달 만에 끝나는 '재귀적 자기 개선'의 초기 형태가 나타나고 있다.
• 궁극적 변화 (2030년대): 지능과 에너지(아이디어와 실현 능력)가 엄청나게 풍부해져 인류 발전의 근본적인 한계가 사라질 것이다.

🌍 사회적 변화와 적응

• 능력 증가, 기대 증가: 2030년에는 한 사람의 업무량이 2020년 대비 크게 증가할 것이며, 개인은 빠르게 새로운 도구에 적응하고 더 좋은 것을 얻게 될 것이다.
• 직업과 정책: 일부 직업군이 사라지는 어려움이 있겠지만, 세상이 빠르게 부유해지면서 새로운 사회 정책 (예: 새로운 사회 계약)을 진지하게 논의할 수 있게 될 것이다.
• 인간의 역할: 사람들은 여전히 가족을 사랑하고 창의성을 발휘하는 등 근본적인 삶은 유지되지만, AI를 통해 더 많은 사람들이 소프트웨어와 예술 작품을 창조할 수 있게 될 것이다.

⚠️ 도전 과제와 해결 방안 (가장 중요)

• 안전 및 정렬 문제 해결: AI가 장기적으로 인류가 집합적으로 진정으로 원하는 것을 배우고 그 방향으로 행동하도록 '정렬(Alignment)'하는 문제를 해결해야 한다.
  (소셜 미디어 알고리즘은 단기 선호도에만 정렬된 '미스얼라인먼트'의 예시이다.)
• 초지능의 분배: 초지능을 저렴하고, 널리 사용 가능하며, 특정 개인/회사/국가에 집중되지 않도록 분배하는 것이 매우 중요하다.
• 궁극적 목표: OpenAI는 '세계를 위한 뇌'를 구축하는 것을 목표로 하며, 기술 발전의 궁극적인 한계는 이제 "좋은 아이디어"의 유무가 될 것이다.

---

느낀 점
이제 인공지능은 이미 인간의 수준을 뛰어넘었고, 사용하지 않는 것이 비효율적이다. 따라서 이렇게 변화하는 기술 트렌드에 맞추어 이 기술을 받아들이고 사용해야 한다. 예술의 영역과 개발영역에서 큰 성과를 보여주고 있기 때문에, 나는 앞으로 프로덕트 디자이너로써 이를 배우고 잘 활용해야 할 것이다.

---

2. 디자인 기획서 LLM으로 작성해보기

수업시간에 배운 프롬프트 작성법을 활용하였다.

디자인 기획서를 작성하려고 해.
데스크탑용 어플리케이션이야. (초기개발: MAC용)
이후 IOS 모바일용으로도 확장할건데, 이내용은 기획서에 간단하게만 남겨줘.
IOS 디자인 가이드에 따라서 작성해봐(적응형디자인)
어플은 대쉬보드야. F1 선수의 다양한 데이터를 분석할거야.
내가 생각한건 최근 레이스 순위, 드라이버 챔피언쉽 순위 등인데, 너가 필요한 데이터들을 더 생각해서 추가해줬으면 좋겠어.
타겟사용자는 F1팬, F1 관련 정보 소셜 미디어 운영자야.
분위기는 신뢰감있고 세련된 느낌으로 부탁해. 스타일은 글래스모피즘으로 할거야.
키 컬러는 #E10600 , 기본 바탕은 블랙으로 해줘.
가능하다면 클라이언트들이 이해할 수 있게 간단한 어플 사진을 제작해줘.

그리고 그록을 통해서 기획서를 제작하였다.

제작 결과:

F1 데이터 분석 대시보드 디자인 기획서

1. 프로젝트 개요

프로젝트 이름: F1 Analytics Dashboard

플랫폼: 초기 개발은 Mac 데스크탑용 애플리케이션으로 진행. (macOS Catalyst 또는 SwiftUI 기반)

목적: F1 선수 및 레이스 데이터를 실시간으로 분석하고 시각화하여 팬과 소셜 미디어 운영자들이 한눈에 파악할 수 있는 대시보드를 제공. 데이터 중심의 신뢰성 있는 인터페이스를 통해 사용자에게 전문적인 인사이트를 전달.

테마: 신뢰감 있고 세련된 분위기. 데이터의 정확성을 강조하며, 어두운 배경에 밝은 액센트로 현대적이고 고급스러운 느낌을 줌.

개발 프레임워크: SwiftUI를 활용하여 적응형 디자인 구현. iOS HIG를 준수하여 Mac과 iOS 간 호환성을 고려.

2. 타겟 사용자 및 목표

타겟 사용자

• F1 팬: 레이스 결과를 빠르게 확인하고 즐기고자 하는 일반 사용자
• F1 관련 정보 소셜 미디어 운영자: 실시간 데이터로 콘텐츠를 생성하고 공유하는 운영자 (예: X, Instagram 등 F1 팬 페이지 관리자)

목표

• 사용자에게 직관적이고 신뢰할 수 있는 데이터 시각화를 제공하여 F1 경험을 향상
• Mac의 넓은 화면에 맞춘 다중 패널 구성 및 모바일 확장 고려
• 실시간 데이터 업데이트로 신뢰성 확보 (예: Ergast F1 API 등)

3. 주요 기능 및 데이터 요소

대시보드는 여러 위젯과 차트로 구성되어, 사용자가 커스터마이징할 수 있습니다.
기본 데이터는 최근 레이스 순위와 드라이버 챔피언십 순위를 포함하며, 실시간 업데이트를 지원합니다.

핵심 데이터 요소

• 최근 레이스 순위: 최근 5개 레이스 결과 (드라이버 순위, 랩 타임, 피트 스톱 수)
• 드라이버 챔피언십 순위: 시즌 포인트 순위 + 포인트 추이 그래프
• 컨스트럭터 챔피언십 순위: 팀별 포인트 및 드라이버 기여도
• 드라이버 프로필: 나이, 팀, 우승 횟수, 퀄리파잉/레이스 성적 비교
• 랩 타임 및 섹터 분석: 히트맵 및 타이어 컴파운드별 성능 비교
• 피트 스톱 및 전략 데이터: 피트 스톱 시간, 전략 분석
• 역사적 비교: 과거 챔피언 데이터 비교
• 실시간 라이브 데이터: DRS 사용 통계, 실시간 포지션 변화

주요 기능

• 위젯 커스터마이징 (드래그 앤 드롭)
• 필터링 (드라이버 / 팀 / 시즌별)
• 주요 이벤트 알림 (레이스 시작 등)
• 데이터 내보내기 (PDF, CSV 등)

4. UI/UX 디자인 원칙

iOS HIG 기반 적응형 디자인 적용
Mac에선 다중 컬럼, iOS에선 간결한 네비게이션으로 전환

레이아웃

• Mac: 사이드바 + 메인 대시보드 + 디테일 패널
• 자동 컬럼 조정 및 Safe Area 대응

네비게이션

• Tab Bar / Sidebar 구조

인터랙션

• 호버 시 데이터 툴팁 표시 (글래스모피즘 스타일)

접근성

• VoiceOver, 고대비 모드, 키보드 네비게이션 지원

UX 흐름

• 온보딩 → 메인 대시보드 → 상세 뷰

5. 스타일 가이드

• 분위기: 신뢰감 있고 세련된 느낌.
• 스타일: 글래스모피즘 (블랙 배경, 블러 카드)
• 컬러 팔레트
  키 컬러: #E10600
  배경: #000000
• 텍스트: #FFFFFF / #A0A0A0
• 카드 배경: #1C1C1E
• 타이포그래피: San Francisco (헤더 Bold 24pt, 본문 16pt)
• 아이콘: SF Symbols, #E10600 tint
• 애니메이션: 0.3s ease-in-out

6. 미래 확장 계획

Catalyst 기반 iOS/iPadOS 버전 확장
iPhone에서는 탭 바 중심의 인터페이스
iPad에서는 Split View 활용
제스처 중심 UX 적용

7. 시각화 예시 (모의 이미지)

블랙 배경 + 글래스모피즘 스타일의 F1 대시보드
최근 레이스 순위와 드라이버 챔피언십 시각화
데이터 중심적이며, F1의 역동성과 속도를 느낄 수 있는 디자인

---

3. Stitch 활용해보기

2번의 디자인 기획서를 바탕으로 프롬프트를 작성하였다.

레이아웃은 잘 나왔지만 색상이나 스타일 요구사항은 잘 되지 않았다.
그치만 피그마로 가져올 수 있다는 점이 꽤나 큰 장점이라, 레이아웃으로도 만족스러운 ㅎ_ㅎ

---

4. 쿠폰 사용 UI Design

과제목표:
누군가 쿠폰을 사용하려는 상황을 상상해보세요. 이것은 오프라인 매장의 셀프 체크아웃 화면일 수도 있고, 웹사이트의 결제 페이지일 수도 있습니다. 쿠폰에는 할인율, 소계, 총액, 그리고 그 외의 고유한 조건들이 있을 수 있죠. 무엇보다 중요한 것은 사용 과정을 최대한 간단하게 만드는 것입니다. 사람들은 쿠폰을 사용할 때 복잡한 인터페이스로 인해 불편함을 느끼고 싶어하지 않습니다. 쿠폰 적용 과정에 불필요한 단계나 마찰이 생기지 않도록 디자인하는 것이 중요합니다.

---

1️⃣ 레퍼런스 모으기

핀터레스트&지그재그 어플에서 캡쳐

2️⃣ 레퍼런스 분석

3️⃣ 화면 제작 및 프로토타입

이전 장바구니 ui 과제의 결제>쿠폰 화면을 제작하였다.

프로토타입 보러가깅><

호버/선택 시 디자인 베리언트

---

회고

데이터를 다루는 시대를 지나, 이제는 AI와 협업하는 시대로 넘어가고 있다.
이제는 누구나 쉽게 AI를 이용하지만, 결과의 퀄리티는 프롬프트에 따라 천차만별이다!
효과적인 프롬프트 작성법을 배우고, AI와 함께 앞으로 나아가는 것이 중요한 역량이 될 것이다.

#AI를 잘 이해하고 활용하자!