사진 한장 첨부 했을 뿐인데, 디자인 깔끔하게 변경하기!

소개

모르는 것을 배울때는 게임형식으로 배우는 것이 가장 효과적이라 생각하여
어렵게 외워야 하는 것을 퀴즈게임 형식으로 만들어 보고싶었습니다!

진행 방법

  • 활용 도구

GPTs ( UI/UX 빌더 ) - 다이엔님이 제작하신
AI STUDIO

첫 프롬프트 작성 아래와 같이 했습니다.

질문에 예시 가 있어 작성하기가 수월 했습니다.
막상, 무엇을 작성하려고하면 어떤것부터 작성해야 하는지 어려울 때가 있었는데
예시문이 있어 작성이 용이했습니다.

한국어 텍스트가있는 검은 색 화면

2번의 프로픔트 작성후 아래와 같은 결과 물이 나왔습니다.

한국어 텍스트가있는 녹색 화면

원래는 피그마 make 를 사용 해야 하는데.. 바이브 코딩에 빠지면서 급격히 구독을 5개나 늘리는 바람에..
절제가 필요 할 것 같아.. 다이안님이 알려주신 대체가 가능한 AI STUDIO로 하였습니다.
원하는 기능들은 다 나왔는데, 색상이 채팅으로 말해 줄때는 세련 될것 같이 말해줫는데..
결과물은 영 촌스러웠습니다..

그래서, 스터디때 배운것 처럼, 예시 이미지를 첨부 하여 다시 요청 하였습니다. 이미지는 제가 평소에 깔끔 하게 느끼고있는 카카오 페이지를 캡쳐해서 studio 에게 전달했습니다.

< 참고용으로 사용한 이미지 >

한국 웹 사이트의 홈페이지 스크린 샷

결과물은~?

한국어가있는 모바일 앱

짜잔! ㅎㅎ
너무 깔끔하고 제가 생각 했던 컬러감과 이미지로 변경 되었습니다!!

한마디 말보다 , 사진 한장이 훨씬 정확한 커뮤니케이션이라는 것을 다시한번 느꼈습니다~

결과물 링크 첨부해 보아요~
( 지금 퀴즈가 AI 생성 하는데, 추후에는 참여자들도 자신이 퀴즈를 출제 할 수 있는 것도 생각하고 있습니다 )

>>> 결과물

결과와 배운 점

  • 새롭게 느낀점
    말보다 , 한장이 더 중요하다!
    이렇게 깔끔한 디자인이 척척 나오는 것에 깜짝!

  • 나만의 꿀팁
    스터디 열심히 참여해서 잘 따라하기!

  • 과정중 시행착오
    내가 머리속에 생각하는 결과물을 최대한 구체적으로 혹은 샘플 이미지를 첨부해야 한다.

  • 앞으로 계획
    DB 까지 연결해서 실제 사용 할 수 있는 퀴즈를 만들어보고, 재미있는 데이터를 참여하는 사람들한테 보여줄 수 있는 것을 만들어 보고싶습니다~

2
3개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요