🙃🙃🙃 사이트를 완성한 다음에는? : 배포, 추가 개발 등 🙃🙃🙃

부제: 22345번의 고뇌와 3920번의 고통과 2303번의 시행착오 끝에 다다른 곳은... 🌠

(어디서 어그로 끄는 법을 배워서 응용합니다)

🎇 소개

안녕하세요.

17기 피그마 스터디를 통해 바이브코딩의 세계에 몸을 담구게 된 하이호입니다!

저번 글에서 언급한 '멈뭄미 번멱기' 사이트의 배포 이후의 단계를 진행하였고, 이번 글에서 아래 13단계 중 진행한 부분에 대해 간략히 작성하려고 합니다.

오늘 있는 스터디에서 사례 발표를 할 수도 있기에, 글에 발표 관련 언급이 있습니다.

<이번에 진행한 & 진행해야 하는 진도 13단계>

1. 커스텀 도메인 구매

2. 배포하여 도메인 적용

3. 서치콘솔 등록 (-> 이후 SEO 최적화)

4. 애드센스 등록 (-> 이후 승인 최적화)

5. GA4 등록 (-> GTM 세팅 마저 해야 함 -> 함)

6. 커서, 레플릿 등과 연동해서 추가 기틀 마련 ***

7. 멈뭄미 업그레이드 **

8. 지피터스 바이바이 사이트 만들기

9. 사이트맵 만들기

10. 사례글 쓰기

11. 시행착오 개인 노트에 잘 정리하기 **

12. 강의 준비 **

13. 뭐라도 추가 배포해서, 사이트맵에 연동된 것들이 fimga.site가 아니게 하기 -

• *** 는 진행 중이며, 발표 전까지 해내면 베스트인 것

• ** 는 진행 중이긴 한 것. 발표 이후에 완료해도 무방

• - 는 시도조차 안한 것

-- -- -- -- -- --

작업 단계별로 정리하자면

• 1단계: 완성된 사이트를 내놓는 일련의 과정 / OK ?

  • 배포, 서치 등록하기 등

  • 나머진 다 함. GTM을 덜 함

• 2단계: 추가 개발 준비 / 진행 중

  • 커서 세팅, 사이트 업그레이드 등

• 3단계: 정리&회고 / 우선순위 ⬇️

  • 사례글, 시행착오 정리, 강의글로 준비 등

  • 사례글만은 우선순위 높아서 지금 쓰는 중

• 4단계: 발표용 추가 꾸러미 준비 / OK

  • 이번 기수 동안 만든 거 정리하는 사이트맵 등

• 5단계: 추가 작업 / 우선순위 ⬇️⬇️⬇️

  • 배포 더 해보기 연습, 다른 거 기획하기, 백엔드 붙이기 등

이렇듯 담을 내용이 많아서

각 과정에 대해 간략하게만 기록하겠습니다.

• 짧게씩만 써도 충분히 글이 길 거 같고 < 제일 큰 이유

• 자세한 시행착오는 정리를 더 하고 써야 깔끔할 거 같고

• 사례를 가지고 수익화할 방안을 고민하고 있기에...

🎇 진행 과정

1단계. 배포 등

1. 커스텀 도메인 구매

• 호스팅케이알에서 도메인 구매

• 어떤 도메인으로 할지 고민하다가, 무난하고 저렴한 COM으로 결정

• 지피티랑 다른 분들이 이 과정은 쉽다고 했는데, 정말 카카오페이 결제하듯 쉬웠음

• '하이호의 놀이터' 같은 거 하나 사고, 그 아래에 서브 도메인으로 여러가지 두는 게 여러모로 나았을지도 ? 다음 해는 그런 식으로 해야겠습니다.

2. 배포하기

#### 2-1. 우선 피그마MAKE에 연결해보다

• 피그마에서 커스텀 도메인 연결을 눌러, DNS 설정을 함.

• 이 과정에서 WWW가 붙는가 아니면 루트 도메인인가로 오류가 있었음

  --> 추후 이런 부분 개념에 대해 조사할 것.

• 우여곡절 끝에 완료했는데, 피그마가 치사하게도...

ALT

흰색 배경이있는 웹 사이트의 스크린 샷

