Tools Story for Makers
1997년 스튜디오에서 디자이너 민경이 말했습니다. “그냥 드래그하면 페이지가 만들어지네요?” Dreamweaver 화면을 본 개발자는 곧바로 코드 창을 확인하며 웃었죠. 같은 시기 팀들은 “소스 파일을 어디에 모아두지?”라며 CVS 서버를 세웠습니다.
2000년대엔 분산 버전 관리와 GitHub가 등장했고, 누구나 “브랜치를 파고 Pull Request로 리뷰하자”라고 외쳤습니다. 이어 Grunt와 Webpack이 “반복 작업은 자동화하자”, “모듈은 번들로 묶자”는 메시지를 남겼고, Netlify는 단추 한 번으로 전 세계에 배포하는 습관을 심었습니다.
이제는 Codespaces와 AI 동료가 “노트북 세팅 말고 바로 코드를 치자”, “설명만 하면 초안이 나온다”라고 속삭입니다. 아래 카드를 눌러 당시 제작자들이 어떤 문제를 겪었고, 어떤 도구로 해결했는지 가볍게 따라가 보세요.
연대기를 누르면 같은 화면에서 자세한 이야기를 읽을 수 있습니다.
1990s
WYSIWYG 편집기와 초기 버전 관리가 퍼지며, 디자이너와 개발자가 한 화면에서 결과를 맞춰 보기 시작했습니다.
2000s
Git과 GitHub가 분산 협업을 정착시키며, 오픈소스와 사내 팀 모두 Pull Request와 Issue 중심으로 움직이기 시작했습니다.
2010s
태스크 러너, 모듈 번들러, 자동 배포가 자리 잡으며, 복잡한 프런트엔드도 꾸준히 빌드·배포할 수 있게 됐습니다.
2020s
클라우드 IDE와 AI 파트너가 온보딩과 코드 작성을 거들며, 제작 흐름이 다시 한 번 재편되고 있습니다.
웹 제작 도구의 역사와 워크플로를 다룬 자료입니다. 버전 관리, 빌드, 배포, AI 협업을 더 탐구해 보세요.
1997
“그냥 드래그했는데 HTML이 따라오네!” Dreamweaver는 디자이너와 개발자가 한 화면을 공유하게 만들었습니다.
광고 에이전시 스튜디오에서 디자이너 민경은 Dreamweaver를 실행하고, 이미지를 드래그해 웹페이지를 구성했습니다. 오른쪽 창에 HTML 코드가 자동으로 생성되는 모습을 본 개발자 준호는 “디자이너가 만든 결과를 바로 조정할 수 있겠네요.”라고 말했습니다.
팀은 템플릿 기능으로 페이지를 복제했고, 고객에게 빠르게 시안을 보여줄 수 있었습니다.
Dreamweaver는 시각 편집과 코드 뷰를 결합해, 비개발자도 웹 제작에 참여할 수 있게 했습니다. 이 경험은 이후 웹 IDE가 시각화 기능을 제공하는 계기가 되었습니다.
1999
팀이 “중앙 서버에 올려두자”라며 CVS 호스팅을 쓰기 시작하자, 원격 협업의 문이 열렸습니다.
오픈소스 프로젝트 팀은 SourceForge에 리포지터리를 만들고, CVS 명령어로 코드를 내려받았습니다. 주말 사이 자택에서 수정한 코드를 커밋해, 월요일 회의 때 “누가 언제 무엇을 바꿨는지”를 함께 살펴볼 수 있었습니다.
웹사이트 유지보수 회사도 CVS를 도입해, 변경 이력을 고객에게 투명하게 공개했습니다.
CVS 호스팅은 중앙 서버를 통한 버전 관리 문화를 확산시켰습니다. 팀은 충돌 해결과 리뷰를 배우며, 이후 Git으로 자연스럽게 넘어갈 준비를 하게 되었습니다.
2005
“로컬에서 마음껏 브랜치를 파도 된다!” Git은 분산 버전 관리의 전환점을 만들었습니다.
리눅스 커미터들은 Git을 시험하면서 “속도가 믿기 어렵다.”며 감탄했습니다. 커밋과 브랜치를 로컬에서 마음껏 만들 수 있고, 나중에 공유 서버에 푸시하면 된다는 사실이 큰 자유를 줬습니다.
웹 에이전시는 Git을 도입해 기능별 브랜치를 만들고, 고객 리뷰가 끝나면 병합하는 워크플로를 구축했습니다.
Git은 스냅샷 기반 저장과 분산 구조를 제공해, 오프라인에서도 버전 관리를 가능하게 했습니다. 빠른 브랜치 전환과 병합 도구가 실험을 장려하며 현대 협업의 토대를 만들었습니다.
2008
개발자들이 “PR 보내줘”라고 말하기 시작한 건 GitHub가 리뷰와 Issue를 한 무대에 올렸기 때문입니다.
런칭 초기, 개발자 알렉스는 사이드 프로젝트를 GitHub에 올리고 친구에게 Pull Request로 리뷰를 요청했습니다. 브라우저에서 diff를 확인한 동료는 “이제 메일 첨부 없이도 리뷰가 되네요.”라고 말했다.
스타트업 팀은 Issue로 작업을 추적하고, Wiki로 문서를 공유하며 협업 파이프라인을 빠르게 정착시켰습니다.
GitHub는 Git 워크플로를 웹 인터페이스에 담아, 코드 리뷰와 문서 공유를 쉽게 했습니다. 이 모델은 이후 수많은 DevOps 도구가 따르는 기본 설계가 되었습니다.
2012
“버튼 한 번이면 린트·빌드 끝!” Grunt가 반복 작업을 스크립트로 묶는 문화를 열었습니다.
프런트엔드 팀은 Gruntfile을 작성해 SASS 컴파일과 이미지 압축을 한 번에 실행했습니다. 매번 반복하던 작업이 자동화되자 팀원 준수는 “Deploy 전에 체크리스트를 손으로 돌리지 않아도 되네.”라고 말했습니다.
커뮤니티는 수많은 Grunt 플러그인을 공유했고, 프로젝트마다 자동화 파이프라인이 표준처럼 자리 잡았습니다.
Grunt는 명령줄 태스크를 구성 파일로 선언하게 해, 프런트엔드 워크플로에 자동화를 도입했습니다. 이는 이후 Gulp, npm scripts, CI 파이프라인으로 이어지는 사다리를 만들었습니다.
2014
팀이 “코드 스플리팅으로 첫 화면을 줄이자”라 말하며 Webpack을 표준 번들러로 삼았습니다.
스타트업은 Webpack 설정을 도입해 자바스크립트 모듈과 스타일, 이미지까지 하나의 그래프로 묶었습니다. 제품 출시 전, 코드 스플리팅을 적용한 뒤 초기 번들이 줄어든 그래프를 보고 팀은 안도의 한숨을 내쉬었습니다.
오픈소스 생태계는 로더와 플러그인을 나누어 공유했고, Webpack은 프런트엔드 빌드의 기본 도구로 자리 잡았습니다.
Webpack은 의존성 그래프를 분석해 번들을 생성하고, 동적 로딩을 지원했습니다. 복잡한 애플리케이션을 효율적으로 배포하려는 요구에 부합하며, 모듈 시스템의 중심이 되었습니다.
2016
“PR에 미리보기 링크가 따라오네?” Netlify는 깃 연동 배포를 버튼 한 번으로 만들었습니다.
콘텐츠 팀은 GitHub 저장소를 Netlify에 연결하고, Pull Request가 열릴 때마다 미리보기를 자동 생성했습니다. 마케터는 “링크만 클릭하면 새 버전을 볼 수 있다.”며 검수 속도가 빨라졌다고 전했습니다.
엔지니어는 서버 구성 없이도 폼 핸들링과 Edge 함수가 작동하는 것을 확인했습니다.
Netlify는 빌드 파이프라인, CDN, 서버리스 기능을 묶어 JAMstack 워크플로를 보급했습니다. 배포 자동화가 쉬워지면서, 소규모 팀도 안정적으로 글로벌 서비스를 운영할 수 있게 되었습니다.
2021
입사 첫날 “브라우저만 열면 VS Code가 뜬다”는 놀라움이 Codespaces 도입으로 퍼졌습니다.
신규 입사자는 노트북 설정 없이 Codespaces를 열고, `npm install`이 이미 끝난 상태에서 작업을 시작했습니다. 리드 개발자는 “환경 맞추는 시간을 하루 이상 줄였어요.”라고 보고했습니다.
페어 프로그래밍 중에는 Live Share를 활용해 브라우저에서 바로 코드를 편집하며, 리뷰 사이클이 단축됐습니다.
Codespaces는 컨테이너 기반 개발 환경을 즉시 제공해, 온보딩과 협업을 단순화했습니다. 인프라 관리 없이도 동일한 개발 환경을 재현할 수 있다는 점이 큰 장점으로 꼽혔습니다.
2023
“함수 설명만 했는데 테스트가 짜였어!” AI 코드 동료가 에디터 속 파트너로 자리 잡았습니다.
팀은 에디터에 AI 플러그인을 설치하고, 함수 설명을 입력해 자동 완성 제안을 받았습니다. 주니어 개발자는 “테스트 코드 뼈대를 바로 생성해 줘서 시작이 쉬워졌어요.”라고 말했다.
코드 리뷰 단계에서 AI가 변경 요약을 작성하며, 시니어 리뷰어는 더 중요한 로직 검증에 집중할 수 있게 됐습니다.
AI 보조 도구는 자연어 이해와 코드 생성을 결합해, 개발자의 반복 작업을 줄였습니다. 이는 생산성과 코드 품질 개선에 대한 기대를 높이며, 웹 제작 과정 역시 빠르게 변화시키고 있습니다.
