찐 서랍장 모양의 블로그 제작기 (feat. Antigravity, Stitch) - 파트1, 디자인

 

오백년 만에 블로그 디자인을 바꿨다. 

 

이번에 리뉴얼하면서 제일 도움을 많이 받은 건 단연 '안티그래비티(Antigravity)' 였다. 링토스 게임 만들고 나서 바이브코딩에 재미가 들려서 블로그까지 바꿔버린 건데. 이거 하려고 Google AI Pro 결제했다. 

 

링토스 게임 만들었던 후기는 여기에 ▼

안티그래비티로 수중 링 던지기(링 토스) 게임 만들기

 

내 블로그 이름은 '서랍장' 이다. 그래서 직관적으로 서랍장 모양의 블로그를 만들어보았다. 이 발상을 처음 한 건 1년 전이었는데, 그때까지만 해도 내 머릿속에만 떠돌아다니던 그 그림을 어떻게 웹사이트로 옮길지 고민이 많았다. 컴공 전공인 동생한테 물어서 웹사이트 빌딩하는 책을 사려고도 했으나, 본격적으로 공부해야할 것 같고 무엇보다 책이 두꺼워서 고사했었다.

 

그렇게 '나만의 블로그 만들기' 계획은 아이디어 무덤에 묻히는가 했는데... 그로부터 몇 개월 후 바이브코딩 붐이 시작할 무렵 ChatGPT 를 이용해서 블로그를 대강 만들어뒀었다. 글과 사진만 볼 수 있는 형태로 말이다. 그마저도 사진은 업로드된 모양새가 몇 번을 수정해도 애매해서 나중에는 사진 탭을 없애버렸다. 

 

그렇게 글만 5편 올려두고 거의 방치하다시피 해놨던 내 블로그를 안티그래비티를 통해 소생하게 되었다. 한 번 시작하니까 고치고싶은 부분들이 계속 보여서 지난 주말도 계속 웹사이트를 수정했다. 아직도 수정할 부분이 많지만 내가 제대로 만든 첫 블로그인 만큼 계속해서 디벨롭해나가고 싶다. 나중에는 블로그나 SNS 보다 이 공간에 내 소식을 더 많이 올려두는 날이 올지도 모르겠다. 

---

파트 1 - 블로그 시각 디자인, 메뉴별 레이아웃 짜기, 관리자 페이지 생성

파트 1에서는 블로그의 각 페이지를 디자인하고, 각 페이지별로 기능에 따라 레이아웃을 짜고, 콘텐츠를 올릴 관리자 페이지를 생성한 일에 관해 이야기할 예정이다. 각 과정에서 사용한 툴을 정리해본다.

 

✏️ 디자인 - Stitch(디자인 초안 뽑기) / Pinterest(레퍼런스 수집) / Antigravity(개발 중 자잘한 디자인 수정)
🗄️ 레이아웃 - Claude(PRD 제작) / Antigravity(PRD에 따라 레이아웃 및 기능 구현)
🗂️ 관리자 페이지 - Claude(PRD 제작) / Antigravity(PRD에 따라 기능 구현, 기능 디벨롭) / Firebase(DB 구축)

 

총 6개의 플랫폼을 거쳐 블로그를 리뉴얼했고, 배포할 때 사용한 깃허브까지 더하면 총 7개의 플랫폼을 활용했다. 세어보니 많긴 한데 제대로 코딩하시는 분들은 이보다 더 많이 쓰겠지..? 근데 정작 코딩할 때는 여기저기 왔다갔다하는 느낌도 안 났다. 그냥 필통에 형광펜, 볼펜, 샤프, 자 등 여러가지 필기도구를 넣어두고, 상황에 따라 필요한 도구들을 꺼내 쓴 느낌이었다. 

---

 

✏️ 디자인 - Stitch(스티치)와의 기싸움

 

작업 방식: 

1) 스티치에 내가 원하는 모습의 블로그 이미지 글로 전달

2) 1차 시안 여러 장 받아보고, 마음에 드는 이미지 골라서 디벨롭 시작

3) 핀터레스트에서 레이아웃 및 구체적인 요소 관련 레퍼런스 다운받아서 스티치에 삽입

4) 레퍼런스대로 이미지 출력해달라고 스티치에 요청

5) 마음에 드는 작업물 나올 때까지 반복

 

스티치 작업 필드

 

스티치에 첫 번째 프롬프트를 입력했다. 이때는 레퍼런스 없이, 오로지 내 머릿속에 있는 컨셉을 얘기했다.

저는 독특한 형태의 개인 블로그를 디자인할거예요. 방 안에 목재 도면 서랍장이 있고, 서랍장 한 칸 한 칸을 메뉴로 사용할 거예요. 첫 번째 칸은 '글', 두 번째 칸은 '사진', 세 번째 칸은 '댓글 및 커뮤니티' 를 위한 공간으로 구성할 거예요. 제가 지금까지 말한 대로 웹사이트 화면을 구성해주세요.

 

그 결과, 아래와 같이 세 가지 컨셉의 서랍장 모양의 웹사이트 이미지를 출력해줬다.

 

그런데 왠지 묵직~ 한게 내 생각과는 조금 달랐다. 그래서 이번엔 레퍼런스와 함께 프롬프트를 다시 입력했다.

서랍 디자인은 이 이미지를 참고해서 '사실적으로(realistic)' 생성해주세요.
그리고 메인 페이지에는 서랍 이미지(메뉴 기능추가)만 있으면 좋겠어요. 하단의 사진이나 요소들은 모두 제거해주세요.

 

