2024년을 주도할 홈페이지 개발 트렌드 10가지

잘 만든 기업 홈페이지의 특징

한국 인터넷 전문가 협회(KIPFA)가 주관하는 ‘웹어워드 코리아’는 국내를 대표하는 인터넷 전문가 3,800명으로 구성된 홈페이지 평가 시상식입니다. 웹어워드 코리아는 국내 인터넷 관련 산업의 활용성과 사용성을 개선하고, 인터넷 서비스 개발을 위한 동기부여를 불어넣고자 홈페이지를 공정하게 평가하고 있습니다. 더불어 시상식 행사를 중심으로 홈페이지 구축 기술과 디자인의 변화, 인터넷과 홈페이지의 트렌드, 미래 전망을 발표하고 있습니다.

그럼, 작년 웹어워드 코리아에서 최고 대상을 받은 삼성자산운용과 SK렌터카 홈페이지를 살펴보며 잘 만든 기업 홈페이지의 특징을 알아보겠습니다.

1. 삼성자산운용 통합 플랫폼

1) 제작 목적

삼성자산운용 통합 플랫폼은 분리되어 있던 삼성펀드와 Kodex 사이트를 하나로 통합 구축하여 일관된 브랜드 가치를 전달하고 새롭게 브랜딩된 브랜드 이미지를 전달하고자 리뉴얼 되었습니다. 삼성자산운용만의 기업 헤리티지를 전달하는 것뿐만 아니라, 최신 투자 트렌드를 반영하여 쉽고 편리한 고객 맞춤형 콘텐츠를 제공하는 새롭고 혁신적인 플랫폼을 구현하고자 하였습니다. 

2) 특징

• 고객의 언어로 표현하여 편의성 향상 : 고객의 언어로 표현한 정보의 시각화를 통해 쉽고 직관적으로 느낄 수 있게 UI 시스템을 구축했습니다. 
• 정보의 시각화 : 관심 있는 정보에 대해 빠른 탐색이 가능한 요소를 곳곳에 배치해두었습니다. 
• 상품의 특성을 분석하여 카테고리화 > 그래픽을 활용하여 상품, 섹터별 아이콘을 시각화 > 컬러를 활용하여 상품 그룹을 나눴습니다.
• 3D 이미지와 스토리텔링을 활용하여 상품의 특장점을 강조
• 상단 토글 UI 기능을 통해 통합된 Kodex와 삼성펀드 플랫폼 유기적인 전환 가능 > 이원화된 메인 페이지 구성으로 고객이 원하는 정보 제공 > Kodex(상품 콘텐츠), 오버뷰(하우스 뷰 등의 정보성 콘텐츠) 
• 삼성자산운용이 실천하는 ESG 경영을 웹사이트에서도 잘 보여주기 위해 전면적으로 구성 개편 > ESG 메뉴의 정보 구조와 구성 콘텐츠 개편 + 투자 관련 정보에 쉽게 접근할 수 있는 투자 가이드북, ETF NOW, 하우스 뷰 등의 콘텐츠 페이지 개편하고 신설 >> 고객들이 투자 정보를 더 쉽고 편리하게 접하고, 삼성자산운용 브랜드 이미지를 경험할 수 있도록 도왔습니다. 

2. SK렌터카 모바일 웹

1) 제작 목적

SK렌터카 모바일 웹은 여행과 출장에 필요한 렌터카 이용 전과정을 온라인으로 제공하여 고객 편의성을 향상하고자 제작된 기업 홈페이지입니다. 렌터카 이용 과정의 일부만을 제공하던 온라인 서비스를 온라인 풀 서비스로 제공하고 고객 편의성을 높이는 것에 초점을 두었습니다. 또한 여행, 출장 시 이용하기 쉽고 편리하도록 SK렌터카만의 고객 경험을 제공합니다. SK렌터카는 누구나 타고 싶고, 모두가 이용하기 쉬운 전략을 UI에 담아내기 위해 컨설팅, 구축, 안정화, 고도화에 이른 모든 과정을 진행하였습니다.

