내가 만든 사이트가 못생긴 이유

카테고리

디자인

서브카테고리

UI 디자인

대상자

개인 웹사이트 개발자 / 미니멀리즘/개성 강조형 디자이너

난이도: 중급~고급(자체 CSS/Static Site Generator 활용)

핵심 요약

• 개인의 창의성을 반영한 비표준 디자인 선택이 핵심
• CSS nth-child 선택자와 transform 속성을 활용한 비대칭적 시각적 요소 적용
• 자체 개발한 Static Site Generator(genox)와 사용자 맞춤 폰트(Naruto 기반) 사용

섹션별 세부 요약

1. 개인적 디자인 철학

• "웹사이트를 만드는 과정"이 즐거움이라는 주장을 반복 강조
• Hugo/Jekyll 대신 직접 개발한 백엔드/프론트엔드 시스템 사용
• "미니멀리즘"과 "차가운 느낌" 회피를 위해 따뜻한 감성 요소 추가

2. CSS 기반 디자인 구현

• li:nth-child(4n + 0) { transform: rotate(1deg); } 등의 반복 패턴 기반 시각적 변화 적용
• 스크롤 인터랙션을 위해 :hover 선택자와 transform 속성 활용
• CSS 텍스처 배경 생성을 위한 css-doodle 라이브러리 사용

circle*1000 { cx, cy: @r(10), @r(10); r: @r(.005, .01); }

3. 기술적 구현 방식

• 자체 개발한 Static Site Generator(genox)와 Bash 스크립트 기반 빌드 시스템 사용
• VPS 수동 배포(make 명령어 활용)와 프라이빗 쉘 스크립트 운영
• 폰트 커스터마이징(Naruto 영감 기반)과 Piskel 기반 스프라이트 애니메이션 적용

결론

• 개인의 창의성과 개성을 반영한 디자인 선택이 중요하며, Neocities/AWS S3+CloudFront 등 저비용 호스팅 솔루션 추천
• "Journey Before Destination" 철학을 바탕으로 자체 개발 기술 습득을 통해 독창적인 웹사이트 구축 가능