내 웹사이트가 못생긴 이유는 내가 만들었기 때문임

 (goodinternetmagazine.com)
22P by GN⁺ | ★ favorite | 댓글 3개
  • 누군가가 내 웹사이트를 더 멋지게 만들 수 있었겠지만, 그러면 내 것이 아니었을 것
  • 웹사이트의 개성은 만든 사람의 취향, 집착, 직접적인 손길에서 비롯됨
  • 단순함과 친근함을 추구해 CSS와 JS를 최소화하고, 직접적인 CSS 변형 규칙을 적용해 혼돈과 반복, 서점 같은 감성을 연출함
  • 사이트는 사용자 상호작용에 CSS만으로 반응하도록 설계되어, 꾸밈없는 질감과 예상치 못한 변화가 특징임
  • 웹사이트는 계속해서 변화하며, 소유자와 함께 성장·변신하고, 각자만의 '못생긴 것'이 살아 움직이게 됨

내가 만든 웹사이트, 그리고 그 못생김의 의미

  • 만약 엄마가 냉장고에 멋진 그림을 붙이고 싶었다면, Vermeer, Lichtenstein, Wyeth 같은 유명한 작가의 그림을 복제해서 붙였을 것임
  • 하지만 엄마는 그런 예술이 아니라, 내가 그린 그림을 원했음
  • 감각 있는 디자이너가 내 사이트를 멋지게 만들 수도 있었겠지만, 그렇게 되면 더 이상 내 것이 아니게 됨
  • 빵을 굽기 위해 어떤 사람들은 밀을 키우고, 소금을 캐고, 효모를 배양하려 하는데, 나는 그렇지 않음
  • 내 미숙한 입맛은 Olive Garden의 브레드스틱을 대량으로 먹는 것에 만족함
  • 이런 취향은 개개인의 소유감에서 비롯되는 차이임
  • 자기만의 이유로, 각자 자신만의 인터넷 공간을 꾸미고 있음

다양한 개인 웹의 존재

  • 이 모든 행동은 "내가 아니면 할 수 없다"는 내적인 동기와 욕구에서 비롯됨
  • 나는 빵이나 서버, 칩을 만들 동기는 없지만, 그 욕구는 유머, 시스템, 소프트웨어, 구조 같은 것으로 표출됨
  • 감정이 너무 강해지면 픽션, HTML/CSS, 허접한 로봇, 슬픈 노래 등으로 터져 나옴
  • 그래서 내 웹사이트는 내 것임

단순함과 개성의 공존

  • 과거에는 단순함과 친근함만을 원했음
    • 노이즈 제거
    • 명암 강조
    • 메뉴 깊이 축소
    • 지루한 HTML
    • CSS 최소화
    • JS 회피 등
  • 2023년 내 사이트는 이랬음 (원글의 이미지 참고)

혼돈의 디자인, 그리고 CSS 이야기

  • 어느 순간 더 넓은 가로 공간을 쓰기로 하면서 문제가 시작됨
  • 초기 계획은 간단했음: ul에 flex-wrap을 적용
  • 그런데 텍스트도 감싸지니 각 링크 구분이 불분명해짐
  • inline으로 읽는 사람도, inline-block으로 느끼는 사람도 있었음
  • 더 많은 공백을 늘려보거나, 각 링크에 테두리를 두르거나, 링크 사이에 도트를 집어넣는 것도 시도했지만 마음에 들지 않았음

  • 그래서 링크에 변주를 주는 방법을 선택함

  • 홈페이지의 혼돈은 사실 몇 가지 단순 규칙에서 나오고 있음

    li:nth-child(4n + 0) { transform: rotate(1deg); }  