2) 특징

• 사용성과 편의성을 고려 > 미니멀한 UI를 제공하여 상세화면, 옵션 레이어, 알림 메시지 등 화면을 모듈화 > 첫 사용자도 학습 없이 이용할 수 있도록 UIUX Page Pattern 
• 화면을 이동해도 꼭 필요한 예약창은 지속적이고 일관적으로 노출되게 구현
• 일러스트 비주얼을 자체 제작해 SK렌터카만의 브랜드 이미지 구축 > SK 렌터카만의 경험을 위해 가족과의 여행, 연인과의 여행, 혼자 떠나는 출장 등 여러 사례를 일러스트로 직접 제작하여 제공 > 일러스트와 어울리는 UX 라이팅을 통해 사용자가 겪는 피로감 감소> 외래어와 일본식 표현 제거 > 친근하고 긍정적인 어조의 일관된 글쓰기로 표현 
• 리액트 장점을 살린 공통 엘리먼트 컴포넌트 모듈화 설계, 패스트 리프레쉬 제공 > 안정적인 서비스와 차량 조회, 결제 등 높은 퍼포먼스를 경험할 수 있도록 구축
• 리뉴얼 전, 후 사용자 평가와 사용 후기 조사를 통해 사용자 불편 최소화 > 리뉴얼 전 사용자 경험을 직접 듣고, CX 컨설턴트들이 저니맵을 그리며 렌터카 이용 전 과정에서의 *페인포인트를 찾음 > UI, UX, Service Flow, TX 전면 개편-> 단순한 미니멀 레이아웃 제공 (*페인 포인트: Pain Point. 고객이 불평, 불안, 고통을 느끼는 지점을 뜻함) 
• 온, 오프라인에 혼재되어 있던 서비스 과정을 온라인으로 제공 > '결제 수단-일정 변경/추가-예약취소-차량 변경-운전자 변경-운전자 추가' 등 온라인에서 모두 가능하도록 현장의 차량 관리 시스템, 계약관리 시스템과 수시 연동, 사용자 편의를 위한 기능이라 판단 시 과감한 연동 시스템 개선 시도

2024년 웹 트렌드 10가지 알아보기  

웹어워드 코리아에서 최고 대상을 받은 기업 홈페이지를 살펴보았습니다. 2024년에는 어떤 웹 트렌드가 있을까요? 

1. 반복적인 작업을 자동화하는 인공지능(AI) 

인공지능(AI)은 단순한 유행어가 아니라 웹 개발에 있어서 변혁을 가져오는 힘입니다. 2024년을 맞이하여 미래 지향적인 모든 개발자의 마음속에 있는 질문은 ‘AI가 웹 개발의 미래 풍속도를 어떻게 바꿔놓을 것인가?’입니다. AI 기반 개발은 반복적인 작업을 자동화하고, 알고리즘을 최적화하며, 대규모로 사용자 경험을 개인 맞춤식으로 만들어줍니다. 특히 획기적인 것은 AI가 코드를 생성하는 것입니다. 이에 따라 ‘AI가 홈페이지 개발자를 대체할 수 있을까?’ 고민할 수도 있지만 분명한 것은 AI는 전문 개발자의 창의성과 전문성을 대체하는 것이 아닌 개발자의 업무를 지원하기 위해 존재한다는 것입니다.

2. 양자 컴퓨팅 기술의 상용화

*양자 컴퓨팅은 이제 이론적 고찰 단계에서 실제 적용 단계로 도약했습니다. ‘양자 컴퓨팅이 웹 개발에 어떤 영향을 미칠까?’에 관한 질문은 수많은 답변을 내놓고 있습니다. 양자 컴퓨팅은 문제 해결과 데이터 분석에 상당한 영향을 미치며 데이터 처리 시간을 크게 단축할 수 있습니다.

웹 개발자에게 양자 컴퓨팅은 효율적인 코드 **컴파일, 실시간 데이터 처리로 강력한 웹 애플리케이션입니다. 양자 컴퓨팅을 수용하는 것은 전략적인 강점이 될 수 있습니다.

