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

2 weeks ago 5

나만의 창작물임을 강조하며 웹사이트의 디자인이 전문가 수준이 아님을 인정함
웹사이트를 자신이 만들었기 때문에 개성과 주체성이 중요함을 설명함
CSS 규칙과 소소한 변주를 활용해 "중고서점" 같은 느낌을 주려는 시도를 공유함
최소주의 디자인을 추구하지만, 차가운 느낌을 피하려 사용자 경험에 감성을 더하는 방법에 집중함
웹사이트가 계속 변화하고 성장할 수 있으며, 이는 창작물에 대한 애착과 주인 의식에서 비롯됨을 전달함

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

만약 엄마가 냉장고에 멋진 그림을 붙이고 싶었다면, Vermeer, Lichtenstein, Wyeth 같은 유명한 작가의 그림을 복제해서 붙였을 것임
하지만 엄마는 그런 예술이 아니라, 내가 그린 그림을 원했음

감각 있는 디자이너가 내 사이트를 멋지게 만들 수도 있었겠지만, 그렇게 되면 더 이상 내 것이 아니게 됨

빵을 굽기 위해 어떤 사람들은 밀을 키우고, 소금을 캐고, 효모를 배양하려 하는데, 나는 그렇지 않음
내 미숙한 입맛은 Olive Garden의 브레드스틱을 대량으로 먹는 것에 만족함

이런 취향은 개개인의 소유감에서 비롯되는 차이임
자기만의 이유로, 각자 자신만의 인터넷 공간을 꾸미고 있음

다양한 개인 웹의 존재

어떤 사람들은 태양광으로 구동되는 자가호스팅 웹사이트를 운영함
또 누군가는 Substack을 통해 지혜를 공유하고
YouTube에서 제조 현장을 깊이 파는 사람이 있음
Gwern은 독특한 무언가를 하고 있음

이 모든 행동은 "내가 아니면 할 수 없다"는 내적인 동기와 욕구에서 비롯됨
나는 빵이나 서버, 칩을 만들 동기는 없지만, 그 욕구는 유머, 시스템, 소프트웨어, 구조 같은 것으로 표출됨
감정이 너무 강해지면 픽션, 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"; }

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

나는 미니멀리즘을 사랑하지만 차가운 느낌은 싫어함
"중고서점" 같은 따뜻한 감성을 표현하기 위해 몇 가지 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); }