HN 공개: 사람들을 위한 HTML

• HTML for People은 기술 업계 밖의 사람도 HTML로 직접 웹사이트를 만들 수 있게 돕는 초보자용 웹북임
• HTML을 누구나 다룰 수 있는 웹의 문서 형식으로 보고, 웹사이트 제작의 출발점으로 삼음
• 웹사이트 제작이나 코딩 경험이 없어도 처음부터 웹사이트 만들기를 따라갈 수 있도록 구성됨
• Blake Watson은 2000년대 초반부터 웹사이트를 만들어 왔으며, 누구나 HTML을 배울 수 있어야 한다는 생각으로 책을 썼음
• 필요한 내용을 접근하기 쉽고 친근한 방식으로 다루는 데 초점을 맞춰, 입문자의 진입 장벽을 낮춤

---

누구나 다룰 수 있는 HTML

• HTML은 기술 분야 종사자만의 도구가 아니라, 웹사이트를 직접 만들고 싶은 누구에게나 열려 있는 형식임
• 웹을 이루는 문서 유형으로서 HTML을 이해하면, 복잡한 도구 없이도 웹사이트 제작을 시작할 수 있음

초보자를 위한 웹북

• HTML for People은 웹사이트 제작이나 코딩 경험이 없는 사람도 따라갈 수 있는 초보자 친화적 웹북임
• Blake Watson은 2000년대 초반부터 웹사이트를 만들어 왔고, 전문 분야에서 일하면서도 누구나 HTML로 웹사이트를 만들 수 있어야 한다고 봄
• 책은 시작에 필요한 내용을 접근하기 쉽고 친근한 방식으로 안내함

[GN⁺]

Hacker News 의견들

• CSS를 직접 다루지 않고 https://simplecss.org/에 기대는 선택이 좋음. CSS는 완전히 다른 영역이라 기본 HTML 위에 얹으면 꽤 부담스러울 수 있음
  다만 https://htmlforpeople.com/zero-to-internet-your-first-websit...의 “1단계. 컴퓨터에 폴더 만들기”는 조금 걱정됨. 요즘은 파일과 폴더를 전혀 이해하지 못하는 사람이 꽤 많아 보이기 때문임: https://www.theverge.com/22684730/students-file-folder-direc...
  그렇다고 책 한 장을 통째로 파일과 폴더 설명에 쓰는 건 중복처럼 느껴지고, 대신 링크할 만한 좋은 입문 자료가 있으면 좋겠음

  • 모바일 유행병이 얼마나 심해졌는지 놀라움. 컴퓨터과학 전공으로 들어오는 학생 중에도 zip 압축을 푸는 법이나 다운로드한 파일이 어디 있는지 못 찾는 경우가 있음
    참고로 내가 아는 그런 학생들은 2학년 전에 중퇴했음
  • 파일과 폴더를 모른다니, 여기서는 주먹을 흔들며 그건 “폴더”가 아니라 디렉터리라고 우기고 있음 ;)
  • 명시적 스타일 정보가 없는 HTML 페이지를 대부분의 웹 브라우저가 렌더링하는 방식에는 늘 조금 실망했음
    브라우저 기본값이 simple.css만큼 강한 취향을 가져야 한다는 뜻은 아니지만, 기본 여백, 패딩, 글자 스타일, 제목 등이 딱히 매력적이지 않음
    취향이 뚜렷한 웹 개발자는 기본값이 무엇이든 덮어쓸 테지만, 더 보기 좋은 기본값이 관례였다면 순수 HTML 개인 사이트와 블로그가 더 많이 생겼을지도 궁금함
  • 앱이나 웹 앱을 열 때 새 문서를 여는 대신 최근 문서 목록을 보여주기 시작한 것이 끝의 시작이었음
    파일이 필요하면 그 파일용 앱을 열고 아래로 스크롤하면 됐기 때문에, 파일이 앱과 독립적으로 존재하고 앱 안에서 만들어지거나 볼 수 있다는 모델을 이해할 필요가 없었음
    iOS에 파일 관리자가 없었던 점이 이 흐름을 굳혔다고 봄
  • 이게 세대 문제라고는 생각하지 않음. 그냥 순수한 게으름이 유행병처럼 번진 것에 가까움
    “모든 걸 빨래바구니에 대충 같이 넣어두고 필요할 때 꺼내는” 식의 사고 모델이나, “정리하려고 하지만 파일이 너무 많아지면 난장판이 된다”는 말이 그걸 잘 보여줌
    HN의 많은 사람처럼 컴퓨터에 매우 익숙한 편이고, 파일/폴더 모델을 피하려고도 해봤지만 결국 방법을 찾지 못했음. 아무리 “고급”처럼 보여도 다른 방식은 무너짐
    LLM이 바꿀 수도 있겠지만, 지금까지는 컴퓨터가 내가 무엇을 원하고 원하지 않는지 예측해서 정리해 주는 방법은 없음

