v0.dev로 블로그 만들기

기존에 Jekyll 기반으로 블로그를 매번 조금씩 손질했지만 아무래도 웹관련 지식이 전무하다보니 원하는 블로그를 만들기가 힘들었습니다.

v0.dev에 대해서는 옛날부터 알고있었지만 최근에는 더 좋아졌다는 평들도 많고, 다른 웹페이지 생성 서비스는 많지만 단순히 결과물의 퀄리티만 좋은게 아니라 베이스 자체가 이후에 수정하기 좋은 환경이라는 말을듣고 v0.dev로 한번 블로그를 만들어보자고 다짐했습니다.

우선 처음에는 v0.dev가 그냥 웹페이지를 알아서 만들어준다고 생각하고

Jekyll 기반으로 블로그를 만들어줘!

로 돌려보면 그렇게 좋은 결과물이 나오지는 못했습니다. 웹 관련은 아예 모르다보니 일단 Jekyll 기반으로 만드는걸 궂이 고집할필요도 없긴하니 깔끔하게 포기했습니다.

일단 v0가 주로 사용하는 react+tailwind 기반으로 웹을 만들고 이후에 마크다운 렌더러를 별도로 추가해서 기존 Jekyll과 비슷한 환경으로 구성하면 되는거 아닐까? 라는 생각으로 접근을 바꿨습니다.

우선 블로그를 만들고싶고, 메인 색상의 지정과 어떤 폰트를 사용할지 지정해줬습니다.

I want to make a blog. Main color is #000000 (background). and font is everything is white.

Use suit font

Blog name is Cave. Cave should be placed in left-up side.

첫 프롬프트로 나온 결과물입니다. 여기에 제가 원하는 커스텀을 계속 추가해가면서 변경해봅시다.

Now we try to add some menus. About - This is introduce about me page.

Categories - This is blog post list up each post categories.

Left-Up Logo(Cave) click to navigate blog main page.

기능적인 부분은 스크린샷으로 보여드릴수는 없지만 왼쪽 Cave를 클릭하면 메인 페이지로 돌아오게하고, About과 Categories의 메뉴를 추가했습니다.

Can we make a blog post format to markdown? like a jekyll.

Jekyll과 같이 마크다운 파일을 렌더링하는 기능의 요청도 잘 적용되어 있는것을 볼 수 있습니다.

전체적인 기틀이 잡혔으니 한번 레이아웃의 변경을 제가 원하는대로 계속 요청해서 변경해봅시다.

상단 탑바에서 사이드바로 변경, Github, Linkedin 아이콘 추가와 하단 Footer, 그리고 그리드형식으로 최근 포스트 목록을 띄우고 그리드 카드에는 이미지의 썸네일 블러와 마우스를 호버했을때 줌 되는 기능까지 전부 잘 추가되었습니다.

이후에 검색창을 우측 상단에 추가하고 서브메뉴들의 추가 - 서브 카테고리 페이지들까지 구현을 잘 해줬습니다. 여기서부터는 거의 스타일 변경과 관련된 요청을 많이했는데 하다보니 AI가 내 요구에 맞춰서 스타일을 변경하는것보다는 제가 직접 수정하는편이 더 낫다고 판단해서 여기서부터는 이 프로젝트를 Export해서 직접 수정했습니다.

직접 수정해서 giscus와 같은 기타 기능들도 추가한 완성물이 현재 블로그입니다.

v0.dev를 직접 써보면서 느낀점은 전체적인 레이아웃, 기초 뼈대와 같은것을 만들기에 굉장히 좋습니다. 다만 이후에 세부적인 레이아웃의 변경이나 스타일 변경과 같은건 정확도도 그렇게 높지않고 효율적인 프로세스는 아닌것 같습니다.

옛날에 GPT에서 웹페이지를 만들때는 퀄리티도 그렇게 좋지않고 굉장히 불편하다는 느낌을 많이받았는데 v0.dev는 확실히 편의성도 굉장히좋고 특히 기본 레이아웃을 잡아주는 퀄리티가 너무 만족스러웠습니다. 옛날 Wordpress Web Builder로 개인 페이지를 작업해본적이 있는데 그때보다 훨씬 좋은것 같습니다.

v0.dev는 무료로 이용이 가능하고, 저는 Daily Limit이 금방 걸려서 답답한 마음에 그냥 결제해서 사용했습니다. 웹페이지를 만들일이 있을때는 v0.dev를 애용하게 될것같네요.

v0.dev