이런 얄팍한 짓을 하지 뭡니까..

도메인을 구매해서 연결했는데 이딴 거나 띄우고!!

이 좌식이~!~!!!

#### 2-2. VERCEL에 연결하다

저는 대략 난감해졌습니다.

'도메인을 샀는데... 서버?부터 사야 한단 말인가? 도커? 그거 공부 열심히 해둘걸? 아?

이래서 사람들이 카페24를 사는구나? 거기는 도메인하고 배포까지 다 되는 서비스겠지?'

이런 생각을 하다가.... 그래! VERCEL을 쓰자!고 결심.

(처음엔 넷틀라이 어쩌고 쓰려고 했는데 버셀이 좋다고 추천 받았습니다.)

##### <그 과정에서 겪은 시행착오>

가. 깃허브 어떻게 올려요 ㄷㄷ?

• 버셀에 파일 업로드 불가: 깃에 연동해야 함

• 깃에 올리려고 하니, 어떻게 올려야 할지 모르겠음

  • 리눅스 터미널로 올리는 방법은 아는데... 제 노트북은 윈도우..

  • 깃허브 데스크탑을 설치해서 사용 방법을 익혀야 하나?

  • 윈도우 터미널을 깔아서 명령어를 조사할까?

• 넷틀라이에 파일 업로드 했더니: 피그마MAKE 코드가 호환성이 약해서인지 넷틀라이가 바로 못읽음.
  즉, 화면이 안뜸.

나. 배포는 했는데 화면이 안뜨네?

지인이 클로드 코드 설치부터 사용까지 줌으로 친절하게 안내해주셔서.. 클로드 코드 멋진 친구가 해주어가지고 배포는 성공하게 되었습니다.

• 클로드 코드를 사용하여, 깃과 버셀에 연동

• BUT 버셀에 파일을 올렸더니, 안뜸

• 피그마 MAKE 코드의 호환성 문제 222

다. 결국 해결함. 클코에게 계속 수정 요청을 함.

• 어떻게 해결했고, 내가 어떻게 지시를 해야 하는지 물어봄

• 피그마 스터디원들이 알려준 방식(초반에 기술스택 정리하기 등)을 정리하고 참고할 필요가 있음.

  --> 이 호환성 문제를 어떻게 해야 하는지 추후 탐구하고 정리할 필요가 있음.

3. 서치 콘솔 등록

• 클코한테 코드 입력해달라고 했더니 소유자 증명은 쉽게 되었습니다.

• 지금은 데이터 처리 단계라서, SEO 세팅을 할 수가 없습니다.

• 클코가 SEO 최적화 해줬다는데 제대로 반영되었는진 미지수?

  --> 이때 어떤 걸 해줬는지 물어봤으니까, 추후 SEO 세팅 때 참고하기

4. 애드센스 등록

• 피그마메이크에서 해달라 하면 계속 오류 나고 안되었는데, 클코한테 해달라고 하니 바로 되었습니다. (애초에 이거 지정된 위치에 코드 넣기만 하면 되어서 어려운 건 아닌 거 같은데, 같은 클로드 계열인데도... 아아 피그마형...)

• 승인 대기 중. 결과 보고 전략을 세워야 함.

• 버셀, 넷틀라이 도메인이면 심사 오래 걸린다는 말이 있었습니다. 제 경우는 배포는 그걸로 했어도 커스텀 도메인인데 괜찮겠지? 후덜덜

• 버셀 취미 플랜은 수익 창출을 거부한다는 말이 있었습니다. 커스텀 도메인이면 괜찮다고 하고, 잘 안잡는다고 하는데, 어떻게 될지 모르겠네여?

ALT

광고라는 단어가있는 Google Docs 페이지의 스크린 샷

5. GA4, GTM 등록 ⚠️

• 클코가 바로 GTM 등록해주었습니다.

• 예전에 해본 적은 잇지만.. 개념부터 와리가리 하다 보니 헤맸습니다.. 어료워잉

• GA4는 바로 연결되었으므로 접속 인원은 찍히는데, 태그가 안찍혀서 '버튼 클릭' 등의 이벤트가 세팅이 안되었습니다.

