GN⁺: HTML First
(html-first.com)HTML First 원칙 소개
- 현대 웹 브라우저의 기본 기능 활용
- HTML 속성 구문의 극단적인 단순성 활용
- 웹의 ViewSource 기능 활용
HTML First의 목표
- 웹 소프트웨어 코드베이스 작업 가능 인원 확대
- 개인적으로는 더 많은 사람들이 웹 프로그래머가 되어 수입 증가
- 비즈니스 측면에서는 소프트웨어 개발 비용 감소 및 인력 고용 자원 절약
HTML First의 두 번째 목표
- 웹 소프트웨어 개발을 더 즐겁고 원활하게 만듦
- 도구와 프레임워크 마스터링에 수년 걸리는 대신 HTML First 원칙으로 빠른 숙련도 달성
HTML First의 실현 방법
- HTML의 이해가 쉽다는 점을 인정하고, 내용과 구조 정의뿐만 아니라 스타일링과 행동 설정에 HTML을 기반으로 사용
원칙: Vanilla 접근 방식 선호
- 스타일링과 행동 설정에 HTML 속성 사용
- HTML 속성을 활용하는 라이브러리 사용
- 빌드 단계 피하기
- "Naked" HTML 선호
- View-Source 친화적인 접근 방식 사용
브라우저 기본 지원 기능 활용
- 외부 프레임워크보다 "vanilla" 접근 방식으로 기능 달성
- 라이브러리나 프레임워크 추가 전에 순수 HTML/CSS로 가능한지 확인
스타일과 행동을 HTML 속성으로 정의
- 스타일링은 Tailwind나 Tachyons 같은 SPC 라이브러리로 가능
- 행동은 hyperscript, Alpine 등의 라이브러리 사용
- HTML이 복잡해 보일 수 있으나 다른 개발자가 이해하고 변경하기 쉬움
HTML 속성을 활용하는 라이브러리 사용
- 자바스크립트나 사용자 정의 구문을 중심으로 한 라이브러리보다 HTML 속성을 활용하는 라이브러리 사용 권장
빌드 단계 피하기
- 파일 변환을 요구하는 라이브러리는 유지보수 부담 증가, ViewSource 기능 저해
- HTML First 라이브러리 사용 시 추가 CSS와 JS 필요성 최소화
"Naked" HTML 선호
- 백엔드 구현에 가장 적용 가능한 원칙
- HTML에 익숙한 개발자가 백엔드 프레임워크를 모르더라도 뷰 파일 이해 가능
View-Source 기능 유지
- 초기 웹의 매력은 코드를 "엿보고" 웹 페이지의 일부를 이해하는 것
- HTML First 원칙을 따르는 사이트에서는 ViewSource 기능을 다시 확보
마무리
- 이 사이트에서 설명하는 관행과 원칙은 여전히 업계 전체에서는 비주류
- 이러한 아이디어에 공감하는 사람들을 찾고 연결하고자 함
GN⁺의 의견
이 글에서 가장 중요한 것은 웹 개발의 접근성과 유지보수성을 향상시키기 위한 HTML First 원칙의 도입임. 이 원칙들은 웹 개발을 더 쉽고 빠르게 만들며, 더 많은 사람들이 웹 프로그래밍에 참여할 수 있게 함으로써 개인과 비즈니스 모두에게 이점을 제공함. 이러한 접근 방식은 웹 개발의 복잡성을 줄이고, 코드의 가독성을 높이며, 개발자 커뮤니티 내에서 지식 공유와 협업을 촉진할 수 있는 잠재력을 가지고 있어 흥미롭다.
Hacker News 의견
- 이론적으로나 간단한 예시에서는 재미있지만, 이 원칙들이 큰 프로젝트에 어떻게 적용되고 차이를 만들었는지 보여주는 사례가 필요함.
- 웹 플랫폼을 최대한 활용하고 복잡성을 줄이는 것에 찬성하지만, 제시된 원칙들이 실제로 복잡성을 줄일 것인지에 대해 회의적임.
- HTML의 기본 기능을 사용하는 것은 좋지만, 10년 전에도 그렇고 지금도 실용적이지 않으며, htmx 등이 React 같은 무거운 솔루션보다 낫다고 느끼지 않음.
- 드롭다운, 멀티셀렉트, 날짜 선택기와 같은 기능을 구현할 때 브라우저 간 일관성이 없고 스타일링이 제한적이어서 내장 HTML 요소만으로는 충분하지 않음.
- 예시가 약하며, 인라인 HTML 속성으로 스타일과 동작을 정의하는 것이 복잡해질 수 있음.
- 필요한 라이브러리를 사용할 때는 자바스크립트나 사용자 정의 문법 대신 HTML 속성을 활용하는 라이브러리를 사용하는 것에 동의함.
- HTML 마크업만으로 구성된 SaaS 플랫폼 개발에 이 철학이 잘 맞음.
- 복잡한 웹사이트를 구축하는 과정을 겪지 않은 사람이 제시한 안티패턴이며 나쁜 조언으로 보임.
- 사용자가 소스 보기를 통해 이해할 수 있어야 한다는 주장에 동의하지만, 웹 앱의 경우 타입 언어를 사용하는 것이 바람직함.
- "행동의 지역성"은 관심사의 분리에 반하는 모호하게 정의된 규칙이며, CSS를 "거리의 으스스한 작용"이라고 부르는 것은 과장된 표현임.