소개
흰 개가 한 무리의 사람들 앞에 테이블에 앉아 있습니다.
만념마세묘. 17기 피그마make 수멉믈 듣고 밌는 마미모라고 맙니다.
저는 미번메 멈뭄미 밈 번멱기 사미트를 만들멌습니다.
미번글메서는 기뫽믜도뫄 제작과점, 매드센스 붙미려는 시맴착모(결국 못붙밈), 차무 맥션플랜믈 간단마게 곰뮤맙니다.
작은 흰 개가 분홍색 담요 위에 앉아 있습니다.
안녕하세요. 17기 피그마make 수업을 듣고 있는 하이호라고 합니다.
저는 이번에 멈뭄미 밈 번역기 사이트를 만들었습니다.
개 이미지가 담긴 한국 웹 사이트의 홈페이지
이번 글에서는 기획 의도와 제작과정, 애드센스 붙이려는 시행착오(결국 못붙임), 차후 액션플랜을 간단하게 공유합니다.
기획 계기
- 시간과 에너지 자원을 고려
저는 이전까지만 해도 이력서 포트폴리오를 바이브코딩으로 만들고 있었습니다.
이랬다 저랬다 했다간 죽도 밥도 못 쑨다는 걸 알고 있지만,
그래도 원래 하던 걸 마저 건들기엔 뭔가 에너지?가? 없었어요?
시간 많을 때 마저 하려고요.
- 배포 단계 학습을 위해
먼저 제가 바이브코딩을 잘하기 위해 배워나가야 할 게 크게 3가지라고 생각했습니다.
구체적인 디자인을 잘 반영하는 방법
: 이력서 포트폴리오를 제작하면서 익히려고 하였음
-- > 만들던 중이고, 다음 액션플랜을 정해두었으나, 시간이 당장은 많지 않으므로, 잠시 미뤄둠.복잡한 기능을 잘 기획하기
: 기능 구현 부분에서 막혀서 미뤄둔 서비스가 몇 개 있고, 각 잡고 기획을 다듬거나 방법을 배워야 함. 그래서 미뤄두고 있었음.제작한 서비스를 배포하는 이후의 단계
: 배포하기, 도메인 붙이기, seo 설정하기 등을 모르는데 아주 중요한 부분들임.
-- > 지피터스를 듣는 동안 연습하는 게 좋음. 그래야 다른 잘하시는 분들께 조언을 듣기 편할 것.
요컨대 디자인, 기능 기획, 배포 이 3개의 영역 중에서
배포 단계 학습의 우선순위를 높게 잡았다~입니다.
- 진짜 이유...
사실 진짜 이유는 빨리 성과내고 싶어서입니 다.
이력서 포폴 아이템은 완성이 저~멀리 있어보여서 4주 동안 만들 수 있을지 까마득 했거든요. 차라리 간단한 거 1개 만들고 서브템으로 가져가는 게 낫지 않나 생각했습니다.
지피터스를 듣는 한 달 동안 뭐라도 가져갔다고 스스로 생각할 거리가 필요했습니다. 즉 제 자신의 만족을 위해 눈에 보이는 결과물이 필요했습니다.
지피터스의 대단한 고인물분들의 발꿈치라도 따라잡고 싶었습니다
지피터스를 계속 들으려면 돈이 필요하고 -> 돈을 벌려면 스터디에서 배운 것을 토대로 수익화를 해야 하고 -> 수익화를 하려면 적당한 규모와 난이도의 아이템이 필요하고 -> 어쨌든 이걸 완성해야 지피터스 18기를 계속 들을 수 있고...
칭찬 듣고 싶어서 열심히 햇어요
왜 멈뮴미 번멱기인가?
적당한 규모와 난이도:
사이트 규모가 크지 않음 - 1페이지로 끝
기능 1~2개로 충분함
코드가 어렵지 않음
준비가 오래 걸리지 않음 : 정보 제공 사이트라면 컨텐츠 준비해야 하고, 무언가를 주장하기 위한 사이트라면 그 내용을 잘 가꿔야 하고 기타 등등일텐데 이건 그렇지가 않다.
수익화 가능성 :
이 컨셉이라면 구글 애드센스가 좋게 봐주지 않을까 싶었습니다?
이전에 올렸던 <남자라도 공주가 될 수 있어> 사이트도 애드센스에 일단 연결하긴 했는데
사이트를 저품질로 낙인 찍고 뭔가 안해줄 것 같단 마리죠....
ㄱㅡ사이트 컨셉의 적합성:
사용성: 간단한 사이트의 함정 - 한번 보고 금방 흥미를 잃게 됨
=> 용도에 따라 가끔씩이라도 방문할 사이트여야 함.화제성 : 재미를 챙기거나, 디자인 컨셉으로 좋은 느낌을 줘야 함. 좋은 반응을 이끌어내야 사용자의 참여를 높일 수 있음.
확장성 : 이번에 틀을 잡아놓으면 비슷한 사이트들 만들 수 있음. 대략 어떤 느낌인지 구상 완료
나 개인의 흥미: 이상한 말투 좋아해요
회색 배경에 흰색 박제 개
멈멈!
진행 방법
- 기획 단계
밈에 대해 조사하고 유사 사이트가 있는지 조사했습니다.
대충 찾았을 때 못찾았는데, 나중에 찾아버렸습니다.
그래서 그 사이트랑 비교했을 때 가져갈 장점을 정했습니다.
귀여운 컨셉
텍스트 대치 기능
챗지피티 이용하여 기획 도움받고 프롬프트를 받았습니다.
한국어 문자 메시지의 스크린 샷
이미지 생성 프롬프트를 받아내서, 사이트에 넣을 이미지 소스를 가공했습니다.
한국어 문자 메시지의 스크린 샷
원하는 느낌이 나오지 않아서, 레퍼런스 이미지를 찾아 설명했습니다.
헤더, 번역기 섹션, 텍스트 대치 섹션 3개로 나누어 해달라고 설명했고 각각 어떤 형태여야 하는지 간단히 지시했습니다.
메인 컬러와 부가적 컬러를 설명했습니다.
번역기 코드 제작
지피티 녀석도 만들어줬는데 애가 딴소리하는 게 영 못믿겠어서 (미안하다 안사랑한다)
클로드 녀석한테 만들어달라고 했습니다.
아티팩트로 번역기 만들어달랬더니 금방 뚝딱 만들어줘서...
클로드 당신... 자꾸 그러면 너를 가지지 못한 내 신세가 처량해지잖아.
텍스트 대치에 들어갈 내용 첨부
한국어 텍스트가있는 페이지의 스크린 샷
전에 넣어달라고 했던 내용을 없애지 않나, 쓸데없는 걸 지어서 넣지 않나, 골치가 아팠습니다 .
ㅎ. ㅎㅎ.
클로드로 만든 이 녀석을 같이 썼습니다!~
보완 작업
구현되지 않은 기능 체크하여 넣어달라고 함
쓸데없는 디테일 삭제
동그란 모양들 직접 수정하거나 수정해달라고 함
사이트의 모든 문구 (안내 메세지까지) 사이트 컨셉에 맞게 직접 수정
보기 지저분한 부분 수정 요청 (ex. 플레이스 홀더 색깔, 크기, 정렬 변경 - 완벽히 반영안됨 ㅠㅠ 왜이렇게 못알아들을까요!?!)
이렇게 노가다 하면서 뚝딱뚝딱 노가다 하다 보니 어느새 버전이 40을 넘기고...
(몰랐죠... 버전 40이 많ㅇ은 편일줄은...)
베이지 색 배경에 서있는 흰색 픽셀 화 된 개
아직 수정할 부분이 보이지만, 일단 퍼블리싱하는 걸 목표로 해서
흠잡히지 않을 정도로 완성했습니다. 멈!
구글 애드센스를 붙이고 싶었다...
원래 목표는
퍼블리싱 함 -> 애드센스 연결함 -> 승인대기하면서 설레어 함 (그러면서 도메인 변경 등을 함?)
그런데~
애드센스 연결에서 막혔습니다!
한국 데이트 앱의 스크린 샷
어쨰서?
이 사이트도 애드센스 연결 자체는 성공했는데? (승인은 다른 얘기)
그래서 버전 20개 이상 늘리면서
다른 ai 한테 코드 주고 문제 찾아 달라 하고, 공식 설명문 읽고, 직접 수정해보는 식으로 노가다를 해봤지만
원인을 못찾았습니다.
ㅠㅠㅠㅠ..ㅠㅠㅠㅠ
뭐 어쩌면 잘된 걸지도 모릅니다. 아직 커스텀 도메인으로 바꾸지도 못했으니까오!
하하하하지만 빨리 완성하고 싶은데ㄷ데데데데데데
차후 액션플랜 🎇
커스텀 도메인 진짜 배기로 달기
도메인 목록을 보여주는 Google 검색 페이지의 스크린 샷
어떻게 해야 하는지 모르궸읍니다.
seo 설정해서 검색창에 뜨게 하기
이거 진짜로 어떻게 해야 할지 모르궸읍니다.
구글 애드센스 달기
진짜진짜 모르겠읍니다.
레플릿, 커서, 윈드서퍼 같은 에디터툴로 옮겨서 어쩌고저쩌고를 해야 하는 건가?
아 이 3개만 어째 해내도 이 사이트 완성인데
세 개 다 접해보지 못한 영역이라 너무 어렵네요 방법도 모르겠고...
빨리 완성해서 성과 내고 싶어서 조급한데
당장은 시간이 없습니다.
진정해! 하이호! 아직 지피터스 2주 남았어! 진정해!!!
배운 점
피그마make로 서비스를 4개 째 만들게 되었는데요.
2개는 미완성, 1개는 완성인 거 같지만 손봐야 함 (한 90% 정도) 상태인데
이번엔 솔직히 사이트 자체는 완성이라 봐도 될 거 같아서 뿌듯합니다.
애니메이션 효과 등을 손볼 수야 있죠! 하지만! 이 정도로면 다른 분들에게 보여드릴 수 있다구요!
이런 완성 경험이 배운 점 첫번째입니다.
두번째는 사이트 제작 프로세스를 거쳐봤단 점입니다.
그전에 3개 사이트를 만들면서 쌓은 약간의.. 아주 작은 노하우와 프로세스를 활용했습니다.
직접 코드를 간단한 거라도 수정을 한다든지 (그래봤자 round 삭제 같은 거지만) ...
이 글에서도 그런 프로세스가 담겼다고 생각합니다.
거창한 건 아니어도 모를 떄보단 낫쥬.
흰 개가 한 무리의 사람들 앞에 테이블에 앉아 있습니다.
멈멈멈멈멈!! 뫌뫌뫌!!
멈! 미제 담신믄 돔그란 말믈 말 수가 멊머 멈 🐶🐶
🐶 ㅁ□□ [미거 쓰면 돼 멈 ]