• GTM, GA4 동시에 달면 안됨부터 태그 어떻게 해야 하는지, 지피티 공부모드 이용하여 차근차근 학습하였습니다.

--> 발표 전까지 최대한 해보는 게 목표. 성공하면 사례글 수정하러 오겠습니다.

2단계. 추가 개발 준비

1. 멈뭄미 사이트 업그레이드 ⚠️

• 페이지 추가하는 걸 원래 계획하였음

  • 발표 퀄리티도 높이고,

  • 애드센스 확률도 높이고,

  • 도메인 구매 값어치도 하고,

  • 원본 밈 싱크로율도 높이려면 필요

  • 일부러 확장판 생각해서 구조를 그렇게 만들었음

• 발표까지 완성 다 못할 거 같음. 그래도 보여줄 수 있을 정도는 됨. 완성 우선순위 ⬇️

  • 한도 풀리면 살짝 더 수정 + 버전 백업 + 배포

• 일단 커서 연결 미완료라서, 터미널로 계속 쓰고 있음

  • 터미널 맞춤으로 쓰는 법과 시행착오에 대해 기록해야 함.

2. 커서에 연결 ⚠️

• 4주차 과제가, 피그마MAKE에서 출력한 코드를 레플릿이나 커서에 연동시켜 계속 개발할 수 있도록 하는 거였음.
  즉 과제 적절성을 위해선 해볼 필요 있음!

• 의문점

  • 한글로 어떻게 바꾸는가?

  • 테마 어두워서 싫다. 라이트 테마로 바꾸기도 싫다. VS코드 쓸 땐 초록색 테마 썼는데 이것도 바꾸고 싶다. 방법은?

  • 클로드 코드 돈내고 있는데, 커서 쓰려면 중복으로 돈 내야 하나?

  • 커서 맞춤형 버전관리는 어떻게 하는가? 대화 백업 되는가? 기타 등등..

3단계. 시행착오 정리

• 우선순위 낮음. 발표 후에 해도 무방.

1. 개인 노트에 저장하기 ⚠️

나름 하고 있는데 적을 게 워낙 많아서

페이지 분리도 하고 와다다다 해야 합니다~~

더 중요한 게 있는데 노트 꾸미는데 시간 쓰면 안될 거 같아서

일단 대충대충 기록하고 있습니다.

2. 사례글 쓰기

ALT

kawaii 푸들 강아지 -Kawaii 푸들 강아지 -Kawaii Poodle

셜싯히 썼서쇼. 셰쁘게 봐주세쇼! 섯섯!

(열심히 썼어요. 예쁘게 봐주세요! 멍멍!)

3. 강의 또는 판매할 글로 내놓기

• 이 사례랑 시행착오를 수익화하기 위한 방안입니다.
  개인노트에 정리한 자세한 시행착오를 활용할 것.

• 지피티쨩이랑 얘기하면서 대략 뭔가 짜놓긴 했습니다만은 정리랑 보완이 필요합니다.

  • 베스트는 발표 전까지 감마 같은 걸로 PPT 만들어서 대충 보여드리는 건데, 역시나 우선순위가 낮아... 어떻게 시도는 했다는 것만 사례글로 말씀드립니다.

• 이것도 크게 3단계로 진행될 거고, 천천히 할 거고, 그치만 아예 안할 수도 있음.

4단계. 추가 꾸러미 준비하기

1. 사이트맵

제가 17기 들으면서 이전보다 매니매니띵~ 만들었는데요

그것들을 모아보는 사이트가 필요하다고 생각했습니다.

어떻게 만들지 처음에 생각했었는데...

• 프로젝트 관리 페이지를 만든다 = 시기상조

  • CMS 형태의 관리자 페이지 붙이고 백엔드 붙여야 함

  • 확장성 생각하면 이게 좋지만, 만드는데 시간 걸림.

  • 지금 완성해둔 건 대부분 시간 적게 걸린 단순 페이지들이라 필요없음.

• 원래는 포트폴리오 사이트에 넣으려고 했음. 하지만 이건 미완성

• 보여주는 용도 & 시간 고려하면 간단하게 1페이지

(아 표로 정리하고 싶네요... 선택지/이유/결론 이렇게 해서)