li:nth-child(4n + 1) { transform: rotate(-0.6deg); }  
li:nth-child(4n + 2) { transform: rotate(0.5deg); }  
li:nth-child(4n + 3) { transform: rotate(-0.75deg); }  
li:nth-child(6n + 0) { font-family: Times; }  
li:nth-child(6n + 1) { font-family: Helvetica; }  
li:nth-child(6n + 2) { font-family: Georgia; }  
li:nth-child(6n + 3) { font-family: Times; }  
li:nth-child(6n + 4) { font-family: Arial; }  
li:nth-child(6n + 5) { font-family: "Trebuchet MS"; }

  • 원래는 더 많은 변화를 위해 서로소 정수(coprime integer) 를 썼으나, 반복 패턴의 미묘함이 오히려 마음에 들었음

  • 나는 미니멀리즘을 사랑하지만 차가운 느낌은 싫어함
  • "중고서점" 같은 따뜻한 감성을 표현하기 위해 몇 가지 CSS 놀라움 요소를 더함 
    li:nth-child(5n + 2) { font-weight: 100; }  
li:nth-child(7n + 2) { letter-spacing: -1px; }  
li:nth-child(41n + 31) { transform: rotate(181deg); }
  • 웹은 여전히 인터랙티브 미디어이기에 JS 없이도 커서 움직임에 반응하길 원함
  • 아래 CSS 덕분에 "잔디를 만지는 감각"을 연출함 
    li:nth-child(2n + 0):hover { transform: rotate(-2deg); }  
li:nth-child(2n + 1):hover { transform: rotate(2deg); }
  • 이로써 커서 움직임에 실시간 반응을 구현
  • 그리고 스크롤잭킹 없이 스크롤의 느낌을 강조하고 싶어서, 텍스처 배경으로 페이지를 '종이'처럼 보이게 만듦
  • css-doodle을 써서 텍스처를 합성 
    svg {  
viewBox: .5 .5 10 10;  
fill: #000;  
circle*1000 {  
  cx, cy: @r(10), @r(10);  
  r: @r(.005, .01);  
  }  
}
  • 라이트 모드에서는 종이의 먼지, 다크 모드에서는 밤하늘의 별 느낌을 표현
  • 2024년 내 사이트는 이렇게 바뀌었음 (원글의 이미지 참고)

변화하는 나, 변화하는 웹사이트

  • 머지않아 내 웹사이트는 아예 다른 모습으로 바뀔 예정
  • 왜냐하면 내가 내 웹사이트의 주인이고, 나 자신도 계속 변화하기 때문임
  • 당신도 변화하게 될 것임
  • 당신의 열정과 가치관은 다른 무언가로 확산될 것임
  • 못생겨 보여도 당신만의 창작물은 계속 살아 움직일 것임

글쓴이 Taylor Troesh는 taylor.town의 시장이며, scrapscript 저자이자, 허접한 것들을 음미하는 사람임

GeekNews Weekly에 포함된 글입니다. 에디터 코멘트 보기

함께 보면 좋은 글 β

secret3056   [-]

들어가봤는데, 정말 난해하군요...

https://taylor.town/

답변달기
tsboard   [-]

글 내용에 깊이 공감합니다. 저도 형편없는 디자인 감각을 숨기기 위해 디자이너 분들이 고심해서 만들어주신 프레임워크들을 쓰면서 애쓰고 있지만, 그럼에도 우직스럽게 여태까지 해오고 있네요.
매번 더 나은 디자인을 고민하면서, 이것 저것 고쳐가며 만들고 운영하는 재미가 있습니다.
이러한 활동 덕분에 더 애착도 가고, 재미도 느끼는 것 같네요. ㅎㅎ

