<form> 태그 하나가 전자상거래를 열었다

시민 앱 제작 4차시 — 입력과 출력의 원천기술

읽기만 가능했던 초기 웹

1991~1993년의 웹은 읽기 전용이었습니다. 방문자는 텍스트를 읽고, 링크를 클릭해서 다른 페이지로 이동할 수 있었지만, 그것이 전부였습니다. 사용자가 웹사이트에 무언가를 입력할 방법이 없었습니다.

구글에 검색어를 입력하는 것, 쇼핑몰에서 주소를 적는 것, 은행에서 이체 금액을 넣는 것 — 이 모든 것이 불가능했습니다.

변화는 넷스케이프(Netscape)에서 시작되었습니다. 마크 앤드리슨(Marc Andreessen)이 이끄는 넷스케이프 팀은 HTML에 <form>, <input>, <select>, <textarea> 태그를 추가했습니다.

<form action="/order">

  이름: <input type="text" />

  주소: <textarea></textarea>

  <button>주문하기</button>

</form>

이 단순한 코드가 웹의 역사를 둘로 나눕니다. form 이전과 이후.

1994년 — 아마존 창업: 제프 베이조스가 온라인 서점을 열 수 있었던 이유는 고객이 주소와 결제 정보를 입력할 수 있었기 때문입니다.
1998년 — 구글 탄생: 래리 페이지와 세르게이 브린의 검색 엔진은 본질적으로 하나의 <input> 창입니다.
2004년 — 페이스북 탄생: "오늘 무슨 생각을 하고 있나요?"라는 <textarea>에서 시작되었습니다.

생각해 보세요

구글 홈페이지에는 입력창(input)과 버튼(button) 딱 2개만 있습니다. 전 세계 시가총액 1위 기업의 핵심 인터페이스가 form 태그 하나라는 사실이 놀랍지 않나요?

form으로 입력받은 데이터를 어딘가에 저장해야 합니다. 과거에는 반드시 서버가 필요했지만, 2009년 HTML5에서 localStorage가 등장하면서 상황이 바뀌었습니다.

localStorage는 브라우저 안에 있는 작은 창고입니다. 서버 없이도 데이터를 저장할 수 있고, 브라우저를 닫았다가 다시 열어도 남아있습니다. 바이브 코딩에서 "데이터를 저장해줘"라고 AI에게 말하면, 대부분 이 localStorage를 활용합니다.

수업에서 이렇게 활용하세요

4차시에서 수강생들이 입력폼을 만든 후, "방금 만든 이 입력창이 아마존의 시작이었습니다"라고 알려주세요. 자신이 만든 것이 세계적 서비스와 같은 기술이라는 사실에 놀라워합니다.