어제 가입인사겸 남긴 간단한 장난감에, kai님께서 피드백을 주셨습니다. 왠지 힐링되는것 같다고요.
힐링이라닛 피드백은 빌더를 춤추게 아니 토큰을 녹이게 한다는 말이 있듯,
그냥 재미로 만든 페이지를 좀더 디벨롭해보기로 하였습니다.
1)기능
Just type. 끝입니다.
키보드를 아무거나 누르시면, 준비된 문장이 출력됩니다. 끝.
아, 우측 하단 sound 버튼으로 빗소리 토글이 가능합니다.
2)왜 이딴걸 만들었나?
키보드 그냥 누르고 싶은데 뭘 칠지 생각조차 하기 싫을때.
그냥 카페에서 뭔가 치는데 감성있게 보이고 싶을때
필사해야 하는데 하기 싫고 뭔가 읽고 싶을때
그래서 만들었습니다.
3)빌드과정
제가 작업하는 과정은 매우 번거롭습니다. 자동화도 지양하고(n8n으로 할 수 있는거면 토큰은 사치다가 제 모토입니다. 구독료만도 너무 비싸요) human in the loop를 꼭 생각하는 쪽이라, 도움될 것은 크게 없으리라 사료됩니다. 다만 요즘은 빠르게 프로토타입을 뽑을 수 있어서, 핵심 스켈레톤을 뽑고 마음에 들면 제 취향에 맞게 다듬는 식으로 작업하고 있습니다.
a. 아이디어
최대한 원샷으로 뽑습니다. 한 턴으로 핵심 가치가 전달되지 않는다면 버립니다. 다만 모델 성능에 따라 기대하는 결과물의 감도가 좀 다른데, 요즘은 프론트엔드 디자인 성능 많이 올라오고 sites로 바로 배포도 가능한 코덱스가 너무 편해서 구현은 대부분 gpt sol에게 맡기고 있습니다.
https://reality404studio.github.io/typeanything/
원샷 결과물이고 나쁘지 않습니다. 모바일 대응은 추후 주문한 거기 때문에, 꽤나 멍때리기용 장난감으로 잘 나온 듯 합니다. 보통은 여기서 버리는 것들이 정말 많습니다.
b. 다듬기
쓸만하게 다듬어봅니다. 먼저 요즘 디자인 공부를 하고 있기 때문에 직접 디자인을 그립니다. 마침 요즘 필사도 안해서 쌓여 있습니다. 좋아하는 텍스트를 샘플로 넣습니다. 필사 타자 치기 싫은데 막 눌러도 감성문구가 나오면 좋을 것 같습니다.
디자인은 피그마에서 그립니다. 피그마 유료 구독이 아니면 모델mcp로 월6회밖에 못 끌고 옵니다. 지금은 왕초보라 클로드를 스승으로 두고 배우는 입장이기 때문에 선생님 말씀대로 그딴것은 사치이니 직접 깎아 봅니다. 컴펌을 받기 위해 클로드에게 혼도 나 봅니다. 네 저는 인턴입니다...
클로드가 이만하면 봐줄만하다고 드디어 컴펌을 해주었습니다. 이제 이것이 끝이 아닙니다. 코드는 제가 아닌 코덱스가 짤거니까 명세도 작성해야 합니다. 물론 이건 제가 불쌍한지 클로드가 써 주긴 했습니다. 다만 css 애니메이션까지 제 취향대로 반영하려면 뜯어 고쳐야 합니다. ux 시뮬레이션을 해봅니다. 시작하자마자 마음에 안 듭니다. 왜 마음에 안 드는지 모델에게 이야기해야 합니다. 애인 마음 읽는 것 보다 제 마음 읽는 것이 더 어렵습니다. 클로드도 이럴 때 차갑습니다. 그건 님이 찾으셔야 한다고 합니다. 맞습니다. 좀더 샤하고 빵하게 라고 요청하면, 모델은 들어줍니다. 다만 그 대가로 토큰은 야속하게 녹을 뿐입니다. 황야와 같은 주머니 사정을 생각하며 눈물을 삼킵니다. 갑자기 철학적 사유로 넘어갑니다 너 자신을 알라...그것은 토큰노믹스의 시대에 저같은 비렁뱅이라면 반드시 가슴에 품어야 할 격언이었던 것입니다...사실 제 작업 시간의 대부분은 이런 과정에서 소모됩니다.
겨우 완성된 명세를 넘기고 코덱스의 컨펌을 마음 졸이며 기다립니다. 다행히 이정도면 쓸만하다고 해주셨습니다. 오늘도 토큰을 절약할 수 있겠다는 생각에 궁디가 씰룩거립니다. 기다리는 동안 거북목 예방 스트레칭을 합니다.
드디어 완성입니다. 사실 수정 요청이 두어번 더 있긴 했지만 다행히 금방 끝났습니다. css 코드를 봅니다. 와 옛날에 이걸 진짜 바닥부터 짜려고 했다면 욕이 나왔을 겁니다. 다시 한번 sol에게 감사하는 마음을 가집니다.
이렇게 만들어진 샘플을 공개합니다. pc웹 기준이기 때문에 거기에 최적화되어 있습니다.
https://justtype-cg8.pages.dev
원래는 최근 읽은 책을 넣으려 했는데 저작권 때문에 전부 만료된 텍스트를 넣었습니다. 들어가셔서 아무 타자를 치시면 아무거나 나옵니다. 이걸 이렇게까지 해서 만드나 싶긴 하시겠지만 원래 개인작업이라는게 자기만족이라 그렇긴 합니다.
버전2로 추가 개발중인 것은 커스텀 기능 입니다. 원하는 텍스트, 이미지, 도서 링크등을 연동하여 사용할 수 있게 만들면 어떨까 해서 작업 중입니다.
원래 오늘 구글 플로우로 만들려던게 이거 때문에 밀렸네요ㅋㅋ
참고로 구글플로우에서 매일 50크레딧을 뿌리고 있으니 영상 생성 관심있으신 분들은 한번 참고해 보셔도 좋을 것 같습니다. 상당히 빠르고 힉스필드같은걸 의식했는지 인터페이스도 전보단 나아진거 같아요(물론 지금이 좋다는 얘기는 아닙니다). 그걸로 작업한 것도 다음에 올려볼게요ㅋㅋ
그럼 읽어주셔서 감사합니다.
혹시라도 궁금한것 있으시면 열심히 답변드리겠습니다.
오 아무생각없이 누르기 좋네요~