답변달기
GN⁺   [-]
Hacker News 의견
  • 하하, 맞는 말임. 내 주변 개발자 친구들 대부분은 이미 오래전에 Hugo나 Jekyll 같은 기성 템플릿으로 자기 사이트를 옮겼지만, 나는 고집스럽게 CSS도 백엔드도 전부 직접 만든 시스템으로 내 블로그를 유지하는 중임. 나에게는 진짜 즐거움이 '웹사이트를 갖는 것'에 있지 않고, '웹사이트를 만드는 과정'에 있음. 재미있는 부분을 왜 남한테 넘겨야 하는지 모르겠음. 클래식카를 직접 관리하는 것과 비슷함. 그냥 깔끔하고 튼튼한 차를 살 수도 있지만, 그러면 재미가 없음. 목적지가 중요한 게 아니라, 나는 재미를 추구하는 사람임. 회사에서 하루 종일 내가 원하는 디자인이나 기능을 마음껏 정할 수 없는 사이트를 만들고 있으니까, 내 개인 사이트만큼은 내가 완전히 통제하는 자유를 절대 포기할 수 없음
    • 내 웹사이트도 전부 직접 만든 결과물임, 그것도 지난 10년 간 거의 10번씩 새로 만들었음. 매년 뭔가 개편하는 재미가 있음. 홈에 있는 matrix JS 코드(https://oxal.org 클릭하면 깜짝 놀랄 수도 있음), 내가 만든 Static Site Generator genox로 빌드함, CSS 테마도 직접 만든 sakura 사용함, 블로그(https://oxal.org/blog/)에 가면 작은 사이보그가 따라옴(chatgpt로 베이스 이미지를 만들고, Piskel로 직접 스프라이트 애니메이션 작업했음), VPS에 수동 배포함(make로 빌드), 프라이빗한 위치에 파일 업로드하는 쉘 스크립트 다수 운영 중, favicon도 대학생 때 픽셀 아트로 만든 것(링크), 나만의 폰트도 만들어보려다 포기하고 Naruto에서 영감받은 폰트 적용함, 'view-page-source' 기능으로 소스코드를 보면 또 다른 재미를 느낄 수 있음. 내 사이트를 보면 내 소프트웨어 엔지니어 성장의 흔적이 담겨 있다는 느낌이 들어서 이 단순한 작품이 너무 소중함
    • 내 홈페이지(https://pablo.rauzy.name/)도 전부 처음부터 직접 만들었음. 빌드를 위해 맞춤형 Bash 스크립트와 Makefile만 쓰고 완전 정적인 구조임. JS 한 줄도 없음. CSS 연구하면서 반응형, 모바일 메뉴 등도 직접 구현함. 아마 내가 스스로 루브릭이나 방법론을 몇 개 만들어냈던 것 같은데, 이런 시행착오가 진짜 재미로 이어짐
    • 나도 같은 여정임. Hugo로 시작했다가, 결국 내가 직접 static site generator(Loulou)를 만들었음. 만드는 내내 재미 그 자체였고, 직접 만들어보니 역시 값진 체험이었음. 내 사이트는 여기임
    • '웹사이트를 갖는 것이 아니라 만드는 것이 즐거움'이라는 이 한 문장이 핵심임. 이건 마치 'Journey Before Destination(목적지보다 여정)'이라는 Radiant 기사단의 신념과 닿아있음. 여러 신화 속에서도 반복되는 이야기임. 헤라클레스도 사람이었을 때 멋진 일들을 벌이다가, 신이 되어 그만두게 됐음. 고생과 인간적인 부분을 뺏기지 마라는 메시지임. 만약 속상하면 새소리 음악(https://birdymusic.com) 듣기 추천함. 오늘 본 사이트 중 제일 멋지거나 제일 이상할 수도 있음
    • 그게 목적인 거라면 좋음. 하지만 어떤 웹사이트들은 그냥 간단하게 특정 목적만 달성하고 끝내고 싶어함. 예를 들어 이 사이트처럼 특정 작업만 해주면 됨
  • (원글에 나온) 못생긴 사이트 그림에 블로그 글이 가득하지만, 실제 글은 다른 웹사이트에 올라와 있음. 만약 마케팅 쿠키나 멤버십 팝업이 없다면 차라리 그 못생긴 사이트로 직접 가고 싶었음
    • 스크린샷 보면 hello@taylor.town 메일이 보임. 나도 똑같이 궁금해서 taylor.town(https://taylor.town/)에 방문했음. 그리고 이 글 올리고 나서 사이트 로딩이 엄청 느려졌으니까 아마 해커뉴스 효과(HN hug of death)가 온 것 같음
    • 난 이게 흔한 ‘enshittified web’(품질 떨어진 웹)에 대한 비판 글인 줄 알았음. 이 사이트는 나쁘다 생각하지만 이런 점은 또 웃김: (1) 출력책 판매 배너 있음 (2) 쿠키 동의 팝업 있음 (3) ‘Good Internet’ 헤더가 온갖 안 좋은 현대 웹사이트의 상징 속에서 살짝 보임 (4) 헤드라인이 쿠키 팝업에 가려 읽기 어려움 (5) 쿠키 동의 배너 치우면, 이제는 상시 나타나는 쿠키 세팅 아이콘과 "+ Become a Member" 버튼이 있음. 그에 비해 taylor.town이 진짜 좋은 웹임
    • 아마 못생긴 사이트 배경이나 글꼴/색상 선택이 별로여서 읽기 불편하기 때문에 다른 사이트에 글을 올린 것 같음. 예: taylor.town/wealth-000. 나도 개인 사이트는 직접 만들었는데 못생기지 않았음. 저 사람 사이트는 본인이 일부러 못생기게 만든 거라고 생각함, 약간 자기만족에 빠진 느낌임
  • '못생겼지만 흥미로운' 사례와 '못생겼고 지루한' 사이트 사례가 따로 있다고 생각함. 이 사이트는 후자에 가까움. 사실상 그냥 CMS가 마크다운 폴더를 뱅글뱅글 돌며 타이틀을 링크로 뿌려주는 것 같음. 정보 구조가 아예 없고, 카테고리, 아이콘, 이미지, 날짜도 없어서 전부 똑같은 비중으로 보여짐. 단지 '특이하게' 보이도록 배열된 게 다임. 대부분의 개발자 블로그는 검색엔진에서 트래픽이 들어오니까, 홈페이지 디자인이 중요하지 않을 수도 있지만, 만약 독자들이 적극적으로 탐색하게 아키텍처를 만들고 싶었다면 시도와 결과가 좀 아쉬움. 기본 Ghost 템플릿 쓰는 블로그와 결국 별 차이 없는 느낌임
    • 그럴 필요 없음. 중요한 건 저자가 독자를 만족시키려고 만든 게 아니라 본인을 만족시키려고 만든 결과임. 그래서 외부 의견은 그리 중요한 포인트가 아님
    • 저자의 메시지 핵심을 놓친 것 같음
  • 프레임워크로 웹사이트 만들어도 남들하고 똑같은 모양과 느낌만 나와서 아무 재미도 없음. 사업 목적이면 이해하지만, 자신이나 작업물을 보여주려는 거라면 개성 있는 웹사이트가 더 의미 있다고 생각함. SEO나 리텐션에는 비효율적이더라도 나만의 개성을 담는 게 좋아보임. 요즘 웹사이트 빌더들은 너무 구조적이고 천편일률적으로 바뀌어서 싫음. 예전 Geocities나 Freewebs 시절, 읽기 힘든 배경 이미지, 자동 재생 음악, 마우스 따라다니는 커서, 불꽃 앞에서 돌아가는 해골 같은 거 정말 그립게 느껴짐
  • 이 철학이 인터넷 초창기 느낌 그대로여서 너무 좋음. 플래시 사이트에 이상한 네비게이션이나 문제점들이 있었기에 비판도 많았던 시절이지만, 그런 단점 외에도 독특하게 사이트를 만드는 창의력을 존중함. 요즘엔 인터넷이 너무 획일화되었고, 앞으로 AI 생성 컨텐츠 때문에 더 심해질 거라 봄. 규격화되지 않은 코너들을 보는 게 반가움
  • 이런 철학에 완전 공감함. 내 웹사이트는 온전히 ‘나’라는 사람을 표현함. 누가 못생겼네, 너무 비전문적이네라고 말해도 본인은 이런 스타일이 만족스러움. 웹에서, 그리고 세상에서 이런 비순응적 태도가 더 많아지길 바람
  • 글 정말 잘 읽었음. 과거의 "old web"이 좋았던 이유는 뚜렷한 규격이 없어서 사람들이 각자 실험적으로 무언가를 만들어갔기 때문임. 좀 더 혼란스럽긴 했지만, 진짜 멋진 개성 있는 사이트를 우연히 발견할 때의 희열이 있음. 요즘 웹은 너무 구조적, 공식적인 느낌이고, 대부분이 똑같은 템플릿과 프레임워크로 만들어져서 예측 가능한 소비 공간이 되어버림. 탐험의 재미가 사라짐
  • 2023년의 그 사람 웹사이트는 못생기지 않았고 미니멀리즘 느낌이었음. 지금은 정말 못생겨졌음. 처음에는 2023년 버전인 줄 알고 내용에 동의했는데, 진짜 못생긴 버전을 보니 오히려 메시지 자체에 부정적 태도가 듦
    • ‘지금 정말 못생겨서 메시지가 달라보인다’는 게 이해가 잘 안 됨. 이 글의 전체 메시지는 남의 시선과 무관하게, 자기 자신이 좋아하고 즐기면서 원하는 대로 만드는 데 의미가 있음. 많은 사람들이 못생겼다고 하는 이 자체가 사이트와 메시지를 오히려 더 매력적으로 만든다고 생각함. 외모만 붙잡고 아쉽다고 느끼는 순간 진짜 포인트를 놓치는 것임
    • 예전 디자인은 깔끔하고 미니멀하고... 특별한 게 없었음. 지금은 의도적으로 어질러진 혼돈임. 못생겼든 아니든 강렬하게 기억남음. 단점도 있긴 함(특정 링크를 나중에 다시 찾기 어려움) 하지만 그건 그 사람한테 중요하지 않음. 정말로 '불편함', '불협화음', '호기심', 그리고 무엇보다 '/나만의 것/'을 원한 것임
  • 아직 개인 사이트는 없음. 만들 때는 HTML+CSS+JS 또는 JQ로만 제대로 해볼 생각임. 아파치나 nginx 같은 웹서버 고려 중임. AWS 프리티어나 공유호스팅에 올릴 생각임. div 정중앙 맞추는 방법만 터득하면 바로 시작할 수 있을 듯함
    • AWS 프리티어에서 S3+cloudfront 조합으로 1년 동안 0원으로 운영 중임. 아마 이게 최고의 가성비임. 내 사이트는 HTML+CSS 단일 페이지, ChatGPT가 템플릿 만들어줘서 그대로 썼음. 모바일/데스크탑 모두에서 동작하게 만드는 실력이 안돼서 그냥 이렇게 만족함
    • 몇 분만 투자해서 Neocities에서 바로 시작하는 방법 추천함
    • div 중앙 정렬이 왜 밈이 됐는지 잘 모르겠음 
        width: 60%; // 원하는 만큼 너비 지정
  margin: 0 auto;
      이제 블로그 시작하면 됨
    • 나도 똑같이 했었음 : domi.work 나도 못생기게 만들었음 :)
    • 나도 비슷함, 여기에 11ty 얹어서 static build하고 netlify pages로 배포함
  • 깔끔한 템플릿으로 만든 사이트는 다 비슷하게 생겼지만, 직접 만든 사이트마다 세상에 하나뿐인 ‘구석구석의 이상함’이 있음. 개인 프로젝트라면 Tailwind 랜딩페이지 대신 ‘와비사비 HTML’을 택하겠음
답변달기