7세 딸이 HTML로 만든 웹사이트

 (naya.lol)
2P by GN⁺ | ★ favorite | 댓글 1개
  • 첫 화면은 Animals 제목 아래 동물 페이지 링크를 모아 둔 단순한 HTML 링크 허브로 구성됨
  • 동물 섹션에서는 cats, dogs, cheetahs 페이지로 이동할 수 있음
  • 별도의 Technology 섹션도 있어 tablet과 computer 페이지 링크가 함께 배치됨
  • 각 링크는 “click here to go to the … page” 형식의 문장형 링크로 제공됨
  • 확인 가능한 본문은 첫 화면의 링크 구조에 한정되며, 하위 페이지 내용은 포함되어 있지 않음

첫 화면의 링크 구조

Technology 섹션

  • 별도 제목으로 Technology가 있음
  • 기술 관련 페이지로 이동하는 링크가 두 개 있음

확인 가능한 범위

  • 본문에서 확인되는 내용은 첫 화면의 링크 목록임
  • 링크 대상은 상대 경로로 제공되며, 하위 페이지의 실제 내용은 포함되어 있지 않음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 우리 같은 고참들이 몇 년, 몇십 년 동안 시큰둥해진 기술 잡동사니를 어린아이가 즐겁게 가지고 노는 걸 보니 좋음. 앞으로도 계속 신나게 즐겼으면 좋겠음
    SICP 헌정 페이지의 Alan J. Perlis 인용처럼, 컴퓨터 과학에서는 컴퓨팅의 재미를 지키는 게 정말 중요하다고 봄. 우리는 기계를 완벽하고 오류 없이 성공적으로 쓰게 할 책임이 있다기보다, 기계를 확장하고 새로운 방향으로 밀어붙이며 재미를 집 안에 남겨둘 책임이 있음

    • 직장에서의 소프트웨어 개발 재미가 그리움. 20년 전쯤 시작했을 때는 새로 배운 걸 신나서 다른 사람에게 달려가 알려주곤 했는데, 지금은 다들 음울하고 바쁘게 갈리며 “가시성 관리”에 몰두하느라 즐거움을 드러내지 않음
      나와 친구들이 나이 들어서 그런 거라면 그러려니 하겠지만, 지금의 젊은 동료들도 똑같이, 아니 더 음울해 보임. 예를 들어 Parquet 파일에서 뭔가를 꺼내야 해서 동료가 나중에 스크립트를 쓰겠다고 하길래, duckdb를 띄워 1분도 안 돼 답을 보여줬더니 “처음 보네요. 유용해 보입니다”라는 단조로운 반응뿐이었음. “와 멋지다”나 “좋네요”도 아니고, 존재를 알게 된 게 오히려 더 기분 나쁜 듯했음
    • Steve Jobs 영화의 인용이 떠오름. 지구에서 가장 효율적인 동물은 콘도르이고, 가장 비효율적인 동물은 인간이지만, 자전거를 탄 인간은 가장 효율적인 동물이 된다는 내용임
      제대로 된 컴퓨터, 즉 친근하고 쉬우며 보기 흉하지 않고 책상 위에 아름답게 놓이는 컴퓨터는 마음을 위한 자전거가 될 수 있고, 개인용 컴퓨터가 사람과 사람을 잇는 컴퓨터가 될 수 있다는 말이었음
    • Swift에서 변수명에 Emoji를 못 쓰게 하자는 제안이 나왔을 때, 코드 안에서 변덕, 답답함, 유머 같은 감정을 표현하지 못하게 정하는 건 너무 건방지다고 답했음
      iPad의 Playgrounds를 쓰는 8살 아이가 그냥 웃기다는 이유로 변수 이름을 :pig:라고 못 짓게 할 필요는 없음. 모든 것에서 즐거움을 짓밟을 필요는 없음
    • 이 재미를 계속 살려둘 수 있으면 좋겠음. Knuth의 최신 권에는 퍼즐이 가득해서 훌륭함
      그런데 HN의 다른 상위 스레드에서는 하루 종일 책상에 앉아 문제를 풀면서도 인구의 99.9%보다 더 많이 못 번다고 불평하는 사람들이 보임. 가끔은 그런 사람들이 이 일을 할 자격이 없는 것 같다는 생각도 듦
    • 좋은 인용임. 예전에는 Kraftwerk 커버에 “ITS MORE FUN TO COMPUTE”라고 적힌 바탕화면을 쓰곤 했는데 지금은 잃어버림
      이런 리마인더가 정기적으로 필요함. 우리 아이는 1년 동안 뭔가를 얻으려면 타이핑해야 했던 덕분에 명령줄을 익히는 중임. 나중에 컴퓨터를 좋아하지 않게 되더라도, 최소한 타자라는 유용한 기술을 배웠으니 아쉬워하지 않을 것 같음

  • 7살이었다면 딱 이렇게 만들었을 것 같음. CSS와 시맨틱 마크업의 장점이 뭐든, 이런 것들은 재미를 방해함. 나중에 배워도 됨

    • 이 방식의 문제는 적절한 현대 HTML과 CSS가 갖는 의미와 스타일의 분리가 없다는 점임
      저 난장판을 google.com 같은 최첨단 웹페이지의 우아한 의미 구조와 비교해보면 됨
    • 완전 동의함. 프론트엔드 개발자는 아니고, 검색 기록에는 “div 가운데 정렬하는 법”의 여러 변형이 있음. 검색어에 화난 욕설이 붙은 버전도 여러 개 있음
    • 이게 아직도 동작해서 정말 반가움. 나도 이렇게 배웠음
    • 오늘 처음 알았는데 center 태그가 있고 background를 인라인 속성으로 줄 수 있구나
    • 반대로, 재미는 CSS에서 시작됨

  • 너무 좋음. 정말 잘 만들었음
    지난 몇 년 동안 미국 네브래스카 기반 비영리단체 Girls Code Lincoln을 만들어 어린 여자아이들에게 코딩을 가르쳤는데, 이게 정말 마음에 듦. 아이에게 공유해볼 만한 나이대에 맞는 자료들이 있음
    학생들이 STEM 분야 여성들을 인터뷰한 YouTube 시리즈: https://www.youtube.com/playlist?list=PL-32uv45Ln4VJGhVr_jr6...
    역사 속 STEM 여성과 현재 STEM 여성에 대해 이야기한 팟캐스트: https://girlscodelincoln.buzzsprout.com/
    필요하면 언제든 연락해도 됨: aakriti@TheNonprofiting.Org / info@GirlsCodeLincoln.org
    딸이 STEM에 관심을 갖게 하는 방법에 대한 TED 발표: https://www.youtube.com/watch?v=guoLTuW8AX4&t=10s

    • 추가로 Pixar에는 Pixar in a Box라는 꽤 좋고 탄탄한 코딩 수업이 있음: https://www.khanacademy.org/computing/pixar
      아이 나이에 딱 맞는 자료인지는 모르겠지만, 나중을 위해 챙겨두면 좋을 듯함. 계속 흥미를 유지할 수 있게 필요한 자료를 찾는 데 기꺼이 도와줄 수 있음

  • 페이지가 빠르게 뜨고, 코드에 눈에 띄는 버그가 없고, 구성은 일관되고 말이 되며, 글은 간결하면서도 정보와 작성자의 고유한 목소리를 전달함
    후하게 봐도 인터넷의 95%보다 더 잘 만든 웹사이트임. 아이의 기개가 마음에 듦. 훌륭한 작업임

  • “고양이는 약 2피트라서 키의 여섯 배면 약 12피트입니다. 그건 아주 무서운 고양이일 것입니다”
    맞음. 사회가 원하는 방식으로 완전히 다듬어지기 전의 마음이 탐험하는 경로에는 뭔가 멋진 게 있음. 잘했음

    • “가장 흔한 개 색깔은 아마 갈색이나 검정색입니다”
      gPT보다 더 믿음이 감
    • 그 부분에서 빵 터졌음. 머릿속에는 “맞아, 진짜 무섭겠네!”밖에 안 떠올랐음. 이 사이트 최고임
    • 표현이 아주 좋음. 7살은 아마 평생 중 가장 진짜 자기 자신에 가까운 시기일 것 같음

  • “컴퓨터는 아주 중요한 기술 형태입니다. 컴퓨터가 없으면 웹사이트도, Roblox studio도, 아무것도 없습니다”
    아이들이 세상을 보는 방식이 정말 사랑스럽지 않나. 너무 귀여움

    • 지금 그런 기계로 집에서 모든 청구서를 내고 있음. 정말로 그게 없으면 아무것도 없음. Naya 말에 거짓이 없음
    • 이 문장에서 완전히 터졌음. 너무 좋음

  • 아이가 어렸을 때 만든 작업 기록으로 HTML 파일을 백업해두길 권함. 나중에 가족의 보물이 될 것임
    가족 도메인 아래에 넣어 보관해도 좋음

    • 1995년쯤 만들었던 내 웹사이트 백업이 있었으면 좋겠음. 하지만 어쩌면 기억이 평범한 진실보다 더 근사할지도 모르겠음
    • GeoCities 취급을 받기 전에 꼭 해두는 게 좋음. 어릴 때 만든 것들을 백업하지 않은 게 후회됨
    • 더 나아가 웹사이트를 출력하고, 코드도 출력하면 좋음
    • “가계도? 아니, 우리 가족은 성취와 추억의 git 로그가 있어”

  • 이거 정말 좋음. 이 작은 사이트가 내가 종종 그리워하는 인터넷의 시절로 데려다 줌
    90년대에 미대를 막 졸업하고 포트폴리오 웹사이트가 필요하다고 생각해서 Borders Books에 가 HTML과 Netscape Navigator 내장 도구로 사이트 만드는 법을 다룬 4~5인치 두께의 책을 샀음. 일주일 정도에 걸쳐 원글 사이트와 기능적으로 아주 비슷한 사이트를 만들었고, 차이는 콘텐츠였음
    홈페이지에는 내가 그린 그림 하나를 올렸는데, 거대한 체구의 남자가 조크스트랩을 입고 교활한 미소로 보는 색연필 그림이었음. 들어가려면 그의 배를 클릭해야 했고, 그때 처음으로 이미지 맵을 배웠음. 클릭하면 “오, 간지러워”라고 말한 뒤 포트폴리오와 내비게이션으로 들어갔음
    전부 HTML 4였고 JavaScript도, 쿠키도, 폼도 없는 아주 기본적인 것이었음. 그런데 그 사이트 덕분에 Adobe 경쟁사였던 Micrografx에서 디자인 분야 첫 진짜 직장을 얻었음. 나머지는 역사임. 고마워, Netscape

  • “컴퓨터는 아주 중요한 기술 형태입니다. 컴퓨터가 없으면 웹사이트도, Roblox studio도, 아무것도 없습니다. 컴퓨터가 없으면 태블릿을 써야 합니다. 태블릿은 별로 유용하지 않습니다. 음, 컴퓨터가 할 수 있는 일을 하려면요”
    아멘

    • “태블릿은 매우 유용한 기술 형태입니다”
      너무 혼란스러움. 대체 무엇이 현실인가

  • 아주 좋은 웹사이트임. 빠르고, 단순한 사용자 경험, JavaScript 없음, 콘텐츠에 집중함

    • 전체 팀이 붙어 만든 “전문적으로 개발된” 웹 대부분보다 성능과 접근성이 쉽게 더 나음
      Naya가 Reddit의 엔지니어링 부사장을 맡아야 함. 이 접근법을 쓰면 사이트가 실제로 개선될 것임
    • 우리 프론트엔드 개발팀이 쓰는 어떤 것보다 훨씬 용량 효율적임. React 앱을 빌드하는 Docker 이미지가 6GB였음. “우리 잘못이 아니라 NPM 탓”이라더라
      콘텐츠도 유익함
답변달기