📋[미니 일지 #1] 도로롱 웹사이트 제작부터 배포까지

귀여운 3D 캐릭터 '도로롱'을 웹사이트에 띄우고, 아스키 아트(ASCII Art) 효과를 적용해 레트로 감성을 더하는 아주 미니미니한 프로젝트를 진행했습니다.

📌 프로젝트 개요 : 그저 "도로롱"

 

• 주요 기술 스택: React, Three.js, vite
• 배포 환경: GitHub Pages
• 핵심 구현: 3D 모델 렌더링, 쉐이더 기반 배경 제거, AsciiEffect 커스텀 튜닝
• Antigravity 기반 바이브 코딩

 

1. 🖼️ 원본 이미지 퀄리티 확보 (feat. 제미나이 활용 AI 업스케일링)

3D의 판에 2D캐릭터를 띄울 때 가장 먼저 봉착한 문제는 원본 이미지의 낮은 해상도였습니다. 해상도가 낮으면 3D로 돌리거나 확대 했을 때 깨져 보였고, 특히 색감이 미적으로 아름답지 못한 치명적인 문제가 있었습니다. 결국 도로롱을 보는 것이 전부인 사이트이기 때문에 이 비주얼 업스케일링은 필수적인 요소였습니다.

 

제미나이를 통한 도로롱 업스케일

 

그런 문제는 제미나이를 통해 업스케일링해, 쉽게 퀄리티를 확보했습니다!

 

 

2. 🎨 Three.js AsciiEffect 커스텀 튜닝 상세 분석

Three.js의 AsciiEffect는 3D 씬을 텍스트로 쉽게 변환해 주지만, 프로젝트의 완성도를 높이기 위해 몇 가지 커스텀 작업이 필요했습니다.

2.1. 배경 제거를 위한 Fragment Shader 활용

캐릭터 이미지를 3D 사각형 판(Plane)에 매핑했기 때문에, 캐릭터 주변의 흰색 배경까지 아스키 아트로 변환되어 지저분해 보였습니다.

이슈	해결 방법: 배경 제거 쉐이더
흰색 배경 영역이 그대로 텍스트로 변환되어 캐릭터가 사각형 안에 갇혀 보임	Fragment Shader를 커스텀하여 RGB 값이 0.9 이상인 픽셀(거의 흰색)을 렌더링에서 제외(discard) 시켰습니다.
결과	캐릭터만 정확히 텍스트로 변환되어 배경에 투명하게 둥둥 떠 있는 듯한 효과를 구현했습니다.

2.2. Overscan을 이용한 렌더링 영역 정렬

AsciiEffect가 화면에 정확히 딱 맞게 렌더링 되지 않고 미세하게 여백이 생기거나 가장자리가 잘리는 현상이 발생했습니다.

• 해결: 렌더링 영역의 CSS 크기를 130%로 강제 확대하고, CSS transform 대신 top: -15%, left: -15% 속성으로 캔버스를 이동시켜 중앙을 맞추는 방식으로 화면 밖으로 여백을 밀어냈습니다. 이로써 아스키 아트가 화면 전체를 깔끔하게 채우도록 정렬했습니다.

2.3. 가독성 및 레트로 스타일 강조

텍스트가 흐릿해 보이면 명확성 및 레트로 감성이 반감되기에, CSS 스타일을 강력하게 적용했습니다. (픽셀 아트를 확대시 자동으로 안티에일리어싱이 걸려 흐릿하게 보이는 문제와 비슷하다고 보면 됩니다)

• 스타일링: 폰트는 시스템 기본 **monospace**로 고정하고, **font-weight: bold**와 **color: black**을 강제하여 쨍하고 선명한 터미널 스타일의 가독성을 확보했습니다.

완성본! 겁나귀엽습니다,,

3. 📈 방문자 카운터 적용과 서비스 이슈 해결

사이트 하단에 '나만의 웹사이트' 느낌을 더하기 위해 방문자 수 카운터를 추가하려 했습니다.

• 이슈: 가장 유명한 hits.seeyoufarm.com 서비스의 종료(2025년 3월 예정)로 인해 배지가 표시되지 않는 버그가 발생했습니다.
• 해결: 대체 서비스인 **hits.sh**를 찾아 바로 적용했습니다.
• 스타일링: 사이트의 귀여운 분위기에 맞춰 카운터 배지 색상도 Pink (#FF69B4) 테마로 통일했습니다.

 

4. 🚀 GitHub Pages 배포

vite로 빌드 후 GitHub Pages를 통해 무료로 호스팅했습니다.

 

간단한 미니 프로젝트였지만, 3D 렌더링, 쉐이더 커스텀, 아스키 아트 튜닝, 배포 경로 설정 등 웹 개발의 여러 요소를 알차게 경험해 볼 수 있었습니다.

• 배포 사이트: https://nerdeyprite-ctrl.github.io/doro/
• GitHub Repository: https://github.com/nerdeyprite-ctrl/doro

도로롱 귀여워!