웹 개발, 눈에 보이지 않는 가치를 만드는 법

Day 2. Adding Another HTML Element

초보 개발자들은 종종 '화면에 보이는 것'에만 집중하는 실수를 범한다. 하지만 최근 강의에서 발견한 중요한 인사이트는 웹 개발의 본질이 눈에 보이는 것 너머에 있다는 점이다.

<h1>Hoon's challenge for Tuesday, May 6th</h1>
<p>Learn about the basics of web development - specifically dive into HTML & CSS.</p>

1. 코드 저장은 습관이 아닌 생존 기술이다.

Visual Studio Code에서 파일 이름 옆의 작은 흰 점은 단순한 표시가 아니다. 그것은 "당신의 변경사항이 아직 현실이 아니다"라는 경고다. 웹 개발에서 저장하지 않은 코드는 존재하지 않는 코드와 같다. Command+S(Mac) 또는 Control+S(Windows)는 개발자의 가장 기본적인 반사 행동이 되어야 한다.

2. 브라우저의 관용은 양날의 검이다.

태그 없이 작성한 일반 텍스트가 화면에 표시되는 것을 보고 놀랐다. 브라우저는 정말 관대하다. HTML 요소 없이도 텍스트를 표시해주기 때문이다. 하지만 이 관용은 유혹이자 함정이다. 즉각적인 시각적 결과에 현혹되지 말고, 올바른 의미론적 마크업을 사용해야 한다.

3. 눈에 보이지 않는 사용자를 위한 개발이 진정한 개발이다.

<p> 태그를 추가한 후 페이지를 다시 로드했을 때, 시각적으로는 아무런 변화가 없었다. 그러나 이 작은 변화는 시각 장애인과 검색 엔진에게는 엄청난 차이를 만든다. 이것이 웹 개발의 묘미다. 보이지 않는 가치를 만드는 일.

4. HTML은 '무엇'을 다루는 언어다.

우리가 만드는 사이트는 "일일 도전 과제"를 공유하는 웹사이트다. h1 태그는 "Hoon's challenge for Tuesday, May 6th"라는 제목을, p 태그는 실제 도전 내용을 담고 있다. 이 구조는 단순한 스타일링이 아니라, 콘텐츠의 '무엇임'을 정의하는 것이다.

<h1>Hoon's challenge for Tuesday, May 6th</h1>
<p>Learn about the basics of web development - specifically dive into HTML & CSS.</p>

5. MDN 문서는 사전이지 소설이 아니다.

MDN의 HTML 요소 참조 문서는 압도적일 수 있다. 이것을 처음부터 끝까지 읽으려고 하지 마라. 소설처럼 읽는 것이 아니라, 사전처럼 필요할 때 참조하는 자료다. 실제 코딩을 하면서 자연스럽게 자주 사용하는 요소들을 익히게 될 것이다.

웹 개발을 시작할 때는 눈에 보이는 화려함에 현혹되기 쉽다. 하지만 진정한 웹 개발자로 성장하려면, 보이지 않는 사용자와 기술을 위한 개발 방식을 체득해야 한다. 내가 처음 이 개념을 이해했을 때, 웹 개발은 단순한 코딩에서 의미 있는 커뮤니케이션으로 변화했다. 그리고 모든 코드는 저장 버튼을 누르는 것으로 시작한다는 것을 잊지 말자.