DAY+45 [ AI와 함께 디자인 프로세스 과정]

안녕하세요, 주-주스 입니다! 🍹

 

 

(◍'ᗜ'◍)

!!!³✺!~ 캠프 45일차  ~!✺!!!

❀⸜(˶´ ˘ `˶)⸝❀

오늘은

 AI 기업사례, 바이블 코딩, 등

AI와 디자인 프로세스/ 디자인 프로세스에서 AI를 활용하는 전체 과정 에 대하여 포스팅하겠습니다!

 

 

---

AI 기업 사례
삼성 생명
https://www.youtube.com/watch?v=Wxrw5sy5_Hk

 

디자이너 김지현
https://heypop.kr/n/66786/

AI로 만드는 또 다른 세계, 디지털 디자이너 김지현

 

랜드로버

https://www.youtube.com/watch?v=-Ny3IW2L2DY

 

cj영화 사례

https://www.youtube.com/watch?v=ONIgeNmXkpQ

 

https://www.researchgate.net/figure/The-Human-AI-co-creation-model_fig2_352937210

 

 

---

 

📘 바이블 코딩(Bible Coding)이란?

바이블 코딩이란, 사용자가 원하는 기능이나 결과를 ‘자연어로 설명’하면
AI가 코드를 자동으로 생성하고, 이를 검증∙수정하면서 완성해 나가는 코딩 방식입니다.

즉, "코드를 직접 쓰기보다 설명으로 짓는" 새로운 코딩 접근 방식입니다.
일종의 설명형 코딩(Describe-to-Code) 흐름입니다.

---

🚀 바이블 코딩 과정

단계설명아이콘 느낌

1️⃣ Describe what you want	하고 싶은 것을 말 그대로 설명합니다.	💬🧑‍💻
2️⃣ AI generating the code	AI가 코드로 변환해 줍니다.	🤖💡
3️⃣ Testing & refining	실행하고 오류를 수정합니다.	🧪🛠
4️⃣ Iterate	다시 설명하고 고치면서 발전시킵니다.	🔄⚙️

---

🧠 왜 ‘바이블’인가요?

• 성경(Bible)이 말(텍스트)만으로 체계와 구조를 전달하듯
  → 설명(Text) = 코드(Code)로 연결되는 방식이라는 의미입니다.
• 즉, “설명문이 곧 설계도이자 소스코드”가 되는 패러다임입니다.

---

💡 바이블 코딩의 장점

장점설명

🗣 쉬운 접근성	전문 개발자가 아니어도 코드 생성 가능
⏱ 높은 개발 속도	문장 → 코드 자동 생성으로 시간 단축
🔄 반복 개선 최적화	잘못된 부분을 말로 바로 수정 가능
🤝 협업 용이	기획자∙디자이너도 코딩 참여 가능

---

✨ 예시

“유저 로그인 화면을 만들고, 이메일과 비밀번호 입력 후 로그인 버튼 누르면 API 요청하도록 해줘”

→ AI가 자동으로 UI 코드 + API 연결 코드 생성

 

• 바이블 코딩은 “자연어로 코드를 생성하는 방식”입니다.
• 설명 → 생성 → 테스트 → 반복 개선으로 진행됩니다.
• 개발 접근성을 크게 높여주는 AI 시대 코딩 패러다임입니다.

---

디자이너와 개발자의 경계의 변화

---

빠른 출시 / 원활한 소통/ 사용자 피드백 환영

 

---

AI를 활용한 디자인 프로세스

---

https://www.youtube.com/watch?v=wv779vmyPVY

 

---

오늘의 실습 !

최종과제
⭐️[과제 01]

• AI 툴을 활용하여 특정 서비스/제품의 와이어프레임(Wireframe)을 제작합니다. 이번 과제는 단순 아이디어 제안 단계에서 더 나아가, 실제 사용자 경험을 고려한 구조적 설계까지 시도하는 것을 목표로 합니다.
• AI를 활용하여 아이디어 발산 및 구체화 경험하기
• 화면 단위의 정보 구조(Information Architecture)와 사용자 흐름(User Flow) 설계하기

수행 방법

1. 주제 선정
   • 본인이 관심 있는 서비스/앱을 선정하거나, 기존 프로젝트를 확장해도 무방합니다.
2. 아이디어 도출 (AI 활용)
   • ChatGPT, Perplexity, Gemini 등 AI를 활용하여 기능 아이디어를 구체화합니다.
   • “사용자가 자주 겪는 문제점 → 해결 방안 → 화면 단위 기능”으로 정리합니다.
3. 와이어프레임 제작
   • AI 이미지/디자인 툴(Figma AI, Uizard, Galileo AI 등)을 활용해 와이어프레임을 생성합니다.
   • 직접 수정·보완하여 최종 와이어프레임을 완성합니다.
4. 최종 제출물
   • (1) 서비스/앱 주제 및 문제 정의
   • (2) AI를 통한 아이디어 발산 과정 캡처/정리
   • (3) 와이어프레임 결과물 (figma 링크)

4. 제출 형식

• 파일 형식: 피그마링크!
  
  https://chatgpt.com/share/691adcde-68d4-800c-b1a1-eb9756853fd5

ChatGPT - AI 와이어프레임 제작 방법

 

 

 

 

---

[45일차 소감❣️]

- ai를 활용하여 디자인 프로세스를 거쳐가서 완성품이 아주 만족스러웠습니다. 물론 이런 활용을 통해서 초안으로 간주하고 사람의 터치가 들어가야 하지만 놀라웠습니다... 여백도 그렇고 엄청 잘 구성되어 좋아보였습니다! 내일도 힘을 내며 으쌰으쌰해보겠습니닷!

= 오늘의 한 마디 =
- AI를 잘 활용하자!