Amazon Web Services 한국 블로그

AWS Management Console 디자인 업데이트(미리 보기)

오늘 AWS Management Console 디자인 업데이트 미리 보기 버전을 발표합니다. 이번 업데이트는 직관적이고 포용적이며 의미 있는 AWS 경험을 대규모로 빌드하는 데 사용된 Amazon Web Service(AWS) 디자인 시스템인 Cloudscape의 최신 버전을 사용하여 출시되었습니다.

이 글에서는 디자인 업데이트를 통해 사용자가 간편하게 콘텐츠를 스캔하고 핵심 정보에 집중하며 원하는 내용을 더 효과적으로 찾는 데 도움이 되면서도 AWS Management Console의 친숙하고 일관된 경험을 보존하고자 어떻게 작업했는지 설명해 드리겠습니다.

AWS Management Console 홈페이지 - 이전

AWS Management Console 홈페이지 - 디자인 업데이트

읽기 좋은 디자인
타이포그래피 배율을 수정하고 헤딩 처리를 개선한 결과 시각적 계층 구조가 강화되어 사용자가 데이터의 위치를 더 쉽게 찾고 이해할 수 있습니다. 텍스트 요소의 색상과 굵기를 세밀하게 조정하여 주요 정보를 더 빠르게 파악할 수 있습니다. 예를 들어 양식 필드의 레이블이 전보다 눈에 잘 띄게 변경되어 스캔하기 간편해졌습니다. 키-값 쌍의 키에서나 서비스 탐색, 확장 가능한 요소, 탭 등 여러 구성 요소의 섹션에도 같은 원칙을 적용했습니다.

Cloudfront Distribution Console 스크린샷 - 이전 vs. 디자인 업데이트

색상판을 더 선명하게 개선하고, 대화형 요소의 색 처리를 간소화했습니다. 예를 들어 수많은 인터페이스 요소의 보조 버튼, 링크, 토큰 및 대화형 상태가 파란색으로 바뀌어 사용자가 화면에서 더 간편하게 콘텐츠와 상호작용할 수 있으며 작업 효율성도 개선되었습니다.

색상 개선을 보여주는 스크린샷 - 이전 vs. 디자인 업데이트

라이트 모드와 다크 모드의 포커스 개선
시각적으로 복잡성을 줄이면 사용자가 집중하는 데 도움이 됩니다. 카드, 패널, 컨테이너와 같은 주요 콘텐츠 영역의 그림자 효과를 더 얇은 테두리선으로 대체하고, 모든 구성 요소의 테두리 스타일을 일관되게 적용했습니다. 이를 통해 화면이 더 깔끔해지고 레이아웃 내부 공간이 최적화됩니다. 이제 그림자는 사용자 상호작용이 필요한 부분이나 잠시 나타났다 사라지는 요소를 돋보이게 하는 데만 사용됩니다. 덕분에 화면의 깊이감이 정돈되고 콘텐츠의 전체적인 구조가 한결 명확해졌습니다.

개선된 포커스를 보여주는 스크린샷 - 이전 vs. 디자인 업데이트

또한 다크 모드에 대한 업데이트를 출시하여 페이지에 표시된 여러 요소가 더 명확하게 구분되어야 한다는 요구 사항에 부응했습니다. 예를 들어 색상 배열을 새롭게 개선하고, 사용자 상호작용이 있을 때 구성 요소들의 상태 변화를 더 뚜렷하게 구분할 수 있도록 했습니다.

AWS Management Console 홈페이지 다크 모드 비교 스크린샷 - 이전 vs. 디자인 업데이트

인터페이스 현대화
인터페이스를 현대화하되, AWS 전반에서 예측 가능하고 알아보기 쉬운 경험을 계속 제공하기 위해 친숙한 면모는 그대로 유지하고자 했습니다. 더 부드러워진 형태, 밝아진 색상, 개선된 레이아웃 덕분에 한결 보기 편한 사용자 환경을 제공합니다. 이러한 업데이트 덕분에 외양이 전보다 더 매끄럽고 자연스러워져서 인터페이스가 보기 좋아졌습니다.

또한 좀 더 쾌적한 경험을 제공하고 시각적 스토리텔링을 지원하고자, 전과 같이 최고 수준의 접근성 표준은 그대로 유지하되 다양한 일러스트레이션과 모션을 새롭게 선보였습니다.

새로 도입된 일러스트레이션의 예

정보 밀도 향상
사용하지 않는 공간을 줄여 화면에 더 많은 콘텐츠를 표시함으로써 정보 밀도를 최적화했습니다. 이제 관련 데이터가 서로 더 가깝게 표시되어 시각적 연관성이 강화되었습니다. 카드나 컨테이너와 같은 콘텐츠 영역 내 공간을 최소화하여 한 번에 더 많은 정보를 이용할 수 있게 되었습니다. 새로운 레이아웃은 더 넓어지고 중앙 정렬되어, 대형 화면에서도 최적의 사용성을 제공합니다. 이번 디자인 업데이트 덕분에 정보를 사용하기 더 간편해졌고, 나아가 AWS Management Console 내에서 사용자 경험이 개선되고 더 친근해졌습니다.

AWS Lambda 함수 생성 화면의 정보 밀도 향상 정도를 확인할 수 있는 스크린샷 - 이전 vs. 디자인 업데이트

표 형식으로 향상된 정보 밀도를 표시한 이미지 - 이전 vs. 디자인 업데이트

또한 도구 모음을 새롭게 도입하여, 상황에 맞는 도구와 기능을 탐색하고 접근할 수 있게 되었습니다. 도구 모음을 사용하면 화면에서 이용할 수 있는 콘텐츠의 양을 극대화하는 동시에 작업을 수행하는 데 도움이 됩니다.

새로 도입된 도구 모음 스크린샷

일관성 강화
이제 인터페이스가 더 뚜렷해지고 일관성이 향상되었습니다. 색상, 아이콘, 형태를 새롭게 개선하여 더욱 생동감 있고 풍부한 경험을 제공하는 동시에, AWS 서비스 전반에 걸쳐 일관되고 조화로운 사용성을 강화했습니다.

지금 이용 가능
AWS Management Console을 방문하면 모든 AWS 리전의 일부 콘솔에서 업데이트된 디자인을 경험해 보실 수 있습니다. 서비스 전체로 업데이트를 확대할 예정입니다. 새로운 시각적 처리 덕분에 이제 전보다 더 읽기 좋고 사용이 간편하며, 나아가 전반적인 작업 효율성도 개선된 사용자 경험의 이점을 누릴 수 있게 되었습니다.