6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다.
스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다
웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.
6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다.
스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다
웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
AWS Community Day 2022 에서 진행된 [AWS 기반 마이크로 프론트엔드 아키텍처 구축하기] 세션의 발표자료입니다.
발표 영상: https://lnkd.in/g6xqYcyC
이번 세션에서는 마이크로 프론트엔드가 무엇인지, 어떤 문제를 해결하고자 하고 장단점은 어떤 것들이 있는지 얘기하면서 개념을 소개합니다.
그리고 마이크로 프론트엔드의 여러 구현 방식들을 소개합니다. 이번 세션에서는 여러 구현 방식들 중 Javascript 코드가 실행되는 시점에 애플리케이션이 조합되는 Runtime-composition을 다루고, 그 중에서도 브라우저에서 애플리케이션이 조합되는 Client-side composition에 대해 소개합니다. 그리하여 Webpack 5에 도입된 Module Federation 플러그인을 활용하여 Client-side composition을 어떻게 구현할 수 있는지 알려드립니다.
마지막으로 아키텍처 다이어그램과 실제로 동작하는 데모 프로젝트를 살펴보면서 AWS에 마이크로 프론트엔드 아키텍처를 어떻게 구축할 수 있는지 보여드립니다. 나아가 마이크로 프론트엔드가 제품 개발 영역 뿐만 아니라 조직 구조 관점에서 미치는 긍정적인 영향에 대해서도 소개합니다.
발표에서 보여드린 데모 프로젝트의 소스코드는 Github에 공개되어 있습니다.
Github: https://github.com/eunsukimme/micro-frontend-on-aws
4. 1. 웹 UI 프레임웍 개요
MVC 기반
글로벌 표준
웹표준화 모듈화 모듈의 재사용
XHTML/CSS
모바일웹
모바일로의
확장
5. 2. 웹 UI 프레임웍 활용
기업
개인 블로그
기타 뉴스
업무 커뮤니티
시스템
인트라넷 쇼핑몰
개인화
6. 3. 드래그홈 제안배경
• 드래그홈은 홈페이지를 구성하는 모든 요소들을 모듈화(모듈or위젯)
하여 드래그만으로 원하는 시스템을 구축할 수 있는 웹 UI 프레임웍
입니다.
• 웹표준을 준수하여 브라우저에 상관없이 동일한 화면으로 서비스할
수 있습니다.
• 자바기반의 MVC모델로 개발하여 확장이 용이할 뿐 아니라 개발자와
디자이너의 업무를 확실하게 구분할 수 있습니다.
• iBatis, Freemarker, lucene, jQuery(Core&UI&플러그인) 등을 활용
하여 개발이 쉽고 ajax을 활용한 다이나믹한 효과를 구현할 수 있습
니다.
7. 4. 드래그홈 개요
• JAVA 기반 AJAX 웹 UI 프레임웍
• 웹표준 준수 (익스플로러, 파이어폭스, 크롬, 사파리, 오페라)
• 다국어 가능
• jQuery 자바스크립트 프레임웍 사용
• 자체 드래그홈 CSS 프레임웍 사용
8. 5. 드래그홈 특징
▶ 직관적인 UI 제공
- 페이지 개발을 모두 드래그로 처리하는 직관적인 유저 인터페이스를 제공합니다.
- 단위 모듈들을 모두 위젯 형태로 제공되기 때문에 원하는 기능의 위젯을 드래그만 하면 원하는 페이지로 변경됩니다.
▶ 개발의 편리성
- JAVA 기반 MVC 모델로 개발하여 새로운 모듈 추가가 용이합니다.
- 개발자와 디자이너의 업무 구분이 명확하여 개발기간이 단축됩니다.
▶ 유지비용 절약
- 시스템을 변경하거나 디자인을 변경할 때 필요한 모듈이나 템플릿만 수정하면 되므로 유지비용이 절약됩니다.
- 회사 홈페이지. 지역 홈페이지, 내부 업무시스템을 하나의 드래그홈 프레임웍으로 제공할 수 있습니다.
- 직관적인 UI 제공으로 페이지를 제작하므로 내부사용자가 쉽게 적응하여 직원 교육비용이 절약됩니다.
▶ 웹모바일 활용
- 웹모바일용 템플릿 제공으로 회사홈페이지나 업무시스템을 모바일로 손쉽게 확장이 가능합니다.
22. 9. 끝맺음
이 세상에 홈페이지 개발자는 많이 있습니다.
하지만 드래그홈 솔루션같은 시스템을 개발할 수 있는 개발자는
많지 않습니다.
웹표준을 잘이해하고 최신 자바스크립트 처리에 능숙하며
거기에 획기적인 웹빌더 드래그홈 솔루션을 개발한 개발자라면
고객의 어떤 요구라고 즉시 처리해드릴 수 있습니다.