▲

과도한 JavaScript 중심 개발, 웹을 망가뜨리다

 (jonoalderson.com)
10P by baeba 14시간전 | ★ favorite | 댓글 6개

요약 개요

과도한 JavaScript 중심 개발, 웹을 망가뜨리다

  • JS 프레임워크 남용으로 웹사이트 복잡성 심화
  • 개발자 경험(DX)이 사용자 경험(UX)을 압도
  • 단순한 작업에도 과도한 구조 요구
  • 성능·접근성·유지보수성 모두 저하
  • 웹 본연의 기능 회복이 해법

서론

개발 중심 웹의 병폐

  • 대부분의 웹사이트는 지나치게 복잡하고 느림
  • JS 중심 설계로 사용자보다는 개발자 중심 구조로 전환
  • 간단한 변경조차 복잡한 배포 과정을 요구하는 상황이 일반화됨

본론

앱처럼 보이고 싶은 욕망이 원인

  • 2010년대 이후, 모바일 앱 유행과 함께 "앱 같은 웹" 요구 증가
  • Angular 등 JS 프레임워크가 도입되며 복잡도 급증
  • 단순 콘텐츠도 시스템처럼 개발됨

개발자 경험(DX) 우선 문화

  • 최신 프레임워크는 개발자 편의에 초점
  • 구성요소 추상화가 UX와 괴리 유발
  • "왜 블로그에 React를 쓰는가"라는 질문보다 SSR 호환성 논의가 우선됨

복잡성이 표준이 된 현실

  • 간단한 작업에도 빌드, 라우팅, API, 캐시 등 다단계 구조 필요
  • 복잡한 스택으로 인해 비개발자는 콘텐츠 수정을 하지 못함
  • 기술 변화가 너무 빨라 유지보수 어려움

프레임워크 남용의 폐해

  • SSR, 캐시, 메타데이터 등 기존 웹 기능을 재구현 중
  • 성능은 낮고, 의존성은 늘어남
  • 결과적으로 JS 프레임워크로 CMS를 재현하는 모순 발생

무의미한 반복과 비용

  • 프레임워크 도입과 폐기가 반복되어 안정된 구조 부재
  • 실제 사용자 문제 해결보다 내부 복잡성 해결에 집중
  • 콘텐츠 마케팅, SEO, 실험 등이 늦어지고 사용자 경험은 악화됨

JS 남용으로 인한 사용자·마케터 피해

  • 콘텐츠 수정에 개발자 개입 필요
  • SEO와 페이지 품질 저하
  • 사용자에겐 로딩 지연, 인터랙션 오류 등 불편 가중

JS는 도구일 뿐, 목적이 아니다

  • JS는 강력한 도구지만, 대부분의 웹사이트에 과도함
  • 정적 콘텐츠에 대해선 HTML, CSS, 약간의 JS만으로 충분
  • Vanilla JS, 서버 렌더링, 최소한의 스크립트가 더 효율적

권한의 집중과 구조적 문제

  • 복잡한 스택으로 인해 모든 작업이 개발자 의존
  • 조직 구조상 개발자 중심으로 권력 집중
  • 기술 결정이 사용자보단 개발자 편의 기준으로 이루어짐

결론

웹의 본질 회복이 해법

  • 빠르게 로딩되고, 검색되며, 유지보수 쉬운 웹사이트가 필요
  • 서버 렌더링 HTML, 의미론적 마크업, 최소한의 JS 등 기본 복귀가 답
  • 기술보다 결과 중심 접근 필요
  • “왜 이 기술을 쓰는가?”라는 질문이 필요
  • 단순하고 사용자 중심적인 웹이 곧 성능, 비용 절감, 유연성을 제공함
▲
kunggom 15분전  [-]

이 글의 근본적인 주제 의식에는 공감합니다만, 어떤 부분에서는 좀 고개를 갸우뚱하게 만드는 부분도 있군요.

