클로드 아티팩트로 제작하는 슬라이드, 더 예쁘게 만들어보자!!!

배경 및 목적

사이드로 제작 중인 웹 서비스에 관해 급하게 소개 문서를 작성할 일이 생겨버렸습니다 😂

급하게!

IR 자료까지는 아니더라도 아무튼 제법 생소한 문서를 작성해야하고 더불어 장표 퀄리티도 챙겨야하는, 어찌보면 스터디를 할 수 있는 환경이 강제로 만들어졌죠.

(근데 결국 노션으로 작성하게 됐다는 사실)

참고 자료

아티팩트로 시각화 제작 원조이신 승우님의 프롬프트..!

활용 툴

  • Claude 3.5 sonnet 아티팩트

실행 과정

1. 클로드로 문서 개요 작성

  • 기존에 제작해두었던 로드맵 파일

  • 시장 조사 분석 및 솔루션 구체화 자료

  • 업데이트 되지 않은 기타 정보 추가

  • 참고용 아웃풋 형식 + 설명

부대찌개를 끓이는 것 마냥, 갖고있는 정보들을 와르르 집어넣고서 이 프로덕트를 소개하는 문서 개요를 만들어야한다고 합니다.

당연히 집어넣은 자료가 잘 정리된 것이 아니었어서 약간의 조정은 필요했어요.
하지만 전체적인 골자를 빠르게 잡았다는 점에서 아주 만족!

(보안 이슈로 이미지 삭제)

내용의 만족도는 60% 정도..? 일단 급하니 디테일한건 나중에 수정하자 생각하고 넘어갑니다.

아, 개요로 만든 이유는..지난번 용화님 사례에서 마인드맵을 가져가신걸 보고서 깨달은거였어요.
정보의 위계를 맞춰서 주면 (당연하지만) 타이틀, 서브타이틀, 본문 등등 잘 구분하는 것 같아요.

2. 슬라이드 제작

1차 시도. 같은 채팅에서 슬라이드를 제작해봅니다.

(보안 이슈로 이미지 삭제)

앞에서 요약된 형식의 텍스트를 계속 만들어라해서 그런지 영 시원찮습니다.

빠르게 손절하고 다른 채팅을 열었습니다.

한국어 앱 스크린샷

새 채팅에서 다시금 들어갈 내용을 조금 손봤어요.
저렇게 말하면 알아서 해준다니 진짜 너무 짱편하다;;

그 뒤 저는 27개의 슬라이드를 제작했습니다.

컴퓨터 화면에 표시된 항목 목록의 스크린샷

새 채팅에서는 하나씩 만들어가자고 했어요.

(보안 이슈로 이미지 삭제)

이놈의 네모네모를 놓지 못하더라구요.

그래서 있어보이는 템플릿을 어디서 줏어온 다음 참고하라했죠.

첨부 자료를 똑같이 따라하지 말라했는데 아무래도 그냥 참고도 안한 것 같아요.

(보안 이슈로 이미지 삭제)

결국 도자기 깨트리는 장인같은 소리를 하고서야 쩌는 변화를 보여줍니다.

텍스트가있는 검은 색 화면

(보안 이슈로 이미지 삭제)

검은 배경에 한국어 텍스트

(보안 이슈로 이미지 삭제)

(보안 이슈로 이미지 삭제)

..

(보안 이슈로 이미지 삭제)

지난한 과정을 어떻게 보여드려야할지 고민이 많았네요ㅠ
우선 제가 만족하는 포멧이 나올 때까지 몇차례 피드백을 주고받은 후, 지금까지 내용을 정리하라했습니다.

아쉽게도 범용적으로 사용할 수 있지는 않아요. 나중에 수정하려구요!

그리고 쭉쭉..뽑아낸 결과물 중 하나!

(보안 이슈로 이미지 삭제)

결과 및 인사이트

  1. 웹디자인에서 사용하는 명칭 활용하면 이해를 더 잘 한다.

    흰색 텍스트가있는 검은 색 배경
  2. 화면 레이아웃을 고정값으로 지정해보자.

    1. 별 지시가 없다면, 반응형으로 화면을 만들어버리기에 구성요소의 크기가 들쭉날쭉 해져서 맘에 안들더라구용

  3. 클로드 답변으로 반환됐던 디자인 지침 중 마음에 드는 것들을 긁어와서 따로! 반영해달라고 요구하기!!

13
6개의 답글

👉 이 게시글도 읽어보세요