결론적으로!!

1페이지로 해서 링크들 붙였습니다!

아 다음엔 표 형태로 만들어보고 싶네요!

2. 기존 사이트 보충

사이트맵에 넣어야 하니까요 중간중간 생각난 추가 아이디어들도 넣고 로고도 정했습니다.

특히 이거...

브금 넣으려고 했는데...

이렇게 가사도 지었는데...

ALT

한국시 - 스크린 샷

문제가...

• 수노 등 AI 음악 생산은 다운로드 하려면 다 유료 플랜이어야 함.

• 수노 말고 퀄리티 높게 뽑아낸 게 없음

• 직접 불러서 편집하기에는

  • 시간도 들고

  • 작곡툴 못쓰니까 퀄리티 엉성할 거고(오다시티 쓸 거임)

  • 남성 보컬이 아니고 (음성 변조한다고 해도 티가 날듯... 어색하거나.)

  • MR은 어떻게 할 것인가 --;;

• 애초에 피그마MAKE가 MP3 파일을 못받아먹음. 커서로 옮겨서 붙여야 한다는 말.

3. 지피터스 BYE 사이트

벤치마킹 테스트 겸..

관종 정신 겸..

끝이니까 기념할 겸 해봤습니다?

제가 이렇게 지피터스에 진심이란 거죠?

기수 끝나는 기념으로 사이트도 만들다니..

마음이 갸륵하단 거죠?

ALT

한국어 텍스트가있는 흰색 화면

지피터스를 향한 하이호의 순정이 이렇다는 거죠

순정파 하이호입니다!

좋아하는 건 꾸준히 좋아할 수 있습니다! (바람은 피지만?)

기호 1번 하이호입니다!

버디 활동 잘할 수 있읍니다!!!!!!!!11

+) 마인드맵

제가 만든 사이트에 이런 버튼이 있습니다.

ALT

한국어 문자 메시지의 스크린 샷

이거 완성해서 붙여야 하는데

우선순위가 떨어지긴 한데

이거 완성 안하면 못붙이는데ㅔㅔㅔ

5단계. 추가 개발 &배포

진행하고 싶었습니다...

+) 이력서 사이트에 대하여

제가 이전 글에서 이력서 사이트를 만들겠다고 했었는데요

갑자기 머뭄미 한다고 해서, 포기하거나 잊은 게 아닙니다.

어떻게 구현할지 막혀있었을 뿐입니다.

그러다가 사이트맵 구현하면서 방법 찾았습니다.

** 해결책

• 좌표를 설정하면 됨

• 좌표 수치 체크하면서 저는 수동으로 코드 편집했음... 수정한 코드 건들지 말라고 하면 원하는 위치에 고정 완료.

• 시도해볼 것

  • 격자 그리드 레이어 위에 깔아달라고 해서 X와 Y 위치 체크

  • 아이콘 실시간 움직일 수 있게 해달라고 하고, X와 Y 위치 툴팁으로 뜨게 해달라고 하기

    • 그냥 움직일 수 있게 해달라고 하면 삐걱거림. 원인은? 대안은?

• 반응형에 따라 위치가 다를 수 있다면? 그럼 어떡하지??

** 이후 플랜

• 어쨋든 사이트맵 구현하면서 얻은 걸로 파일 새로 파서 시도.

• 이전에 만든 페이지는 코드를 따서 붙여넣거나, 커서 등에서 병합 시도

• 4번째 이후의 페이지 기획하기

🎇 결론

앞으로도 계속 열심히 해나갈 거예요.

맛들렸습니다.

하나하나 손 봐서 구현하는 재미!!!

상상만 하던 서비스들, 포폴에 묵혀진 서비스들 차근차근 하면 완성할 수 있을 것 같아요.

제 꿈은 사회적으로 도움되는 서비스를 비영리로 운영하는 것입니다. (전업X 본업은 따로)

이게 한... 35살은 되어야 이룰 수 있을 거라 예상했는데

생각보다 빠를지도? 제가 열심히만 한다면요??

사이트 축소시켜서 MVP 정도는 가능할?지도?

배울 거 짱많으니 화이퉹~~~~~~~~

🎇 여담