예를 들어, 저희 회사에서 운영하고 있는 특정 서비스 홍보용 웹 사이트는 바로 이 글에서 찬양하고 있는 것과 같은 단순함을 유지하고 있습니다. 다행히도 이 웹 사이트는 대부분의 요소가 충분히 정적인 편입니다. 프론트엔드의 HTML과 CSS 등의 코드는 아무런 프레임워크 없이 사람이 직접 손으로 작성한 것이고, JS도 jQuery와 구글 애널리틱스 정도만 달려 있습니다. 공지사항이나 게시판 등은 jQuery를 사용한 AJAX로 구현되어 있지만, 그렇게 불합리하거나 과도하게 복잡한 수준이라고는 생각하지 않습니다. 제가 오래 전 기초 웹 개발에 입문했을 때 jQuery 기반으로 구현할 수 있었던 수준이라고 생각하거든요. 제가 알기로 이 사이트는 Internet Explorer 시절부터 운영되던 것이라 제가 직접 만든 것은 아닙니다만, 썩 나쁘지 않다고 생각합니다.

하지만 여기에는 Git 버전 관리와 CI/CD 파이프라인이 붙어 있고, 스테이징 서버와 실제 운영 서버를 분리시켜 놨습니다. Main 브랜치에 Pull Request가 병합되면 파이프라인에서 번들러를 돌린 산출물을 스테이징 서버에 자동으로 배포하고, 담당자가 스테이징 서버를 확인한 뒤 배포를 최종 승인하면 그게 다시 운영 서버에 배포되는 형태로 되어 있습니다. 과거에는 그냥 FTP를 통해 원본 파일을 운영 서버에 바로 덮어씌우는 방식이었는데, 관련 업무가 저희 팀으로 넘어온 뒤에 이렇게 변경하였습니다.

이게 정말 비합리적인 복잡성일까요? 과거에는 그 웹사이트의 제목 태그를 수정하는 것이 FTP 접속을 지원하는 AcroEdit(네, 원래 그 사이트의 HTML을 직접 작성하신 분들은 여전히 이걸 쓰시고 계셨습니다.)로 운영 서버의 HTML 파일에 바로 들어가서 한 줄만 수정하고 저장하면 모든 작업이 끝나는 일이었으니 그 분들은 아마도 그렇게 느낄 수도 있을 것 같습니다.

그러나 제가 생각하기에는 이 정도 복잡성 추가는 충분히 감내할 만한 것이었다고 봅니다. 모든 작업이 오직 제목 태그 하나 수정하는 것과 동일한 정도는 아니지 않습니까. 그리고 예전 코드가 주석 처리되어 덕지덕지 붙어 있던 것을 언제든 되돌릴 수 있으므로 부담없이 완전히 삭제할 수 있다거나, 투명한 변경내용 추적 및 롤백이 가능해진 점이나, 번들러에 의해 필요하다면 조금 더 기본적인 최적화를 추가할 수 있다는 점은 제 생각에는 충분히 장점입니다. 실제 환경에 배포되기 전에 미리보기를 할 수 있는 스테이징 서버 추가도 어떻게 보면 복잡성 아닌가 할 수 있습니다만, 저는 이것이 필요했다고 생각합니다.

저도 각종 웹 사이트 내부 코드 구조가 과도하게 복잡해지고 무거워진 것에는 불만이 많습니다. 요즘 윈도우의 아웃룩 앱은 웹 앱 기반으로 되어 있는데, 근래 들어서 특히나 더 무거워졌습니다. 그저 화면에서 메일 본문을 작성하거나 본문을 전체 선택하는 것만으로 버벅이거나 심지어는 "페이지 응답 없음"이 뜰 지경이니까요. 왜 이러지 싶어 웹 아웃룩에서 개발자 도구를 열어봤다가 깜짝 놀랐습니다. 한번 캐시를 비우고 새로고침을 했더니 1분 뒤에도 무슨 요청이 계속 뜨더라니까요. 브라우저에서 확인해 보니 MS 오피스 사이트 관련으로만 몇 기가바이트의 데이터가 저장되어 있었습니다.

그러나 이 글은 여러 가지가 뒤섞여 있으며, 어떤 부분은 공감합니다만 어떤 부분은 별로 공감이 되지 않습니다. 시맨틱 HTML이나 접근성에 대한 내용은 오히려 과거가 더 끔찍했다고 알고 있습니다. 게다가 개발자 경험 향상이 사용자 경험을 악화시킨다는 건 제가 웹 프론트엔드 개발자가 아니라서 그런지는 몰라도 전혀 공감이 되지 않네요. 심지어 개발자에게 모든 권력과 통제력이 집중되었다는 건 터무니없는 소리처럼 들립니다. 회사에서 권력은 경영진에게 있는 거 아니었습니까? 서양에서는 회사 구조가 한국과는 좀 다르기라도 한 건가요?