좌: 레퍼런스(핀터레스트) / 우: 스티치 출력물

 

어때요? 제법 비슷한가요? 나름 색상은 또 맞춰서 출력해주었다. 좌측 디자인처럼 가운데 뚫린 것도 반영해주길 바랐는데.. 일단 디자인 초안을 뽑는 게 우선이니 저정도로 만족하기로 했다. 

 

메인페이지를 뽑고 나서 다른 칸 페이지도 디벨롭하기 시작했는데.. 이런 디자인의 웹사이트가 기존에 잘 없었다보니 얘(스티치)가 갈피를 못 잡는게 느껴졌다. 매 페이지가 고난이었기 때문이다. 아래에 각 페이지의 첫 디자인과 최종 디자인을 함께 기록해두도록 하겠다.

 

1) Writings Drawer - 글 수록

 

어려웠던 점: 내가 원하는 레이아웃을 스티치가 이해하지 못했다. 내가 원했던 건 서랍 안에 인덱스 붙은 파일이 가로로 가지런히 꽂혀져 있는 모양새였는데, 레퍼런스를 입력하고 여러 번 프롬프트를 바꿔 입력해봐도 알아듣지 못하는 거다. 인덱스 붙은 파일 형태까지는 제작해주는데 자꾸 서랍 뒤쪽에 붙여두고 앞은 공백으로 두는 거다. 앞쪽부터 채워달라고 해도 모른척... 결국 우측처럼 리스트 형태로 바꿨다. 파일 형태 잡으려다간 내가 지칠 것 같아서.

 

좌: 레퍼런스 / 우: 출력물

 

내가 오죽 답답했으면 손으로 그려서도 올려봤다.. 그런데도 결과물은 요지경. 인덱스 올라온 것까지 완벽한데 거기서 하단부 여백을 줄여주라는 말은 곧죽어도 이해를 못한다. 왜그랬을까...

 

2) Photograpy Drawer - 사진 수록

 

생각해보니 사진 서랍은 그닥 어려웠던 점이 없었던 것 같다. 프롬프트 입력할 때마다 내가 의도했던 대로 잘 수정해주었다. 그럼에도 초기 디자인을 수정한 이유는 서랍 전체를 사진으로 가득 채우고 싶었기 때문이다. 모든 사진을 2번째 칸 이미지처럼 폴라로이드 프레임으로 해달라고 요청하니까 바꿔주었다.

 

우측 상단에 있는 'REFRESH' 버튼을 누르면 사진이 진동하면서 새로운 사진으로 바뀐다. 아쉽게도 지금은 4장만 올려둔 상태라, 저 버튼을 눌러도 사진의 순서만 바뀌고 다 보여준다. 나중에 사진을 많이 올렸을 때를 대비했다.

 

3) Community Drawer - 방명록 수록

 

어려웠던 점: 서랍장 내 각각의 박스 안에 요소를 채워넣는 일이 어려웠다. 내가 집어넣고 싶은 것들을 핀터레스트에서 모두 긁어와 스티치에 붙여넣고, 이것들을 각각의 칸에 넣어달라고 했다. 아무래도 3D를 2D로 옮기다보니 형태가 제대로 옮겨지진 않았다.. 그래도 나름 만족했는데 문제는 온라인으로 봤을 때 서랍 이미지가 완전 찌부되어서 보인다는 점이었다. 그래서 지금과 같은 간단한 형태로 수정했다. 

 

 

4) Home - 메인페이지

 

어려웠던 점: 침대 디자인과 배치가 골치아팠다. 아니, 지금 생각해보면 침대는 메인도 아니었는데 내가 왜 그렇게 진을 뺐지.. 싶다. 그치만 거슬리는 걸 어떡해! 침대도 마찬가지로 레퍼런스를 입력했는데, 우측과 같은 형태로 나왔다. 흐린눈 하면 멀쩡해보이는데, 자세히 보면 책 사이에 요상한 띠들이 껴있다. 배게도 잘린 것 같이 되어있다.

 

무엇보다 신경쓰였던 건 침대의 배치였다. 서랍과 틈을 주라니까, 오히려 더 옆으로 붙이는 게 아닌가. 침대 오른쪽으로 조금만 더 밀어달라는 프롬프트를 5번은 입력한 것 같다. 아래는 나와 스티치의 사투가 담겨있는 B급 시안들이다.

 

아참, 신기한 거 하나 발견했다. 스티치에서 히트맵 기능도 되는 거 알고 계셨는지? 내가 입력했던 프롬프트를 못 찾았는데, 히트맵을 보고싶은 웹사이트 화면을 클릭한 다음 프롬프트를 입력하면 출력해준다. 내 블로그 이미지가 기존 블로그보다조잡해서 메뉴가 어딘지 알까 싶었는데 정확히 메뉴 탭 부분에 빨간색으로 표시되는 걸 보고 안심했다. 

 

 

그리고 스티치에서 나이트모드도 뽑아준다. (신기) 스티치는 이미지만 출력해주는 거라고 생각했는데, 나이트모드로 바뀔 때 램프에서 은은하게 빛이 나면 좋겠다고 요청하니까 진짜 그런 효과가 나게끔 바꿔줬다. 

 

원래는 이 게시물에서 레이아웃 디벨롭하고 관리자페이지 생성하는 것까지 얘기하려 했는데.. 게시물이 너무 길어져서 나눠야겠다.