(*양자 컴퓨팅: 중첩, 얽힘, 양자 간섭과 같은 양자 물리학의 고유한 동작을 활용하며 이를 컴퓨터에 적용하는 것) 

(**컴파일: 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정)

3. 미니멀리스트 디자인의 부활

사람들이 사용자 친화적인 디자인의 본질은 무엇인지 다시 생각하면서 미니멀리스트 미학이 다시 주목받고 있습니다. ‘현대 웹 개발에서 미니멀리스트 디자인의 역할은 무엇인가?’라는 질문은 단순함과 기능을 지향하는 트렌드를 강조합니다.

깔끔한 선, 단색 색상 구성, 복잡하지 않은 레이아웃은 단순히 스타일 선택 사항이 아니라 사이트 성능을 개선하고 사용자 경험을 향상하기 위한 전략적 결정입니다. 홈페이지 디자인에서 미니멀리즘은 콘텐츠에 초점을 맞추는 것입니다. 이는 홈페이지 로딩 시간을 단축하고 SEO 순위를 높이고 사용자를 유지하기 위해 필수적입니다.

4. 모바일을 우선으로 하는 디자인 

모바일 인터넷 사용량이 PC를 능가하는 상황에서 ‘홈페이지 개발에 있어 모바일을 우선으로 하는 디자인이 얼마나 중요한가?’에 관한 질문은 SEO 전략을 짜는 데 있어 중요한 포인트가 됩니다. 2024년에 모바일 우선은 단순한 트렌드가 아니라 기본적으로 챙겨야 하는 필수 요소입니다.

모바일을 우선으로 하는 접근 방식은 늘어나는 스마트폰 사용자 수에 우선순위를 두어 홈페이지가 작은 화면과 터치 기반 상호 작용에 최적화되도록 합니다. 또한 더 많은 잠재 고객에게 다가가고 구글에서 검색 순위를 높이기 위해 반응형 디자인 작업을 필수로 챙겨야 합니다.

5. 음성 검색 최적화의 부상

‘음성 검색이 검색 엔진 최적화를 바꿀까요?’ 실제로 음성 인식 장치가 보편화되면서 음성 검색을 최적화하는 것이 무엇보다 중요해졌습니다. 여기서 핵심은 *자연어 질의를 이해하고 대화 문구를 콘텐츠에 통합하는 것입니다. (*자연어: 인간이 일상적으로 사용하는 언어) 

음성 검색 최적화는 더 이상 단순한 키워드에 관한 것이 아닌 사람들이 목소리를 내어서하는 질문에 관한 것입니다. 이러한 추세에 웹 개발자는 더욱 접근하기 쉬운 인터페이스를 만들 수 있고 콘텐츠 제작자는 새로운 차원의 키워드 최적화를 활용할 수 있습니다.

6. 웹 개발에 있어 사이버 보안

사이버 보안은 무시할 수 없는 키워드이기 때문에 ‘웹 보안을 어떻게 강화할 것인가?’에 관한 문제 또한 중요한 관심사입니다. 이에 따라 고급 보안 프로토콜의 도입과 블록체인 기술의 통합은 데이터 보호의 새로운 표준을 정하고 있습니다. 개발자에게 이는 처음부터 강력한 보안 조치를 통합하여 새로운 위협으로부터 사용자 데이터를 보호하는 것을 의미합니다. 웹 보안을 중시하겠다는 확고한 의지는 청중과의 신뢰를 구축할 뿐만 아니라 보안 사이트를 선호하는 구글의 기준에도 부합합니다.

 7. 증강 현실(AR)과 가상 현실(VR)의 통합 

