2004년 4월 1일, 만우절의 진실: "이거 농담 아니야?"
2004년 4월 1일 목요일.[^72-1] Google이 기자 회견을 열었습니다. 무료 이메일 서비스를 시작한다고요. 이름은 Gmail.
사람들은 의심했습니다.[^72-1] 왜냐고요? 첫째, 그날은 만우절이었습니다. Google은 만우절 장난으로 유명했거든요. 2000년엔 "MentalPlex"라는 걸 발표했죠—사용자의 마음을 읽어서 검색 결과를 보여준다는 거였어요.[^74-1] 같은 날, Google은 또 다른 발표를 했습니다. 달에 "Google Copernicus Center"를 만들어 직원들을 보낸다는 거였죠.[^72-1]
그런데 Gmail 발표의 내용이... 너무 터무니없었어요.
1GB의 무료 저장공간.[^71-1][^73-1]
당시 상황을 이해하려면, 2004년의 이메일 서비스가 어땠는지 알아야 합니다. 시장을 지배하던 서비스는 Yahoo Mail과 Microsoft의 Hotmail이었죠.[^73-1] Yahoo Mail은 4MB, Hotmail은 2MB를 제공했습니다.[^74-1] 그러니까 Gmail은 500배 더 많은 공간을 준다는 거였어요.[^73-1]
The New York Times의 John Markoff가 전날(3월 31일) 이 소식을 먼저 보도했지만,[^73-1] 4월 1일 날짜가 찍힌 공식 보도자료를 보고 사람들은 생각했죠: "아, 이거 정말 잘 만든 만우절 장난이네."[^72-1]
심지어 Google의 보도자료 톤도 Google 특유의 귀엽고 격식 없는 스타일이었어요.[^77-1] "Heck, yeah"라는 표현이 나오고, M&Ms 이야기가 나오고... 진지하게 받아들이기 어려웠죠.
그런데 진짜였습니다.[^72-1]
사실 Google도 준비가 안 됐었다
뒷이야기를 들어보면 더 재밌습니다. Gmail의 첫 제품 매니저 Brian Rakowski는 이렇게 말했어요:[^73-1][^79-1]
"Sergey (Brin)가 가장 신나했어요. 궁극의 만우절 장난은 4월 1일에 미친 것 같은 걸 출시하고 4월 2일에도 여전히 존재하게 하는 거라고요."
하지만 Google은 실제로 수백만 명에게 안정적인 이메일 서비스와 1GB 공간을 제공할 인프라가 없었습니다.[^72-1][^73-1] Paul Buchheit(Gmail의 창시자)는 이렇게 회상했죠:[^73-1]
"우리는 출시할 때 Catch-22 상황에 빠졌어요. 출시할 수 없다고 생각해서 많은 머신을 받을 수 없었고, 머신이 없어서 출시할 수 없었죠."
결국 Gmail은 아무도 원하지 않던 오래된 Pentium III 컴퓨터 300대에서 돌아갔습니다.[^72-1][^73-1] 그래서 제한된 베타 테스트만 할 수 있었어요. 처음엔 Google 외부 사용자 1,000명만 초대했습니다.[^71-1][^72-1]
그런데 이게 오히려 마케팅 대박이 됐습니다.[^72-1] "초대장"이 엄청난 가치를 갖게 됐거든요. eBay에서 $150에 팔렸을 정도예요.[^74-1]
Georges Harik(당시 Google 신제품 담당)는 말했습니다:[^72-1]
"모두가 더욱더 원하게 됐어요. 테크 역사상 최고의 마케팅 결정 중 하나로 평가받지만, 사실 좀 의도치 않은 거였죠."
왜 Gmail은 충격이었나: "페이지가 새로고침되지 않는데?"
하지만 1GB 저장공간보다 더 혁명적인 게 있었습니다. Gmail의 속도였죠.[^73-1]
당시 Yahoo Mail과 Hotmail이 어땠는지 기억해보세요.[^73-1] 1990년대 중반에 만들어진 이 서비스들은 일반 HTML로 작성된 느린 인터페이스를 가지고 있었습니다.[^73-1][^75-1] 모든 액션—메일 하나 열기, 삭제하기, 폴더 이동하기—이 전체 웹 페이지 새로고침을 필요로 했어요.[^73-1] Windows나 Mac 프로그램의 빠른 반응성과는 비교도 안 됐죠.[^73-1]
Paul Buchheit는 다르게 접근했습니다.[^73-1][^76-1]
"Buchheit는 HTML의 한계를 고도로 인터랙티브한 JavaScript 코드를 사용해서 우회했습니다. 그래서 연속된 웹 페이지가 아니라 소프트웨어처럼 느껴지게 만들었죠."[^73-1]
이 접근 방식은 곧 AJAX라는 이름을 얻게 됩니다—Asynchronous JavaScript and XML.[^73-1] 오늘날 모든 웹 앱이 이렇게 만들어지지만, Gmail이 이 기술을 개척하던 당시엔 작동할지조차 확실하지 않았어요.[^73-1][^80-1]
Gmail이 보여준 것들
사용자들은 놀라운 경험을 했습니다:
1.
스레드 방식 대화: 관련 이메일들이 그룹화돼서 보였어요.[^74-1] 다른 서비스들의 시간순 나열과는 완전히 달랐죠.
2.
강력한 검색: Google의 검색 기술이 이메일에 적용됐습니다.[^71-1][^74-1] 키워드로 즉시 이메일을 찾을 수 있었어요. 폴더 어디에 넣었는지 기억할 필요가 없었죠.[^71-1]
3.
키보드 단축키: 'j'로 아래, 'k'로 위—vi 키바인딩을 사용한 거였어요.[^71-1] 파워 유저들은 열광했습니다.
4.
그리고 무엇보다... 속도: 페이지 새로고침 없이 모든 게 즉시 일어났습니다.[^71-1][^74-1]
Slate의 Will Oremus는 2014년 회고 기사에서 이렇게 썼습니다:[^75-1]
"Gmail은 AJAX로 디자인됐는데, 이건 웹 앱이 데스크톱 애플리케이션만큼 부드럽게 돌아갈 수 있다는 걸 우리에게 가르쳐줬습니다."
사람들은 충격을 받았습니다. "이게... 웹에서 가능하다고?"
2005년 2월 18일, 이름이 붙다: "AJAX"
하지만 2005년 초까지도, 이 기술은 이름이 없었습니다.[^88-1] Google의 여러 제품들—Gmail, Google Maps (2005년 2월 출시), Google Suggest—이 비슷한 방식으로 작동하고 있었지만, 개발자들은 그저 "JavaScript 해킹" 정도로 부르고 있었죠.[^78-1]
그때 Jesse James Garrett이 등장합니다.[^81-1]
Garrett은 웹 컨설팅 회사 Adaptive Path의 사용자 경험 전략 디렉터였습니다.[^81-1][^84-1] 그는 2005년 2월 18일, "Ajax: A New Approach to Web Applications"라는 에세이를 Adaptive Path 웹사이트에 게시했습니다.[^81-1][^82-1][^88-1]
에세이는 이렇게 시작했습니다:[^81-1][^89-1]
"If anything about current interaction design can be called 'glamorous,' it's creating Web applications."
최근 인터랙션 디자인에서 '매력적'이라고 부를 수 있는 게 있다면, 그건 웹 애플리케이션을 만드는 것입니다.
하지만 그는 인정했죠. 웹 인터랙션 디자이너들은 데스크톱 소프트웨어를 만드는 동료들을 부러워하고 있었다고요.[^81-1][^89-1] 데스크톱 애플리케이션은 웹에서 도달할 수 없을 것 같은 풍부함과 반응성을 가지고 있었거든요.
Garrett은 Google Suggest와 Google Maps를 예시로 들었습니다:[^85-1][^89-1]
"Watch the way the suggested terms update as you type, almost instantly. Now look at Google Maps. Zoom in. Use your cursor to grab the map and scroll around a bit. Again, everything happens almost instantly, with no waiting for pages to reload."
타이핑하면 제안 단어들이 거의 즉시 업데이트되는 걸 보세요. 이제 Google Maps를 보세요. 확대해보세요. 커서로 지도를 잡고 스크롤해보세요. 다시 말하지만, 모든 게 거의 즉시 일어나고, 페이지 새로고침을 기다릴 필요가 없습니다.
그리고 그는 이 접근 방식에 이름을 붙였습니다: AJAX.[^81-1][^88-1]
"The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what's possible on the Web."
이 이름은 Asynchronous JavaScript + XML의 줄임말이고, 웹에서 가능한 것의 근본적인 변화를 나타냅니다.
AJAX는 기술이 아니다
Garrett은 강조했습니다. AJAX는 하나의 기술이 아니라고요:[^81-1][^89-1]
"Ajax isn't a technology. It's really several technologies, each flourishing in its own right, coming together in powerful new ways."
AJAX는 여러 기술의 조합이었습니다:
•
XHTML과 CSS (표현)
•
Document Object Model (동적 표시와 상호작용)
•
XML과 XSLT (데이터 교환과 조작)
•
XMLHttpRequest (비동기 데이터 검색)
•
JavaScript (모든 것을 결합)
중요한 건, 이 기술들은 전부 이미 존재하고 있었다는 겁니다.[^78-1] XMLHttpRequest는 1998년 Microsoft가 Internet Explorer 5에 ActiveX 컨트롤로 넣었던 거였어요. 몇 년간 거의 아무도 주목하지 않았죠.[^78-1]
Garrett의 에세이는 폭발적인 반응을 일으켰습니다.[^81-1][^86-1] 한 달 후인 3월 13일, Adaptive Path는 Q&A를 추가해야 했어요. 너무 많은 질문이 쏟아졌거든요.[^81-1]
Q: Adaptive Path나 Google이 AJAX를 발명했나요?
A: 둘 다 아닙니다. Google의 최근 제품들은 단지 AJAX 애플리케이션의 가장 유명한 예일 뿐입니다.[^81-1]
Q: AJAX는 XMLHttpRequest의 또 다른 이름인가요?
A: 아니요. XMLHttpRequest는 AJAX의 일부일 뿐입니다.[^81-1]
InfoWorld의 2006년 기사는 이렇게 보도했습니다:[^86-1]
"The essay unleashed a flood of feedback and commentary. AJAX rapidly passed into common developer lingo as software companies rushed out AJAX toolkits and press releases highlighting their own AJAX-compatible architectures."
이 에세이는 피드백과 논평의 홍수를 일으켰다. AJAX는 빠르게 개발자들의 일상 용어가 됐고, 소프트웨어 회사들은 AJAX 툴킷과 자신들의 AJAX 호환 아키텍처를 강조하는 보도자료를 쏟아냈다.
Garrett 본인은 이렇게 말했습니다:[^86-1]
"The upsurge of interest in AJAX applications is not driven by anything technological. It's all about sophistication in understanding what the technology can do. That sophistication is something that sometimes takes a few years to develop."
AJAX 애플리케이션에 대한 관심 급증은 기술적인 것 때문이 아닙니다. 이 기술이 무엇을 할 수 있는지 이해하는 성숙도에 관한 거죠. 그런 성숙도는 때로 개발하는 데 몇 년이 걸립니다.
하지만 여전히: 서버가 HTML을 보낸다
여기서 중요한 걸 짚고 넘어가야 합니다. AJAX는 아직 "서버 사이드 렌더링"의 반대가 아니었어요.
Gmail을 다시 생각해보세요. 사용자가 이메일 목록을 스크롤하면 무슨 일이 일어날까요?
1. JavaScript가 XMLHttpRequest로 서버에 요청
2. 서버가 데이터 처리하고... HTML 조각을 생성
3. JavaScript가 그 HTML을 받아서 DOM에 삽입
4. 페이지 일부만 업데이트 (전체 새로고침 없음)
Plain Text
복사
서버는 여전히 HTML을 만들고 있었습니다.[^75-1] 차이는? 전체 페이지 대신 **조각(fragment)**을 보낸다는 거였죠.
당시 개발자들의 전형적인 PHP 코드를 보면:
<?php
// ajax-get-emails.php
header('Content-Type: text/html; charset=utf-8');
$emails = getEmailsFromDatabase($_GET['folder']);
foreach ($emails as $email) {
echo "<div class='email-item'>";
echo "<span class='from'>" . htmlspecialchars($email['from']) . "</span>";
echo "<span class='subject'>" . htmlspecialchars($email['subject']) . "</span>";
echo "</div>";
}
?>
PHP
복사
// 클라이언트 JavaScript
function loadEmails(folder) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'ajax-get-emails.php?folder=' + folder);
xhr.onload = function() {
document.getElementById('email-list').innerHTML = xhr.responseText;
};
xhr.send();
}
JavaScript
복사
보이시나요? 서버가 여전히 HTML을 렌더링하고 있습니다. 클라이언트는 그걸 받아서 DOM에 넣기만 하죠.
"그럼 이게 SSR 아닌가요?"
맞습니다. 여전히 SSR이었어요. 단지 부분적(partial) SSR이었을 뿐이죠.
다음 장 예고:
2006년, 한 개발자가 생각했습니다. "매번 서버에서 HTML 조각 받는 것도 귀찮은데... 서버는 데이터(JSON)만 주고, HTML은 클라이언트에서 만들면 안 될까?"
그리고 jQuery가 등장합니다.
[^71-1]: BillPetro - History of Gmail: 20 Years Ago
[^72-1]: Wikipedia - History of Gmail
[^73-1]: TIME - How Gmail Happened
[^74-1]: Michael R. Cronin - Gmail's Grand Debut
[^75-1]: Slate - Gmail's 10th birthday
[^76-1]: FIRSTonline - It Happened Today - April 1, 2004
[^77-1]: Washington Post - April Fools' Day: When Google introduced Gmail
[^78-1]: TechSpot - Happy Birthday: Gmail turns 10 years old
[^79-1]: Eyerys - 10 Years of Gmail
[^80-1]: Inc. - Odd Facts You May Have Forgotten About Gmail
[^81-1]: Adaptive Path - Ajax: A New Approach to Web Applications (PDF)
[^82-1]: CSDN Blog - Ajax: A New Approach to Web Applications
[^85-1]: DocsLib - Ajax: a New Approach to Web Applications
[^86-1]: InfoWorld - Web 2.0: AJAX underpins services
[^88-1]: Computerworld - AJAX
[^89-1]: AuthorZilla - Ajax: A New Approach to Web Applications
