티스토리 블로그 스킨 직접 만들기 with gemini & stitch

얼마전에 언젠가 google에서 figma를 위협할 stitch라는 툴을 개발했다는 글을 보았다

진짜 UIUX부터 백엔드까지 순수 AI로 다 만들수있겠구나 생각이 드는 동시에

예전부터 해보고싶었던 블로그 UI 직접 만들기를 도전해볼 시기가 왔다고 생각했다

우선 목요일 출근길 한시간동안 google stitch에 들어가서 UI 디자인을 시작했다

기존에 이미 이런 블로그 스킨없나 하면서 찾아다닌적이 있어서 어느정도 디자인은 머릿속에 있었다

프롬프트로 주고 받으며 딱 지하철을 내릴때쯤 되니까 내가 원하던 기능과 구성을 만족하는 블로그 시안이 완성되었다

이후에 코드로 다운받아서 동작시켰을때 더 놀라웠던건 미세한 애니메이션을 넣어줘서

내가 원했던것보다 더 만족스러웠다

티스토리 적용을 위해 치환자 등 관련 문서와 링크를 제공했고 함께 html과 css파일을 보면서 적용을 시작했다

적용하면서 하위 카테고리를 위한 상단바등 기능을 추가하려고 했는데 무엇이 문제였는지 잘 적용은 안되었다

하지만 stitch로 작성한 디자인 시안이 완전히 정상작동할수있도록 코드를 수정해주었다

우선 지금은 별다른 문제가 보이진 않는다 사용하면서 문제가 발생할꺼 같긴한데 그건 또 그때 해결하면되니까

프론트엔드에 대한 지식이 부족해서 진짜 바이브코딩으로 제작했는데

이후에 클로드코드 같은걸로 코드 리팩토링하고 그러면 더 좋게 다듬어지지 않을까 싶다

구글 제미나이로 모든 작업을 진행했는데 이 글 썸네일 이미지도 만들어 달라고 해봤다

잘만들긴했는데 개인적으로 내스타일은 아니다 안쓰는걸로

그래도 stitch라는 바느질 개념을 이미지에 재치있게 잘 녹여낸거 같다

난 픽토그램 같은 느낌이 뭔가 제일 심플하고 좋다

그걸로 다시 프롬프트 해보고서 등록해야겠다

이 글 올리고 귀신같이 신규 게시글 알림 아이콘때문에 카테고리 메뉴칸이 좀 이상해지는 현상이 있었다

역시 모든 테스트와 QAQC 확실히 해야해..

깃허브에 올리고 코드 개선을 적용했다
개선하면서 하위카테고리 상단바 기능 추가 가능해보여서 적용했다.

GitHub - realight0316/realight-tistory-skin: tistory custom skin

tistory custom skin. Contribute to realight0316/realight-tistory-skin development by creating an account on GitHub.

github.com

친구한테 블로그 보여주다가 모바일 페이지 메뉴버튼이 안보이는 에러를 발견했다
댓글에 작성자 아이콘이 두개 보이는 문제를 개선하고 비밀댓글 체크박스를 추가했다.

티스토리툴바