본문 바로가기

취미

오타쿠 호흡 제 1형, 바이브 코딩 셀프 실물+웹 연하장 제작 후기

안녕하세요 유강입니다...

연하장 후기를 드디어 써봅니다. 

 

예술에 소질이 없어서 본투비 소비러 오타쿠였습니다만... 

추구미 : 메디치 (커미션에 nnn만원 소비)

개인적으로 엄청 터닝 포인트 같은 일이 일어나서 뭔가... 뭔가 뭐라도 해야겠다는 생각이 들었습니다..

2025년을 이렇게 흘려보내고 싶지 않다는 생각을 했어요 !! 

ㅋㅋ 

 

크게 컨셉 디자인, 인쇄, 홈페이지 제작으로 나눠서 일했습니다.

 

1. 컨셉 디자인 내용.. 

이 외에도 대충 레퍼런스 오천개 흩뿌려놨고

이 후레 커미션 양식 보고 제 사랑하는 어떤 소녀가 뚝딱뚝딱 디자인해옴.

초안

아니돈도안받았는데이

게어떻게.. 

예븜? 감동이다 진짜...

QR로 홈페이지 넣는 걸 이때 쯤 고려하기 시작해서 디자인 수정이 좀 있엇음

2번 정도 컨펌한 다음에 연하장은 인쇄용으로 준비 완.

 

2. 인쇄

컴션주와 나는 한국에서 인쇄를 맡겨본 적이 없기 때문에 ...

그냥 돈 더 내도 색감 사는 곳으로 하기로 마음 먹음.

그리고 사실!!! 무채색 위주라 뭐 색이 중요하지도 않았음.

하지만... 100장이나 인쇄할 생각이었기 때문에? 돈 아깝지 않게 하고 싶었다. 

 

포타. 트위터. 그리고 오타쿠 친구들에게 발품을 팔았는데

레드 프린팅 극호와 극불호 후기를 듣고 고민이 되기 시작..

레드 프린팅 특징: 비싸고 보장된 퀄 (원하는 게 아닐 수도)

 

하지만

나는 후니 프린팅으로 선택했다.

선택 이유: 종이 종류가 많고 10장 단위 가능, 후가공 가능(이땐 청박... 이런 헛된 꿈을 꾸고 있었기 때문)

무거운 종이를 하고 싶었는데 레드프린팅은 낭창낭창 종이 밖에 없었기 때문이다ㅠㅠ

 

엽서 / 100mm x 150mm, 클래식 크래스트 스티플 270g, 양면  70장

카드 봉투, 배송비 포함 총 33,910원 지출 - 커미션 비용이 안 들었기 때문에 좀 돈 써서 인쇄를 했다..

열심히 포장 지옥에 빠지고 싶었으나... 가장 큰 일이 남아 있었다... 

바로 사이트를 만들어야 QR이 인쇄가 된다는 거였고... 아무것도 한 게 없었던 것이다... 

 

3.

대망의 웹사이트.......

사이트 사양도 안 정했고 뭔 컨셉인지도 안 정해놓고시작함 (이런식으로 개발하면 안됩니다)

저는 제미나이. 퍼플렉시티, 깃헙 코파일럿을 사용을 했음.

처음에 있었던 요구사항: 각자 편지를 볼 수 있는 예쁜 화면을 만들자. 였다,.

초안은 이런 느낌.

 

레트로랑 뉴트로랑 감을 못 잡고 이때는 화면 전환 어떻게 할지도 제대로 생각을 못했었음.... 

하다보니 하고 싶은 것도 많고 정리가 안된다는 느낌을 받았다..

 

시행 착오들이 깃헙에 남아있다.. 코파일럿이 commit log도 써줘서 다 정리가 잘 되어 있음.. 

화면 전환과 구성을 정리를 하다 보니 컨셉도 확정이 되었다..

1️⃣ 인트로 시청
- "PRESS PLAY" 버튼을 클릭하여 시작합니다
- 자동으로 라이너 노트(앨범 소개 메시지)가 표시됩니다


 2️⃣ 라이너 노트 읽기
- 전체 공개 메시지를 스크롤하며 읽을 수 있습니다
- X 버튼을 클릭하면 메인 화면으로 이동하며 음악이 시작됩니다

 

3️⃣ CD 플레이어 조작
- 중앙의 CD 플레이어에서 재생/일시정지 버튼 사용
- 이전/다음 트랙 버튼으로 곡 변경
- 모바일 상단의 라디오 바에서도 조작 가능

4️⃣ 플레이리스트 보기
- CD 렉(쌓인 CD들)을 클릭하여 전체 플레이리스트 확인
- 각 트랙의 앨범 아트, 제목, 아티스트, 설명 확인
- 원하는 트랙을 클릭하여 바로 재생

11


5️⃣ 숨겨진 메시지 찾기
- 영수증 스타일 버튼("SCAN TO UNLOCK")을 클릭
- 레시피 스타일의 바코드 스캐너에서 **4자리 비밀번호**만 입력
- 바코드 폰트로 표시되는 입력창에 비밀번호 입력
- Cloudflare D1 데이터베이스에서 암호화된 메시지 조회
- 입력 오류 시 "INVALID" 스탬프 효과로 표시

6️⃣ 메시지 확인 및 답장하기
- **왼쪽 패널**: 받은 메시지를 A4 용지 스타일로 표시
  - 손글씨 폰트로 메시지 내용 표시

 

이렇게 화면 구성을 구체적으로 작성하고 나니까 맞는 사양으로 배포를 할 수 있게 찾아보게 되었고 

처음에는 google firebase로 하다가 너무 느려서 ㅋㅋ db와 배포를 cloudflare로 바꿨다. 

배포까지는 처음해봐서 우여곡절이 많았지만... 여러모로 재미있는 프로젝트였다. 

 

모바일과 데스크탑 최적화하는 건 하다가 그만뒀지만 거의 3주 동안 틈날 때 조금씩 했던 거 같다. 

기말고사 기간이라 llm 토큰이 부족해서 지체된 거지 딱히 다른 이유는 없었다...

ㅋㅋㅋ 우편 그리고 대면으로 60통 정도 전달했다 ~~~ 

 

시간이 엄청 오래걸린 터라 감성보다 힘들다.... 아진짜귀찮네라는 생각을 많이 했었는데 .....

다시금 생각하면... 채윤 양 때문에 이런 걸 하기 시작했던 거 같아요 ~~ 친구가 넘 보고 싶고 괴로운 마음에 그랬는데 

어느정도 시간을 쏟고 보낼 수 있어서 좋았고... 편지 쓴다고 뇌녹았지만? 뿌듯하고... 사랑하는 마음을 전할 수 있어서 너무 좋았어요. 

 

럽앤피스입니다 

우리 모두 친구들에게 미뤘던 안부를 보내보아요.