• 이 프로젝트의 기본 접근은 세상에 매우 가치 있다고 봄
  이런 개방형 표준 교육이야말로 거대하고 불투명한 기업에서 벗어나, 인터넷이 시작됐던 개방형 표준 기반 시스템으로 돌아가게 해줄 강력한 도구일 수 있음
  계속 업데이트되고 더 많은 사람이 보고 기여했으면 좋겠음. 같은 생각이라면 최소한 GitHub 별이라도 눌러주면 좋겠음: https://github.com/blakewatson/htmlforpeople
  참고로 이 프로젝트와는 지금까지 아무 관련이 없고, 이렇게 말해서 얻는 것도 없음

  • Mozilla에는 수년 전부터 훌륭한 문서가 있음
    기본 HTML 튜토리얼 섹션도 있음: https://developer.mozilla.org/en-US/docs/Learn/HTML
    사람들이 HTML을 배우는 걸 누가 막고 있었던 건 아님
  • 정말 그렇게 됐으면 좋겠음. WordPress나 MS Word 사용법을 수십 시간 배우는 대신, 일반인이 HTML을 배우는 것도 목표 달성에 실용적이고 유용한 대안이라고 느낀다면 어떤 일이 생길지 궁금함
  • OP임. 좋은 말 고마움. 이 자료가 비전문가의 손에 들어갔으면 좋겠음

• 잘 만들었음. 맨 텍스트를 쓰고 게시하면 바로 동작한다는 걸 먼저 보여준 뒤 HTML로 자연스럽게 넘어가는 방식이 정말 좋음
  글도 명확하고 환영하는 분위기이며 구조가 잘 잡혀 있어서 읽기 쉽고 즐거워 보임. HTML을 비전문가 손에 쥐여주는 건 좋은 목표라고 믿음
  피드백을 몇 가지 주자면, 문자 인코딩 관련 내용이 꽤 늦게 나오는 것 같음. 영어에 익숙하지만 자기 언어로 웹사이트를 쓰려는 사람이나 이름에 악센트가 있는 사람은 놀랄 수 있음. 이모지 같은 특수문자용이라고만 하기보다, 순수 ASCII가 아닌 대부분의 언어에는 필수라고 말하는 편이 좋겠음
  body, head, html 태그는 대부분 없어도 되지만, html은 lang 속성 때문에 접근성과 일부 브라우저의 잘못된 번역 제안 방지에 유용함
  VS Code는 원격 측정 때문에 조금 아쉽고, 작업에 비해 무겁고 복잡해 보임. Windows에서는 Notepad++가 좋은 선택이고, Linux에서는 기본 설치된 텍스트 편집기면 충분함. 나쁜 부분을 뺀 Codium도 있음. 대상 독자는 이런 나쁜 부분을 모르니, 자신도 모르게 스파이웨어를 설치하게 됨
  aria-current="page" 기능은 몰랐는데 앞으로 쓰기 시작할 것 같음

  • 그 태그를 넣으려면 애초에 텍스트 편집기에서 UTF-8로 저장하도록 설정해야 하지 않나? 예를 들어 Notepad는 Windows의 다른 것들처럼 기본적으로 UTF-16을 쓰지 않나?
  • 여기서 큰 복잡도는 사람들이 문자 인코딩 자체를 모른다는 데 있음. 그래서 index.html을 처음부터 UTF-8로 저장하리라고 기대하기 어렵다
    예를 들어 Windows Notepad는 기본적으로 활성 코드 페이지를 쓸 것임. 저장 문제까지 같이 다룰 수 있다면 이 내용이 더 눈에 띄게 들어가야 한다는 데 동의함

• 아이디어는 정말 좋고 이런 사이트가 더 많아지는 것도 반갑지만, 일반적인 비기술 사용자에게 기대하기 어려운 수준의 컴퓨터 활용 능력을 전제한다고 봄
  1단계가 “컴퓨터에서 위치를 골라 폴더를 만드세요. my-site 같은 이름을 붙이세요”로 시작하는데, 여기서 이미 대다수 사람을 잃을 수 있음
  매일 컴퓨터를 쓰면서도 이걸 어떻게 하는지 모르는 사람이 놀랄 만큼 많음

  • 이 스레드에서 이 점이 계속 강조되는 게 이상하게 느껴짐
    매일 컴퓨터를 쓰는 사람이 폴더 만드는 법을 모른다는 건 믿기 어렵다. 컴퓨터를 거의 안 쓰는 우리 엄마도 폴더와 파일이 무엇인지는 알 것임
    파일과 폴더가 뭔지 모르는 사람은 이 가이드의 즉각적인 수혜자가 되기 어렵지 않나? 그 전에 훨씬 더 기본적인 것들을 배워야 함
  • HN 사용자 상당수도 모바일 기기로 페이지를 봤을 가능성이 높고, 지시를 즉시 따라 할 상황은 아니었을 것 같음
  • 이게 사실이라면 매우 슬픔. 사람들이 이렇게까지 줄어든 건가? 나는 어린아이 때도 이 지시를 따라 할 수 있었고, 실제로 10살 때 내 웹사이트를 만들었음
    정말 그렇게 심각한 게 맞나, 아니면 사람들에게 너무 의심부터 하는 건 아닌가? 모든 걸 클라우드 앱으로 처리해서 이렇게 된 건가?
  • OP임. 나도 이 부분이 조금 걱정됐고, 소개에서 어느 정도 언급하긴 했지만 더 다뤄야 할 것 같음
    직접 파일과 폴더 만들기 입문 자료를 써서 호스팅할지, 아니면 그런 기초 자료를 링크할지 고민 중임