언제나 그렇듯 균형과 중용, 단순성과 실용성은 중요한 가치이며 이를 의사결정에서 우선시해야 한다는 점에는 전적으로 동의합니다. 하지만 이 글은 "모든 웹사이트를 소프트웨어 제품처럼 다루는 것"이 마치 전적으로 개발자의 책임인 것처럼 주장하고 있으며, 그 부분이 오히려 근본적인 문제 의식을 흐리게 만든다고 생각합니다. 그리고 체계가 잡혀 있지 않았던 '좋았던 옛날'을 미화하는 것처럼 보이는 부분은 오히려 비판받아야 하지 않나 생각합니다.

답변달기
▲
spp00 12시간전  [-]

이 글의 요지에 동의합니다. 요새 JS를 너무 남발하고 있어서 i9-9900k를 쓰고 있어도 사이트가 버벅이는 경우가 많습니다. 게임용이나 작업용으로써는 애매한 사양이기는 하지만 이보다 사양 떨어지는 사무용 컴퓨터가 넘쳐나는게 현실이죠.

그래서 저는 인터렉티브한 부분이나 인터렉티브한 페이지 네비게비션 같은 JS가 꼭 필요할때만 쓰자는 철학의 프레임워크인 아스트로와 hotwired를 좋아합니다. 서버 사이드에서 렌더링 하자는 서버 사이드 렌더링도 좋아하고요. 반면 CSR(메타 태그만 서버 사이드로 렌더링하고 나머지 부분을 CSR로 처리하는 것도 포함합니다)은 굉장히 싫어합니다. 서버가 해야할 일을 클라이언트가 전가시키는 것으로 보고 있기 때문입니다. 개인적으로 CSR을 사용하는 전통적인 SPA 방식은 일렉트론 같은 앱에서 로컬로 프론트엔드를 실행할때 사용해야 한다고 봅니다. 물론 서버에서 프론트엔드를 로드할 경우에는 SSR을 써야 하지만요.

답변달기
▲
baeba 14시간전  [-]

아래는 게시글에 대한 댓글 반응을 5가지 유형으로 분류한 요약입니다:

1. 전면 동의 및 지지

  • 주요 특징: 글의 주장에 전폭적으로 동의하며, 복잡한 JS 스택의 문제를 인정함.

  • 의견 예시:

    • “마침내 누가 할 말을 해줬다.”
    • “현실을 직시한 훌륭한 글이다.”
    • “웹 성능과 접근성은 필수다.”

2. 프레임워크 남용에 대한 우려

  • 주요 특징: React, Angular 등 프레임워크의 과도한 사용을 비판하며, 단순한 기술로 충분하다는 의견.

  • 의견 예시:

    • “React는 블로그에 필요 없다.”
    • “Vanilla JS면 대부분 해결된다.”
    • “Svelte, Eleventy 등 경량 대안이 더 낫다.”

3. 부분 동의 + 현실 고려

  • 주요 특징: 주장에 공감하지만, 복잡성이 불가피하거나 필요하다고 보는 현실적 입장도 존재.

  • 의견 예시:

    • “복잡성이 문제지만 일부 상황에선 불가피하다.”
    • “협업과 유지보수에는 프레임워크도 필요하다.”
    • “HTML/CSS도 불완전해서 JS를 쓸 수밖에 없다.”

4. 개발 문화 및 산업 구조 비판

  • 주요 특징: 프레임워크 과잉은 단순한 기술 문제가 아니라, 채용·문화·마케팅 구조의 산물이라 지적.

  • 의견 예시:

    • “프레임워크는 이력서용 기술이 됐다.”
    • “개발자는 회사 요구를 따를 뿐이다.”
    • “이건 조직문화와 고용시장의 문제다.”

5. 비판 또는 반대

  • 주요 특징: 글의 전제에 동의하지 않거나, 일방적인 주장이라고 비판.

  • 의견 예시:

    • “웹이 느려졌다는 근거가 없다.”
    • “글이 지나치게 편파적이다.”
    • “WordPress로 JS 문제를 해결하는 건 오히려 후퇴다.”
답변달기
▲
dlehals2 14시간전  [-]

오 유형별로 나눠놓으니 보기 편하고 좋네요

답변달기
▲
eajrezz 8시간전  [-]

Use Rails, Be happy

답변달기