작년 1월... IT세계로 발을 들인 이후 지금까지,
개발이 이렇게 빠르게 변화할지 미쳐알지 못했다..ㅋ
공부할게 산더미지만 분기별로 공부할 것이 추가되는 느낌이랄까..?🤯
그만큼 트렌드도 훅훅 바뀌는데...
상반기 마무리하는겸
올해 웹 개발 트렌드는 뭐였는지 다시 한 번 살펴봤다-🐥
2024년 웹 개발 트렌드 10가지
반응형 웹 디자인
반응형 웹은 공부할 시점부터 이미 중요한 트렌드로 자리잡고 있었다.
반응형은 어떤 디바이스든 화면 크기에 맞게 유동적으로 레이아웃 디자인이 변화하는 것을 말하는데, 올해들어 이런 디자인이 더 중요해지고 있다는 듯 하다.
그로 인해 플렉스(flex)나 그리드(grid)같은 CSS 기능들이 중요해지며 많이 사용되고 있다.
심지어 심화된 속성도 계속 추가되고 있는터라 어떤 것이 업그레이드 되었는지 확인하여 미리 공부해둘 필요가 있다.
💡 브라우저 호환성 체크는 필수
Tailwind CSS
Tailwind CSS는 디자인을 쉽게 구현할 수 있도록 해주는 유틸리티 중심의 CSS프레임워크라고 한다.
아직까진 실무에서 사용한 적은 없지만 개인적으로 공부할 때 한 번 사용해봤는데 사용법을 잘 익히기만 한다면(제법 간단한 사용법) 보다 더 빠른 작업이 가능할 것 같다.
커스터마이징이 쉬운데다 반복되는 코드를 줄여주기때문에 웹페이지를 빠르게 제작할 수 있다는 장점이 있다.
하지만 개인적으로는 코드가 너무 길어져 마크업 자체의 가독성이 떨어질 뿐더러, 구체적이고 디테일한 디자인의 페이지를 제작하는 경우 한계가 있기때문에... 잘 사용하지는 않을 것 같다. (어떤 웹페이지냐에 따라 달라질 듯)
웹 접근성 강화
공부 초반부터 웹 접근성이란 무엇인가에 대해 귀에 딱지가 앉도록 들었을만큼, 접근성이란 것은 아주 중요하다.
웹 접근성이란 신체적, 환경적 요인 (장애인, 비장애인, 고령자 등) 에 관계없이 사용자 누구든 웹 페이지에 쉽게 접근하고 이해할 수 있도록 하는 것을 말하는데,
이 웹 접근성을 높이기 위해서는 웹사이트의 콘텐츠와 기능에 누구든 쉽게 접근할 수 있도록 해줘야 한다.
| 접근성 강화를 위한 [필수 요소] |
|---|
| 웹 표준에 맞게 마크업 구조를 작성하여 명확한 콘텐츠 구조로 제작 [ Semantic Markup ] |
| 스크린 리더 최적화 [ wai-aria ] |
| 키보드 네비게이션 |
웹 접근성이 중요해진만큼 요즘은 디자인 UX(사용자 경험)가 핵심이 되고 있어 개발자라 할지라도 UIUX에 대해 조금 알아둘 필요가 있을 것 같다.
💡 개인적으로 UX가 고려된 디자인을 짜는 것이 마크업 구조를 설계하는데 좀 더 원할한 편이었다.
인공지능과 머신러닝 통합
GPT같은 인공지능AI가 유행처럼 번지기 시작한 이후, 뭔가 더 깊숙히 침투할 것만 같은 느낌이 있었는데 그게 벌써..🙊
AI와 머신러닝은 사용자 경험을 개선하고 웹 개발 프로세스 자동화에 도움을 주어 웹사이트를 더욱 스마트하게 만들어준다고 한다.
💡 특히 웹 개발시 사용자 경험 개인화·최적화에 강점
사용자 행동을 예측콘텐츠 자동 생성
AI가 사용자 행동을 분석하고 이를 통해 웹사이트에서 더 정밀하게 사용자 개인 맞춤형 콘텐츠를 제공하게 되는 식이라고 하는데 챗봇 서비스 (사용자와의 소통) 가 이에 포함된다.
서버리스 아키텍처
서버리스 아키텍처는 개발자가 기본 아키텍처를 관리하지 않고도 애플리케이션을 빌드하고 관리할 수 있는 소프트웨어 설계 방식이다.
서버리스는 직역하면 '서버가 없다'는 의미지만, 사실 서버가 없다는 뜻은 아니고 직접 서버를 관리하지 않기에 신경 쓸 필요없음을 뜻한다고 한다.
클라우드 제공 업체가 서버의 실행과 관리를 자동화해서, 개발자가 애플리케이션의 코드 작성과 비즈니스 로직 구현에 더 집중할 수 있게 하는데, 이렇게 되면 개발자가 인프라 관리에 덜 신경 쓸 수 있고 그만큼 더 효율적인 환경에서 개발이 가능해진다.
API-First 개발
API-First 개발은 애플리케이션 또는 서비스를 개발할 때 API(Application Programming Interface) 설계를 최우선으로 고려하는 접근 방식을 말한다. 다양한 플랫폼과 장치에서 애플리케이션의 기능을 더 쉽게 통합하고 확장할 수 있는 개발 방식이다.
API-First 개발 방식은 특히 마이크로서비스 아키텍처, 클라우드 기반 서비스, 모바일 애플리케이션 개발에 널리 쓰이고 있다.
잘 설계된 API는 여러 애플리케이션에서 재사용이 가능해 개발 비용과 시간을 절약할 수 있다는 장점이 있고, 프론트엔드와 백엔드 팀이 동시에 개발을 시작할 수 있어 프로젝트의 전반적인 진행 속도를 높여준다.
-
개발자 생산성 향상: 개발팀은 애플리케이션의 API에 의존하는 다른 마이크로서비스에서 작업하는 팀에 영향을 미치지 않고 Backend 애플리케이션을 업데이트할 수 있도록 병렬로 작업할 수 있다. 모든 팀이 설정된 API 계약(contract)을 참조할 수 있기 때문에 API Lifecycle 전반에 걸쳐 협업이 더 용이한 경우가 많다. -
개발자 경험 향상: API‑First 설계는 API가 논리적이고 잘 문서화되도록 보장하여 개발자 경험을 우선시한다. 이는 개발자가 API와 상호 작용할 때 원활한 경험을 제공한다. -
일관된 거버넌스 및 보안: 클라우드 및 플랫폼 설계자는 API 설계 단계에서 보안 및 거버넌스 규칙을 통합하여 일관된 방식으로 API 에코 시스템을 구성할 수 있다. 이렇게 하면 소프트웨어 프로세스에서 후반부에 문제가 발견될 때 필요한 비용이 많이 드는 검토 작업을 피할 수 있다. -
소프트웨어 품질 향상: API를 먼저 설계하면 API를 Production에 배포할 준비가 되기 훨씬 전에 개발 프로세스 초기에 보안 및 규정 준수 요구 사항을 충족할 수 있다. 운영, 품질 및 보안 엔지니어링팀이 개발팀과 직접 협력하여 설계 단계에서 품질 및 보안 표준을 충족할 수 있도록 보장하는 시간을 단축할 수 있다. -
출시 시간 단축: 더 적은 종속성과 서비스 간 통신을 위한 일관된 프레임워크를 통해 서로 다른 팀이 훨씬 더 효율적으로 서비스를 구축하고 개선할 수 있다. 일관되고 기계가 읽을 수 있는 API 사양은 개발자와 Platform Ops팀이 더 잘 협력하는 데 도움이 되는 하나의 도구이다.
아직 나에겐 너무 어려운 소리
모션 UI 활용
원래부터 그래픽이나 애니메이션에 관심이 많아 평소 css, js를 이용한 애니메이션을 찾아보고는 했었는데 올해부터 점차 모션 UI를 활용한 웹사이트가 많이 생기면서 인기를 끌고 있는 것 같다.
모션 UI는 애니메이션과 전환 효과를 활용해서 사용자의 주의를 끌고, 상호작용을 더욱 강하게 끌어낼 수 있는 장점이 있다.
너무 무겁지 않은 간단한 애니메이션은 사용자 경험을 풍부하게 하고, 정보를 더 보기 편하게 안내하는 역할을 해준다.
이런 모션 UI의 적절한 사용은 웹사이트를 더욱 동적이고 생동감 있게 만들어준다.
개인적으로 모션은 해외사이트에서 참고할 만한게 많은 듯🤔
PWA (Progressive Web Apps)
PWA는 웹과 네이티브 애플리케이션의 장점을 결합해서 개발한 웹 앱을 말한다.
(ex. 별도 앱 설치없이 주소만 치면 접근할 수 있는 웹)
네이티브 앱은 운영체제와 더 잘 통합돼 움직임이 빠르고 부드러우며 오프라인에서도 실행이 가능하다는 장점이 있다.
PWA는 이 장점을 모두 갖도록 개발한 웹 앱으로 HTML, CSS, JS 같은 웹 기술로 오프라인 작동이나 푸시 알림 등 앱의 특징을 웹사이트에 구현한다. (웹사이트만 봐도 마치 앱을 실행해서 보는 것 같은 느낌을 줌)
또한 개발이 어렵고 오래 걸리는 네이티브 앱에 비해, PWA는 비교적 개발 시간이 짧은 편이다.
다크 모드 UI
다크 모드는 사용자의 시각적 편안함을 위해 어두운 색상의 배경을 사용하는 UI 디자인이다.
이는 눈의 피로를 줄여주고, 전력 소비도 줄여주는 장점이 있다.
올해는 더 많은 웹사이트와 애플리케이션에서 옵션을 통해 다크 모드를 지원하는만큼 앞으로도 빠지지않는 서비스가 될 수 있다.
웹어셈블리
웹어셈블리는 웹 브라우저에서 C, C++, Rust 등의 언어로 작성된 코드를 실행할 수 있게 해주는 표준이다.
웹 애플리케이션 성능 향상복잡한 그래픽 처리게임 개발
웹어셈블리는 웹 개발의 많은 영역에서 점점 더 중요해지고 있고, 웹 애플리케이션의 성능과 사용자 경험을 크게 개선하고 있다.
| 장점👍 |
|---|
| 기본적으로 바이너리 코드 형태로 작성돼 JavaScript보다 로딩과 실행 속도가 빠르다. |
| C, C++, Rust 등과 같은 여러 언어로 작성된 코드를 웹어셈블리로 컴파일할 수 있어 개발 유연성을 높여준다. |
| 웹 페이지와 마찬가지로 URL을 통해 쉽게 접근하고 배포할 수 있다. |
| 모든 주요 브라우저와 호환되면서 플랫폼에 구애받지 않는다. |
✍ 웹 UI 트렌드는 알았지만 웹 개발 트렌드는 제대로 찾아본 적이 없었는데 생각보다 많아서(?) 놀랍다.
트렌드가 빠르게 변화하는만큼 내년에는 올해보다 얼마나 변화될지 두려우면서도 기대가 된다.