• 비기술자에게도 자기 웹사이트를 아주 쉽게 만들 수 있다고 여러 번 설득해 봤지만, 대개 농담으로 여기거나 엄청난 노력이 필요하다고 생각함
  다음에는 이 사이트를 보여주고 30분만 투자해서 그 시간 안에 무엇을 만들 수 있는지 보라고 해볼 생각임. “와, 내가 실제 웹에 뭔가를 게시했네!”라는 첫맛만 보면 빠져들 사람이 많을 거라고 앎
  @blakewatson: 사이트에 국제화를 추가하고 번역 풀 리퀘스트를 받을 계획이 있나?

  • 있음! 정말 그러고 싶음. README를 업데이트해야 하지만, 번역된 장을 /es 같은 하위 폴더에 두는 전략을 생각하고 있음
    Eleventy가 하위 경로에 따라 다른 내비게이션 메뉴를 생성하도록 설정할 수 있음
  • 학교에서 정말 이런 걸 가르쳐야 함. 고등학교와 대학에서 개인 웹사이트를 여러 개 만들었는데, 그냥 HTML과 약간의 CSS 정도였음
    모두의 첫 단계는 이래야 한다고 봄. 뭔가를 쓰고 결과를 빠르고 쉽게 볼 수 있는 훌륭한 방법임. 서버조차 필요 없음

• 왜 “Start coding already!”이지? “Start writing already?” 같은 표현이 더 낫지 않나?
  사람들이 사이트 만들기를 어려워하는 장벽의 절반은 코딩을 알아야 한다고 생각하기 때문이고, 그건 무섭게 느껴짐. 반면 자신이 무엇을 쓰고 싶은지는 알고 있어서 훨씬 접근하기 쉬움

  • “Get started already”로 바꿨음 :)
  • OP임. 오, 좋은 제안임. 웹 개발자 자아를 벗고 새 눈으로 보기가 어렵다. 의식적으로 그렇게 해보려 했는데도 그렇네

• 작은 HTML 파일에서 시작하고, 바로 NodeJS와 VS Code와 온갖 웹 개발 잡동사니를 설치하라고 하지 않는 점이 좋음

  • 많은 전문가가 다시 배워야 할 교훈임. 기본적인 텍스트와 이미지를 표시하는 데 수백 MB의 JavaScript가 실제로 필요하지 않음
    접근성과 우아한 실패는 너무 자주 무시됨

• 먼저 간단하게 배포부터 하게 만드는 튜토리얼 순서가 좋음
  Notepad/TextEdit로 평문 index.html을 만들고, Neocities 같은 곳에 배포한 뒤, 제목과 이미지로 콘텐츠를 추가함
  그다음에야 head와 body 등을 넣어 제대로 된 HTML로 만들고, Notepad/TextEdit에서 Visual Studio Code로 업그레이드하는 흐름임

  • 이미 알고 있겠지만 HTML5에서는 html, head, body가 선택 사항이라, 없어도 올바른 문서임

• 훌륭한 시도이고 실행도 아주 좋음. 다른 사람에게 공유하려고 북마크해 둘 생각임
  최근 내 웹사이트에 손으로 쓴 HTML만으로 내용을 추가하고, 과거 글도 천천히 옮기기로 했음. HTML은 직접적이고, 페이지별 임시 변경이 쉽고, 견고하다는 점이 좋음
  웹에 게시하는 거의 모든 시스템을 써본 끝에, 초기에 약간의 일이 더 들더라도 HTML이 그 일에 맞는 도구라는 결론을 냈음
  은퇴한 개발자로서 기분이 날 때는 Rust나 SQL, 임베디드 같은 걸 만지지만, 글을 쓰고 싶을 때는 그냥 쓰고 싶음. HTML은 어느 정도 그걸 가능하게 해줌
  더 많은 사람이 HTML을 단순한 빌드 대상이 아니라 작성할 문서로 본다면 시스템이 훨씬 단순해질 것 같음. 지금의 사고방식은 평균적인 컴퓨터/웹 사용자를 크게 둔화시켰고 개발자에게도 큰 골칫거리를 만들었음
  우리가 세상에 들여온 복잡성이 99%의 경우 누구에게 도움이 되는지 모르겠음. 이 자료가 우리를 다시 제자리로 밀어주는 계기 중 하나가 될 수 있음