증강 현실과 가상 현실은 웹 경험을 재구성합니다. 그렇다면 홈페이지 개발에 AR과 VR을 어떻게 사용할 수 있을까요? 증강 현실과 가상 현실 기술은 브랜드의 스토리텔링과 고객 참여를 향상할 수 있는 몰입형 경험을 제공하기 때문에 2024년에는 증강 현실과 가상 현실 기능을 통합한 홈페이지가 나올 것으로 예상됩니다. 이는 사용자가 서비스나 상품을 구매하기 전에 체험해 보거나 가상 공간으로 이동할 수 있게 하는 기능으로 표현할 수 있습니다. 이러한 기능으로 전반적인 홈페이지 경험을 개선하며 사용자 상호 작용의 새로운 표준을 설정하는 많은 홈페이지가 개발될 것으로 예상됩니다.

8. 프로그레시브 웹 앱(PWA)으로 고품질 사용자 경험 제공

*프로그레시브 웹 앱(PWA)은 웹과 모바일 앱 기능의 융합을 나타내며 어떤 장치나 네트워크상에서도 고품질 사용자 경험을 제공합니다.

PWA는 안정적이고 빠르며 사용자가 웹사이트와 앱에서 기대할 수 있는 것 사이의 경계를 모호하게 만듭니다. 웹 개발자에게 PWA는 성능과 사용자 참여 측면에서 앱에 맞서는 **웹 앱(Web App)을 구축할 기회를 제공합니다. 이는 사용자를 사이트에 더 오래 머물게 하고 검색 순위를 높이는 데 중요한 요소가 됩니다.

(*프로그레시브 웹 앱: Progressive Web App. 앱 수준과 같은 사용자 경험을 웹에서 제공하는 웹을 뜻함)

(**웹 앱: Web App. 인터넷을 통하여 웹 페이지처럼 사용할 수 있는 응용 프로그램) 

9. *CSS의 진화: 여러분은 새로운 가능성에 뒤처지지 않고 있습니까?

CSS는 *마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어입니다. Grid, Flexbox와 같은 새로운 프레임워크와 기능을 갖춘 CSS로 반응형 웹 디자인은 더 직관적이고 효율적으로 바뀌었습니다.

(*마크업 언어: 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종. 대표적인 예로 HTML이 있음) 

CSS는 최신 웹 브라우저의 모든 기능을 활용하여 모든 화면에 적응하는 유연한 레이아웃을 만들 수 있습니다. 또한 CSS는 검색 엔진 최적화 성능과 사용자 만족에 있어 핵심 요소가 됩니다.

10. 지속 가능한 웹 디자인: 여러분의 웹사이트는 친환경적인가요?

‘지속 가능한 웹 디자인’은 웹 디자인에서 중요한 용어가 되고 있습니다. 그렇다면 어떻게 친환경 홈페이지를 구축할 수 있을까요? 홈페이지 개발에 있어 친환경은 사이트 효율성을 최적화하여 에너지 소비를 최소화하는 데 중점을 둡니다. 예를 들어 간소화된 코드, 최적화된 이미지가 포함됩니다.

디지털 탄소 발자국에 대한 인식이 높아짐에 따라 지속 가능한 관행은 브랜드 이미지에 영향을 미칠 뿐만 아니라 검색 엔진 순위에도 이바지합니다. 이는 검색 알고리즘이 환경에 미치는 영향이 낮은 사이트를 선호하기 시작했기 때문입니다.

삼성전자는 다양한 이해관계자들에게 진행해 온 브랜드의 다양한 지속경영 활동을 투명하게 전달하기 위해 지속 가능경영 홈페이지를 개설했습니다. 이렇게 구조 설계와 스토리텔링에 중점을 주고 제작하기 위해서는 웹 개발자와 기업 모두 이러한 트렌드를 전략에 적용해야 합니다. 

(*‘지속 가능경영’ : 경제적, 사회적, 환경적 지속가능성을 추구하여 조직의 가치를 제고하는 경영활동을 뜻함) 

변화를 수용하고 혁신을 촉진한다면 기술적으로 앞서는 웹 사이트와 사용자의 깊은 공감을 불러일으키는 웹 경험을 창출할 수 있을 것입니다. 크몽에는 다양한 웹사이트, 홈페이지 전문가가 있습니다. 웹사이트와 홈페이지를 만드는 게 막막하거나 페이지 범위가 크다면 크몽 전문가의 도움을 받아보세요.