소개
앞서 v0에서 픽한 디자인을 → cursor로 데리고 와서 작업을 하다 의문이 들었어요. 내가 스케줄 기능을 스스로 구현해서 유지하는 것이 과연 실제로 효율적인가?? 데이터나 유지 보수 관리 측면에서 뭔가 아니다 싶은 느낌이 들었어요. 그래서 필요했던 스케줄 기능은 SaaS 솔루션을 통해 해결하기로 결정했지요. 그럼 저의 서비스를 소개하는 수준의 웹사이트만 있으면 되어요.
내적으로 이미 원하는 스타일이 있는데 랜덤으로 만들어주는 AI가 조금 마음에 안들었어요. 그래서 UXer 스터디에서 배운 피그마를 조금 사용해보기로 해요. 일단 내가 원하는 컨셉을 전체 그림으로 좀 더 명확하게 스스로 시각화하기로 합니다.
진행 방법
웹 사이트 레이아웃의 흑백 이미지
↑ 현업 디자이너님들 작업을 어깨 넘어 보니 요렇게 요렇게 만들더라구요. 따라해보았죠.
[ 1탄 ]
음. 처음에 빈 화면을 내가 디자인을 채울 생각하니 아찔.!
일단 전에 눈여겨 보았던 사이트들을 다시 방문해서 원하는 요소요소들을 캡쳐했어요
롱블랙 너에게선 헤더가 괜찮았고,
캐릿 너는 움직이는 배너가 예쁘고,
소문자
여기는 컬러 배색 조합이 예쁘고,
등등등 캡쳐를 모아모아 피그마 프레임에 배치를 시작했어요.
↑ 그래서 이런식으로 최종 결과물이 어떻게 나오면 좋겠다 하고 짬뽕을 만들었죠
[ 2탄 ]
요기조기 사이트 탐방을 다니다 보니
어라, 마우스 커서가 모양이 다르네요?? 이거 놓칠 수 없어요. (디테일)
한국어 텍스트가있는 검은 색 화면
"쪽집게 같은 컨설팅을 하겠어" 하는 마음으로 쪽집게 커서를 하고 싶었어요
GPT에게 물어보았죠.
오, 피그마 커뮤니티로 가라고 해요.
쪽집게는 없었지만 대신 색연필을 찾았어요. 나름 이뻐서 OK !
아이콘을 내보내서 파일로 가지로 있어야 진짜 Cursor 프로그램에서 쓸 수 있다는걸 나는 이미 알고 있었지 ㅎㅎ 근데 방법은 몰라서 물어봤어요.
오른쪽 하단에 보면 익스포트가 있는데 사이즈를 정할 수 있어요 (대박)
1x 를 받아봤는데 작아서 귀엽지가 않아요. 그래서 1.5x 로 다시 다운받았어요. 이제야 귀욤.
[ 3탄 ]
홈페이지는 히어로가 눈에 끌려야죠. 아까 찾은 벤치마킹 사이트를 따라서 저의 로고를 넣고 싶어요. 모션으로. 타이핑이 이쁠 것 같아서 또 GPT 방문
캔바, 오랜만이군
카드 등록하면 1개월 무료라는걸 나는 또 알고 있지 ㅎㅎ
OK 캔바 너로 작업 당첨
분명히!!!!!!
여기서는 글자가 붙어있는데!!!!
도대체 why??? 줄바꿈 결과물이 나올까 너무 속상,
GPT가 캔바에서 자주 있는 일이래요.................,,,,,,,,,,,,,,,+_+!!!!!!
결국 포기하고 다른 모션으로 ㅜㅜ~~
↑ 나쁘지 않아 최종 결과물
[ 4탄 ]
히어로 섹션에 이미지만 있으면 심심하고,
홈페이지 전체에서 우리 정신이 깃든 문구들이 여기저기 있어야 되니까
글밥(?)이 좀 필요해요. GPT랑 정리를 해봅니다.
한국어 텍스트가있는 검은 색 화면
흰색 로고가있는 검은 배경
↑ 티키타카 끝의 최종 결과물, 잘 나온거같아요.
요거를 데리고 이제 홈페이지 요기조기에 잘 배분해서 활용하면 좋겠어요
결과와 배운 점
딸깍 딸깍 홈페이지 만들어주는 AI툴을 여러개 만져봐도 마음에 들지 않았었는데요. 아마 근접과 적중이라는 표현으로 비유가 가능할것 같아요. 원하는게 명확해서 그런지 저는 이번과 같이 피그마 작업이 취향에 좀 더 맞네요! 확실히 다양한 툴을 활용할 줄 아는것이 경쟁력이 될 수있구나 다시한번 리마인드 하며, 커서랑 이제 진짜 싸워야할 시기가 오고 있어요(윽!)
