소개
안녕하세요. 저는 지피터스를 운영하고 있는 닿입니다!
스타트업 특성 상 한 사람이 이것저것 많은 일을 해야하다보니 정말 AI의 도움이 필수적이네요 😂 (그래도 AI 관련 회사라 AI 툴은 유료지원 해주셔서 맘껏 AI 쓰면서 일하고 있어요! 💪)
이번에 AI스터디 16기 사전판매 준비를 하면서 기간별 상품별 할인율을 나타내주는 도식화가 필요했어요.
AI스터디 16기 단일 수강권과 연간 멤버십을 함께 구매 가능하도록 하고 + 사전판매, 얼리버드 등 기간에 따른 할인율까지 달라지다 보니 그냥 텍스트로만 적어서는 안되겠더라고요.
참고로 저는 디자인은 1도 모르는 사람이라, 간혹 도식화가 필요한 경우에는 미리캔버스나 캔바 등을 사용하고 있었어요.
근데 적당한 템플릿을 고르는 것도 정말 어렵고, 내가 원하는 정보를 어떻게 더 가독성 높이게 표현, 배치할 것인지- 이런 부분은 결국 제 몫이었어요.
진행 방법
어제 누리님하고 얘기하다가 클로드에게 'SVG로 만들어줘' 라고 하면, 그걸 저장해서 피그마에서 직접 수정이 가능하다는 걸 알게됐어요.
사실 클로드 아티팩트 기능으로 야금야금 시각화를 하긴 했는데요,
이미지 파일로 저장을 못해서 아티팩트로 만들어준 디자인 화면캡쳐해서 저장하는 문제
특정 부분만 딱 고치면 되는데 or 딱 이거 텍스트만 바꾸면 되는데 - 등의 상황에서 직접 수정을 못하는 문제
그리고 다음 번에 비슷한 도식화를 그릴 때 재활용하기 어려운 문제
이런 불편함들이 있었어요. 그러다 SVG 를 활용하면 그 모든 문제를 해결할 수 있겠다! 생각했습니다!
세부 진행 방법
클로드에게 레퍼런스 이미지 주면서 SVG로 도식화 해달라고 하기
이것저것 다양한 변형을 달라고 하기 (최대한 쓸만한 요소들을 확보하기 위함)
svg로 저장한 후 피그마로 옮기고, 약간의 리터치
모바일버전으로 구조 재배치 요청 후 피그마에서 약간의 리터치
먼저 레퍼런스로 삼을 이미지를 찾아서 줬습니다.
2번째 스타일로 첫 번째 표를 그려줘. 꼭 표는 아니어도 되는데 기간이 명확하게 드러나고, 할인율이 명확하게 드러나면 돼. svg 형태로 그려주고 예뻐야 해 매우
정말 스타일만 베껴줍니다. 표 형태가 아니어도 된다고 했는데 곧이 곧대로 표로 만들어줍니다. 그래서 이번에는 '디자인 레이아웃'을 참고하도록 새로운 레퍼런스 이미지를 줬습니다.
이 디자인 레이아웃을 참고해줘
이번에는 너무 많이 참고한 나머지, 왼쪽에 상품만 있는 게 아니라 각 기간 별 포함되는 혜택을 맘대로 만들어줍니다. 그래서 없는 내용을 만들지 말라고 다시 요청합니다.
디자인 스타일만 참고하고 내용은 내가 준 표내용을 넣어줘. 없는 내용을 만들지 마.
점점 산으로 갑니다. 제가 요구하고자 하는 바가 명확하면 레퍼런 스를 주면서, 이 레퍼런스에서는 이걸 참고하고, 저 레퍼런스에서는 저걸 참고해줘- 라고 해줬을텐데, 저도 디자인 알못이라....
차라리 클로드의 디자인 감각을 믿어보기로 합니다. 어차피 이정도 대화했으면 제가 뭘 원하는지 대강은 알아줬을거라고 기대하면서요.
아예 새롭게 너가 디자인 해봐줄래??
여기서 감탄 한 번 합니다. 역시 클로드는 다 잘해.. 이제 큰 틀은 잡혔으니, 세부적인 조정을 입으로만 날로 먹어보려고 합니다.
연간멤버십과 AI스터디 16기가 나란히 비교되도록 해줘
각 세로로 된 블록 안에 멤버십과 16기가 동일한 위상으로 보여지게 해줘
그리고 맨 위 제목과 맨 아래 버튼과 문의는 빼줘
음...? 갑자기 색깔이 안 예뻐졌고, 왼쪽에 상품명 레이아웃이 우측 카드 내부의 상품가격 위치랑 수평이 맞지 않는 문제가 발생했습니다.
그래도 요청한 대로 'AI스터디 16기'와 '연간 멤버십'이 동일한 위상으로, 동일한 크기로 그려줬습니다. 카드 내부 디자인은 유지한 채, 앞선 버전의 디자인을 접목시키고 싶었어요.
v1에서 그대로 유지하고 v2의 카드 내부 디자인(사진참고)만 참고하는 형태로 바꿔줘
제가 요구한 사항들은 잘 반영해줬는데, 기존의 것들을 다시 뒤엎어버리는 클로드씨..
여기서 아이디어를 얻었습니다.
아 차라리 여러 버전을 만들어달라고 한 다음에 피그마로 다 가져가서, 내가 직접 요리조리 배치하면 되겠구나! 💡
자 이제 svg로 다운받고 피그마로 가져옵니다. 그리고 누리님의 피드백을 받아 약간의 가독성을 높이기 위해 피그마에서 조금씩 바꿔나갑니다. 물론 저는 피그마를 잘 쓸줄 모르기 때문에 그냥 PPT 작업하듯 했어요.. (그룹 같은 거 1도 없음..)
자 그럴싸하죠??? 이제 이걸 랜딩페이지에 넣었더니 아니 글쎄 또 모바일에서는 코딱지 만한거에요?
다시 클로드한테 물어봅니다.
그럴듯 하게 나왔지만 수정하고 싶은 부분들이 많았어요. 이걸 클로드에게 안시키고 그냥 그대로 다시 피그마에 가져와서 작업을 했습니다. 데스크탑 버전과 동일한 색상을 사용하고, 간격을 조정하는 정도만 바꿨어요!
결과와 배운 점
클로드에게 리액트로 그려달라고 할 때 : 실제 '작동되어야 하는' 경우에 쓰는 게 적합
ex) 다음 페이지로 클릭되어 넘어간다거나, 버튼 눌러서 모달이 뜨는 앱 기획이라던가
클로드에게 svg로 그려달라고 할 때 : 도식화 등 디자인 작업물을 만들 때 적합
그리고 이 svg를 피그마로 가져가서 약간 수정하여 쓰기!
진짜 디자인 1도 못하는 사람이 미리캔버스, 캔바 탈출하고 클로드 덕분에 디자인 했습니다!
(근 데 그냥 디자이너가 오면 좋겠다... 읍읍)
끗
(태그 달고 싶은데 마땅한 게 없어서 클로드 기초 사용에 속하니 LLM 뽀개기로 달아보겠습니다~ 발표는 몬해요ㅜㅜ)
덧) AI스터디 일정표 도식화도 클로드로 만들었었어요! 근데 그때는 리액트로 만들어달라고 해서 캡쳐해서 썼어요 😂
진짜 끗