1. 내용이 좀 있는데, 사이트맵까지 보여주려면 발표 시간 짧지 않을까? 발표는 어찌 할 것인가?

일단 개요를 먼저 드리고, 스터디장님이 어디까지 하라고 하시면 그대로 하면 됨.

예를 들어 사이트맵 보여드리는 건 사례글 발표와는 거리가 있는 논외이므로, 후토크에서 하게 될 수도 있음.

(보여드리고 싶은데, 기회 주셧으먄..)

2. 멈뭄밈 번역기 도메인의 유효성에 관해

사실 그렇게까지 화제성, 수익성이 있는 사이트는 아니고... 밈도 한물 갔는데
이런 거에 도메인 구매를 해도 되는가?

라고 고민을 했습죠.

근데 뭐...

• 사이트 확장하면 되고

• 배포 이후의 과정 해봐야 하고

• 매달 만원 이상 내야 하는 것도 아니고...

• 결과를 지금 다 예측하기도 좀 웃기고 해서

결과적으로 결제에 후회는 없습니다.

3. 마이크로 컨트롤을 하고 싶은 나, 바이브코딩이랑 안맞을지도?

BUBBLE 같은 빌더 툴이랑 궁합이 좋을지도?

라고 말은 해봅니다?

바이브코딩만큼 간편하게 사이트 구성할 수 있는 게 어딖겠어요 세상 참 좋다~

하지만....

ALT

한국어 앱의 스크린 샷

클로드형... 왜 툴팁 이렇게 만든 거야!!

아 나 이런 거 신경쓴다고~~

ALT

녹색과 흰색 배경이있는 삼각형의 이미지

내가 원한 건 이게 아니었어..!!!

완성도를 원해!! 일관성을 원해!! 이게 아냐~~~~~~~~~~~~~~~~~~~~!

ㅎ... 클로드 코드와 함께 하면서 동요를 들었는데요.

추천하고 싶은 거 2개 생겼습니다.

• 피노키오

ALT

한국 영화 - 스크린 샷

아 이거 왤캐 좋죠? 뜨끔하고, 아련하고, 귀엽고 어쩌고...

아동의 놀권리에 대해 생각해볼 수 있는 좋은 곡입니다.

• 뽀로로 바람의 노래

ALT

만화 캐릭터가 지구 옆에 서 있습니다

윙윙윙~ 정화되는 기분 ㅎㅎ 코노 가서 동요 메들리 하고 싶다..

아 하지만...

클로드 형!!!1

4. 이것만으로 되나?

뭔가 제가 진도 뺀 건 다 쉬운 부분들이고...

다른 분들처럼 어렵고 멋진 걸 해낸 거는 아니라서... 아 이게 발표할 껀덕지가 되는가?

질이 안되면 양으로 승부하려고 했는데 양도 그렇게까지 많지는 않은 느낌이에요. 🥲

음.. 객관적으로 생각하자.

내가 한 게 정말 쉽고 간편한 것들 뿐인가?

🤔 그런 거 같은데?

그렇습니다... 쉬운 하이호입니다.

^~^;;

--

GTM 추가해서 사례글 수정하면 될텐데

밥 먹는 시간 빼면 3시간도 채 안남은 거 같습니다

파이팅~~ 와다다다ㅏ 달려~~~

🎇 추가

ALT

전화기의 버튼 수를 보여주는 그래프

GTM 연동 성공했습니다!!!!!!!!!!!!!1 끼얗호~!!~!!!!

처음에 뭔가 어렵고 잘 안되어서 겁먹었는데

지피티가 차근차근 알려줘서 해결했습니다. 알고 나니까 그렇게 어려운 건 아니었네요!! (라고 지피티가 알려줘서 해낸 사람이 말함 AI언니가 있어서 다행이야)

물론 아직..

• 다른 버튼들 추가해서 태그 더 달아야 하고

• 아직 스크롤이랑 버튼 클릭밖에 안넣었으니까 다른 트리거도 넣어야 하고

• 애초에 사이트 자체가 공사 중이라서 완성시켜야 뭐라도 될테고...

• 중복없이 잘 작동되는지 테스트도 해야 합니다.

그래도 해냈다?! 일단은 목표 달성??

😀