2025년 웹 개발은 더 빠르게 진화하고 있습니다. 오늘날 개발자는 단순한 기능 구현을 넘어 사용자 경험 혁신과 비즈니스 성과 극대화에 기여하도록 요구받는데요. AI 개발 도구, JAMstack, Utility-First CSS 프레임워크, WebAssembly, 음성 사용자 인터페이스(VUI)는 2025년 웹 개발을 이끄는 핵심 트렌드로 주목받고 있습니다. 이 글에서는 다섯 가지 핵심 기술의 올해 동향과 전망을 살펴보겠습니다.

AI 개발 도구 확장​

(왼쪽부터) Copilot의 Chat으로 테스트 코드를 자동 생성하는 화면(출처: [GitHub 유튜브](https://www.youtube.com/watch?v=smdBqEu7fx4)), 인포그랩 개발팀의 GitLab Merge request에서 AI 코드 리뷰 파이프라인 Job 실행 화면 | 인포그랩 GitLab
(왼쪽부터) Copilot의 Chat으로 테스트 코드를 자동 생성하는 화면(출처: GitHub 유튜브), 인포그랩 개발팀의 GitLab Merge request에서 AI 코드 리뷰 파이프라인 Job 실행 화면

요즘 AI는 웹 개발을 광범위하게 혁신하고 있습니다. 이러한 흐름에 발맞춰 AI 개발 도구도 전보다 훨씬 더 다양해졌는데요. ChatGPT 외에도 Gemini, Claude, Perplexity가 개발자의 AI 코딩 어시스턴트로 활약하고 있죠. IDE 기반 AI 개발 도구로는 Copilot 외에도 Cursor와 Windsurf가 개발자의 코딩 생산성을 극대화합니다. 이제 AI를 활용해 이미지에서 코드를 자동 생성할 수도 있습니다. v0, Figma AI, Makereal tldraw가 이러한 기능을 제공합니다.

오늘날 AI 개발 도구 기능은 코딩을 넘어 버그 탐지, 테스트 코드 생성, 코드 리뷰 자동화로 확장되고 있습니다. Cursor의 ‘Bug Finder’는 최근 주목받는 AI 기반 버그 탐지 기능인데요. Bug Finder는 모든 코드와 최근 변경 사항을 스캔합니다. 그다음, 기능 브랜치와 메인 브랜치를 비교해 잠재 버그를 찾죠. 발견한 버그에는 신뢰도 등급과 함께 간략한 설명이 표시됩니다. 버그를 수정하려면 에디터에서 버튼 한 번만 클릭하면 됩니다*.

GitHub Copilot의 ‘Chat’을 활용하면, 단위 테스트를 자동 생성할 수 있습니다. Chat에서 /test 명령어를 입력하면, 테스트 코드가 바로 생성되죠**. 또 GitLab에 AI 모델을 연동하면, 코드 리뷰 프로세스를 자동화할 수 있습니다. GitLab 파이프라인에 AI 코드 리뷰 Job을 적용하면, 변경 사항이 커밋될 때 코드 리뷰가 자동으로 수행되죠. 인포그랩 개발팀은 이 방식으로 코드 리뷰 프로세스를 대폭 간소화했습니다.

2025년, AI는 코딩을 넘어 다양한 개발 업무에 활용될 전망입니다. 실시간 코드 오류 탐지와 수정, 테스트 코드 생성, 코드 리뷰 등 더 많은 반복 작업을 자동화하면 개발 라이프사이클은 지금보다 훨씬 더 단축되겠죠. 그 결과, 개발자는 창의적이고 고차원적인 문제 해결에 집중할 수 있습니다. 이로써 업무 성과의 양과 질은 크게 향상될 걸로 예상합니다.

*Bug Finder는 아직 초기 단계로, 비용 부담이 큼. Cursor 커뮤니티에서는 Bug Finder 비용 절감 팁으로 ‘스캔을 원치 않는 Git 변경 사항을 stash하라’고 조언함. 이는 커밋 내역에 변경 사항이 너무 많으면, 비용에 영향을 줄 수 있기 때문임

**Microsoft Learn에서 Copilot Chat 기반 단위 테스트 생성 방법을 학습하고 실습할 수 있음

JAMstack 입지 강화​

2025-02-05-2025-devtrends-1 | 인포그랩 GitLab

JAMstack은 프론트엔드와 백엔드를 분리해 빠르고 안전하며 확장 가능한 웹 경험을 제공하는 웹 개발 아키텍처 패턴입니다. 여기서 JAM은 JavaScript*, API**, Markup***의 약어로, JAMstack의 주요 요소이죠. 오늘날 많은 테크, 미디어 기업이 JAMstack으로 서비스 품질을 높이고 있습니다. 독일의 웹 디자인·개발 분야 온라인 매체인 Smashing Magazine은 JAMstack을 도입한 결과, 페이지 첫 로딩 시간을 800ms에서 80ms로 줄여 성능을 10배 향상했습니다.

최근 빠른 서비스 속도와 매끄러운 사용자 경험이 중요해지면서 JAMstack 수요는 커지고 있는데요. JAMstack이 성능 향상, 보안 강화, 확장성 확보, 개발자 경험 개선을 지원하는 점도 중요한 역할을 하죠. 구체적인 방식은 이렇습니다.

  • 성능 향상: JAMstack의 핵심 구성 요소인 정적 사이트는 사전 렌더링 돼 CDN(콘텐츠 전송 네트워크)에서 제공됩니다. 이는 런타임에서 서버 측 처리를 제거해 페이지 로딩 시간을 단축하는데요. 그 결과, 웹사이트가 빠르게 실행돼 성능이 향상되며, 방문자의 유지율도 높아집니다****.
  • 보안 강화: JAMstack은 서버 측 프로세스를 제거해 보안 공격에 노출되는 부분을 줄입니다. 데이터베이스(DB)나 서버와 직접 연결되지 않으므로 SQL 인젝션이나 서버 구성 오류 등 취약점 위험을 최소화할 수 있죠.
  • 확장성 확보: JAMstack은 CDN에 기반하기에 쉽게 확장할 수 있습니다. 백엔드 인프라를 추가하지 않아도 트래픽 급증을 효과적으로 처리할 수 있고요.
  • 개발자 경험 개선: JAMstack을 도입하면, 분리된 아키텍처 덕분에 프론트엔드와 백엔드에서 독립적으로 작업할 수 있죠. 그 결과, 개발 주기를 단축할 수 있습니다. 또 JAMstack 방식으로 구축한 사이트는 CI/CD 파이프라인과 통합돼 빌드와 배포를 자동화할 수 있는데요. 빠른 배포와 업데이트로 개발자 경험을 향상할 수 있습니다.

이러한 장점에 힘입어 2025년 JAMstack의 입지는 강화될 걸로 예상됩니다. 글로벌 IT 미디어 Techismust는 효과적인 JAMstack 도입 전략으로 다음 네 가지를 제안하는데요. 첫째, 현재 웹사이트에서 정적 생성에 적합한 페이지와 기능을 확인합니다. 둘째, 적절한 정적 사이트 생성기를 선택합니다. 셋째, 기존 백엔드 프로세스를 확장 가능한 API로 대체합니다. 넷째, Netlify나 Vercel과 같은 플랫폼으로 CDN에 배포합니다.

*JavaScript: 요청/응답 과정에서 동적인 프로그래밍은 클라이언트 측이나 서버리스 함수로 실행되는 JavaScript로 처리됨

**API: 백엔드 기능은 재사용 가능한 API로 추상화되며, 종종 마이크로서비스로 제공됨

***Markup: HTML은 빌드 시점에 사전 렌더링 돼 빠른 로딩 속도와 뛰어난 성능을 보장함

****Google의 연구에 따르면, 페이지 로딩 시간이 1초에서 3초로 늘어나면, 사용자 이탈 가능성이 32% 증가함

Utility-First CSS 프레임워크 인기​

Tailwind CSS를 사용하는 웹사이트. 출처: [Wappalyzer](https://www.wappalyzer.com/technologies/ui-frameworks/tailwind-css/) | 인포그랩 GitLab
Tailwind CSS를 사용하는 웹사이트. 출처: Wappalyzer

Utility-First CSS 프레임워크는 미리 정의된 저수준(low-level) 유틸리티 클래스를 제공해 HTML 마크업 내에서 스타일을 조합하고 디자인을 구축하도록 지원합니다. Tailwind CSS는 대표적인 Utility-First CSS 프레임워크인데요. OpenAI, Vercel, GitLab 등 유명 테크 기업이 이를 사용하죠. 국내에서는 카카오엔터테인먼트 FE 개발팀이 2022년 하반기부터 Tailwind CSS를 적극적으로 도입했습니다. 그 결과, 스타일 시트를 오가는 컨텍스트 스위칭, 클래스 이름을 고민하는 시간이 줄었고요. CSS 적용 상태를 쉽게 파악해 스타일을 수정하는 시간도 단축됐습니다.

Utility-First CSS 프레임워크의 특장점은 ‘개발 속도와 효율성을 극대화한다’는 거죠. 기존 CSS 방식의 코드와 비교하면 이러한 장점은 명확하게 드러납니다.

기존 CSS 방식 예제​

  • HTML 코드


    <div class="card">
      <h1 class="card-title">Welcome to CSS</h1>
      <p class="card-content">This is a traditional CSS approach.</p>
    </div>

  • CSS 코드

    .card {
      background-color: #3498db;
      color: white;
      padding: 16px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      max-width: 300px;
      margin: 0 auto;
    }

    .card-title {
      font-size: 1.25rem;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .card-content {
      font-size: 0.875rem;
    }

기존 CSS 방식은 CSS 클래스를 작성하고, 이를 HTML 요소에 연결해야 하죠. 이는 스타일을 재사용할 수 있고, 의미를 명확하게 전달하는 장점은 있습니다. 그러나 작은 디자인 스타일을 추가할 때마다 새로운 클래스를 정의해야 하는데요. 이때 CSS 파일을 별도로 관리해야 해 개발 속도가 느려집니다.

Tailwind CSS 예제​

  • HTML 코드

    <div class="bg-blue-500 text-white p-4 rounded-lg shadow-md max-w-sm mx-auto">
      <h1 class="text-xl font-bold mb-2">Welcome to Tailwind CSS</h1>
      <p class="text-sm">This is a Utility-First CSS approach.</p>
    </div>

Tailwind CSS는 별도의 CSS를 작성하지 않고, 필요한 스타일을 HTML에 직접 정의합니다. 이로써 개발 과정이 간소화되고, 개발 속도와 효율성은 향상되죠.

Tailwind CSS, Bulma와 같은 Utility-First CSS 프레임워크는 HTML 컴포넌트에 직접 관련된 저수준 유틸리티 클래스를 제공해 디자인 프로세스를 가속화합니다. 맞춤형 CSS는 없어도 되죠. 아울러 이는 반응형 디자인을 지원해 다양한 디바이스에 맞춰 웹사이트가 효과적으로 보이도록 합니다. 또 페이지 로드 시간을 최적화하고 파일 크기를 줄여 사용자 경험이 개선됩니다.

Utility-First CSS 프레임워크 인기는 2025년에도 이어질 전망입니다. 이는 개발·디자인 속도 향상, 팀 협업 강화에 도움이 되고요. 기존 CSS 방식의 한계를 해소하며, 제품 개발 효율을 높이죠. 최근 ‘개발자 생산성 강화’ 트렌드에 발맞춰 Utility-First CSS 프레임워크는 널리 활용될 걸로 예상됩니다.

WebAssembly 활용 확대​

2025-02-05-2025-devtrends-3 | 인포그랩 GitLab

WebAssembly(Wasm)는 스택 기반 Virtual Machine을 위한 바이너리 명령어 형식입니다. 이는 다양한 프로그래밍 언어를 사용해 고성능 웹 애플리케이션을 개발하도록 지원하죠. 특히 Wasm은 Rust, C, C++ 등 고성능 언어를 효과적으로 컴파일하도록 설계됐고요. 이는 비디오 처리, 오디오 편집, 그래픽 렌더링, 멀티미디어 게임, 암호화 연산 등 복잡하고 계산 집약적인 작업을 원활히 처리합니다.

오늘날 Wasm의 부상은 현대 애플리케이션의 복잡성, 리소스 소모 증가와 밀접한 관련이 있습니다. 3D 게임과 VR/AR, 비디오 편집은 리소스를 많이 사용하는 고성능 작업인데요. 해당 애플리케이션도 네이티브 애플리케이션처럼 로딩 속도가 빠르고 리소스를 효율적으로 사용해야 합니다. 그러나 JavaScript만으로 이러한 요구사항을 충족하기 어렵죠. JavaScript 기반 애플리케이션이 커질수록 다운로드, 파싱, 컴파일에 쓰이는 시간과 컴퓨팅 자원은 증가하기 때문입니다.

Wasm은 JavaScript와 상호 보완적인 기술로, 다음 솔루션에 따라 문제를 해결합니다.

  • 빠른 실행 속도: Wasm은 컴퓨터가 직접 이해할 수 있는 바이너리 코드로 컴파일돼 실행됩니다. 해석 과정이 필요 없기에 실행 속도는 빠릅니다. Rust, C, C++로 작성된 고성능 코드를 Wasm으로 변환하면 그래픽 렌더링, 암호화 연산 등 복잡한 작업을 신속하게 처리할 수 있습니다.
  • 읽기 쉬운 형식: Wasm은 바이너리 형식 외에도 사람이 읽을 수 있는 Wat(WebAssembly Text) 형식을 제공합니다. 이로써 코드 로직을 쉽게 분석하고 디버깅하는 데 유용합니다.
  • 강력한 보안: Wasm은 샌드박스 환경에서 실행됩니다. 따라서 애플리케이션이 파일 시스템이나 네트워크 등의 시스템 리소스에 무단으로 접근하지 못하도록 격리합니다.
  • 높은 웹 호환성: Wasm은 기존 웹 기술과의 하위 호환성을 고려해 설계됐습니다. 따라서 다른 기술을 방해하지 않고 유연하게 통합할 수 있습니다.

Wasm은 확장성을 기반으로 2025년에는 다양한 환경에서 범용 솔루션으로 자리 잡을 걸로 예상됩니다. 이는 멀티 플랫폼 개발을 지원해 여러 운영 체제와 환경에서 동일한 코드를 실행할 수 있는데요. 데스크톱 전용 애플리케이션을 웹 애플리케이션으로 전환하거나, 기존 레거시 애플리케이션을 현대적인 기술로 업그레이드하는 데 쓰일 수 있죠. Wasm은 이러한 강점을 토대로 브라우저를 넘어 서버, 클라우드, 엣지 디바이스까지 확장할 수 있고요. 이러한 특성을 바탕으로 웹 개발의 표준으로 입지를 굳힐 걸로 전망됩니다.

음성 사용자 인터페이스 구현 용이​

2025-02-05-2025-devtrends-4 | 인포그랩 GitLab

음성 사용자 인터페이스(Voice User Interface, VUI)는 사용자가 음성으로 디지털 서비스와 상호작용을 하는 인터페이스입니다. 음성 인식 기술과 자연어 처리 기술(NLP)의 발전으로 VUI도 빠르게 진화했는데요. 오늘날 구글 어시스턴트, 아마존 Alex와 같은 음성 비서는 단순한 명령 수행을 넘어 사용자의 대화 맥락을 이해하고, 개인화된 서비스를 제공합니다.

이제 VUI는 스마트폰, 스마트 스피커, 자동차, 기타 IoT 기기 등 다양한 플랫폼에서 활용됩니다. 사용자는 음성 명령으로 웹사이트를 탐색하고, 정보를 검색할 수 있고요. 자동차 내비게이션을 설정하고, 가전 제품을 제어할 수 있습니다.

VUI는 접근성과 직관성이 중요한 오늘날 디지털 환경에 부합합니다. 음성 명령은 번거로운 메뉴 클릭이나 텍스트 입력 과정을 생략합니다. 따라서 빠르고 직관적으로 상호작용을 할 수 있죠. 음성을 활용하면 운전, 요리와 같이 손을 사용할 수 없는 상황에서도 디지털 서비스에 쉽게 접근할 수 있고요. 이는 AI를 기반으로 사용자의 명령 패턴과 선호를 학습해 개인화된 서비스를 제공하죠. 그 결과, 웹사이트 방문자 참여도와 전환율을 높이는 데도 도움이 됩니다. 이러한 장점 때문에 VUI는 디지털 환경에서 상호작용의 표준으로 자리매김하고 있습니다.

2025년에는 Web Speech API와 같은 음성 기반 기술의 지원이 더 확대될 걸로 예상됩니다. 지금도 Web Speech API와 같은 기술을 활용하면 음성 명령 기반 검색, 폼(form) 입력, 콘텐츠 탐색 기능을 손쉽게 추가할 수 있죠. 개발자는 VUI를 애플리케이션에 편리하게 구현할 수 있고요. VUI 활성화는 필연인 만큼 이를 지원하는 기술도 계속 발전할 전망입니다. 그 결과, 웹사이트와 애플리케이션에서 음성 명령을 구현하는 방법도 더 간편해질 걸로 기대됩니다.

맺음말​

지금까지 2025년 웹 개발 트렌드를 살펴보았습니다. 이 글의 요점은 다음과 같습니다.

  1. AI 개발 도구 확장: AI는 코딩을 넘어 실시간 코드 오류 탐지와 수정, 테스트 코드 생성, 코드 리뷰 등 더 많은 반복 작업을 자동화할 것입니다.
  2. JAMstack 입지 강화: JAMstack은 성능 향상, 보안 강화, 확장성 확보, 개발자 경험 개선 이점에 힘입어 입지가 높아질 것입니다.
  3. Utility-First CSS 프레임워크: Utility-First CSS 프레임워크는 개발·디자인 속도 향상에 기여함에 따라 최근 ‘개발자 생산성 강화’ 트렌드에 발맞춰 널리 활용될 것입니다.
  4. WebAssembly 활용 확대: Wasm은 브라우저를 넘어 서버, 클라우드, 엣지 디바이스까지 확장해 웹 개발의 표준으로 자리매김할 것입니다.
  5. 음성 사용자 인터페이스(VUI) 구현 용이: Web Speech API와 같은 음성 기반 기술의 지원이 확대돼 웹사이트와 애플리케이션에서 음성 명령 구현 방법은 더 간편해질 것입니다.

참고 자료​

  1. “2025년 최고의 웹 개발 트렌드 10가지”, Geeks for Geeks, 2024.11.28, https://www.geeksforgeeks.org/top-web-development-trends/
  2. Natan Mohart, “Web Development in 2025: Trends Defining the Future of the Web”, LinkedIn, 2024.12.19, https://www.linkedin.com/pulse/web-development-2025-trends-defining-future-natan-mohart-ojs8f/
  3. “Web development in 2025: How AI will transform the development of websites and applications”, Esokia, https://esokia.com/en/blog/web-development-in-2025-ai
  4. “Bug Finder - How is it paid?”, Cursor Forum, https://forum.cursor.com/t/bug-finder-how-is-it-paid/29974
  5. Marketing Strategies, Google, https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/page-load-time-statistics/
  6. “Why JAMstack is the Future of Web Development in 2025?”, Techismust.com, 2024.11.24, https://medium.com/@techismustoffl/why-jamstack-is-the-future-of-web-development-in-2025-af51cd136f28
  7. “JAMstack Fundamentals: What, What And How”, Smashing Magazines, 2019.6.20, https://www.smashingmagazine.com/2019/06/jamstack-fundamentals-what-what-how/
  8. “JAMstack이란?”, Cloudfare, https://www.cloudflare.com/ko-kr/learning/performance/what-is-jamstack/
  9. “Styling with utility classes”, Tailwindcss, https://tailwindcss.com/docs/styling-with-utility-classes
  10. Cameron Gain, “See What WebAssembly Can Do in 2025”, The Newstack, 2025.1.3, https://thenewstack.io/see-what-webassembly-can-do-in-2025/

DevOps와 GitLab을 효과적으로 도입하는 방법, 지금 인포그랩에 문의하세요.