결함 허용 시스템 설계를 위한 패턴 소개

시스템의 일부가 고장 나더라도 다운이 허용되지 않는 시스템이 있다. 이런 성격을 갖는 시스템을 “내결함성” 또는 “결함 허용” 시스템(Fault tolerant system)이라고 한다. 처음부터 결함을 갖고 있었거나, 사용 중에 발생한 결함에도, 시스템 명세서에 명시된 기능을 제공하도록 만들어진 “고 신뢰성” 시스템이다. 이런 시스템을 만들기 위해서 아키텍쳐 관점에서 고려해야 할 사항은 무엇일까? 이런 시스템 설계에 적용될 수 있는 설계 Pattern은 무엇일까? Patterns for fault tolerant software책에서 제시하는 설계 Pattern들을 소개하고자 한다.

 

내 결함성은 결함허용 시스템에만 적용되는 기능이 아니다. 다양한 시스템에 그들의 완성도를 높이기 위해 적용될 수 있는 방법이다. 어떤 시스템이나 결함을 가질 수 있고, 운행 도중 결함이 실행되어 오류가 발생할 수 있다. 이런 오류가 특정 서비스를 실행시키는데 영향을 준다면 서비스 장애가 발생할 것이다. 이번 칼럼에서는 결함이 실행되어 오류가 발생하더라도 오류의 파급 효과를 줄이거나 제거해 장애가 발생하지 않는 방법을 소개할 것이다. 칼럼을 읽고 우리가 만드는 시스템에 내 결함 기능을 추가하여 시스템의 완성도를 높여 보자.

 

대표적인 결함 허용 시스템

고장에 강해, 단 한 순간의 시스템 다운도 허용될 수 없는 온라인 시스템, 특히 높은 신뢰성이 요구되는 환경인 은행이나 e-Commerce 시스템, 좌석예약시스템 등 실시간 프로세스 제어시스템, 병원이나 우주 항해 시스템과 같이 컴퓨터의 고장이 인명 손실에 관계되는 시스템, 년 중 보수작업이 거의 불가능한 상황에서 사용되는 시스템, 고장에 의해 막대한 경제적 손실을 야기하는 업무 환경 등에 사용되는 원전 시스템 등을 들 수 있다.

 

장애 발생 과정과 결함 허용 기술

결함 허용이란 오류가 발생한 것을 감지하고, 오류가 다른 영역에 영향을 미치기 전에, 미리 정의된 오류 복구나 완화 정책을 통해, 오류가 장애로 이어지는 것을 막고, 오류의 원인인 결함을 발견해, 결함을 치료하여 오류의 재발을 막는 기술이다.

용어장애 발생 과정

결함 허용 기술결함 허용 방법

  결함 허용 시스템 설계를 위한 패턴 소개 더보기

2016 UI Trend

안녕하세요! 2016년 병신년을 맞이하여 원숭이띠 와탭의 UI 디자이너가 2016년도에 UI가 어떤것이 대세일지 정리하였습니다.

2015과 많이 달라지지 않겠지만, 모바일 브라우징 사용이 점점 증가하면서 아무래도 모바일 관련 디자인이 많이 변화가 되지 않을까 싶네요.

1. 특이하고 독특한 방식의 레이아웃과 일러스트.

한국에서 만들어지는 웹사이트들은 전반적으로 레이아웃들이 비슷합니다. 왜냐하면 웹에서 제공하는 프레임워크를 많이 사용하기도 하고, 이미지/텍스트를 바꾸면 시간을 절약하고 편하게 웹사이트를 만들수 있기 때문입니다.

그래서 다른웹사이트와 차별을 주기 위해 더 특이하고 독특한 레이아웃이 나오지 않을까 합니다.

스타벅스를 보면 패럴랙스 스크롤링을 이용한 반응형 웹페이지입니다.

20160104_001

또한 몇년간 배경화면으로 큰 이미지로 장식되었던 홈페이지 배경화면이 일러스트나 패턴을 이용한 배경이미지로 바뀔것으로 보입니다. 이것또한 현재 웹사이트와 차별화를 주기 위한걸로 예측됩니다. 이러한 배경이미지는 텍스트를 좀더 보완하고 시각적으로 매력적이고 사용자들에게 더 오랜기억으로 남게 되는 웹사이트가 될수 있을것입니다.

20160104_002

20160104_003

2. 스토리텔링.

2016년도 UX를 경험으로 한 스토리는 사용자의 소통을 브랜드 이미지로 개선하거나, 고급효과에 전략적으로 이용되고, 마케팅에 크게 사용되고 있습니다.일상적으로 찍는 동영상이나 손으로 그린듯한 자연스러운 드로잉 일러스트등이 여러기법을 통해 스토리텔링이 계속 될것으로 보입니다.

20160104_004

20160104_005

Source:http://34.ge/en

3. UI 애니메이션.

2015년보다 더 유행할것으로 보여지는 애니메이션은 Google Material Design과 플랫 디자인에서 오는 심플함을 보완하기 위해서 웹페이지와 모바일 어플리케이션에 다양한 애니메이션이 보여질것으로 보여집니다. 통해서 다양하게 재미있는 애니메이션을 볼수 있을것입니다.

모바일의 경우는 터치한 후에 어플리케이션 페이지 이동 할때 나오는 애니메이션, 버튼 애니메이션, 로딩 애니메이션이 있을수 있겠습니다.

20160104_006

4. 그라데이션 백그라운드배경 활용.

1번에서 말한것과 같이 백그라운드 이미지를 패턴이나 일러스트를 이용할것으로 보는것을 언급하였습니다. 플랫 디자인할때 깔끔한 단색 컬러를 이용하여 백그라운드 배경을 만들었지만, 그라데이션 컬러를 통하여 감성적이고 깊고 화려한한 웹사이트가 유행할것으로 예상됩니다.

모바일 경우는 그라데이션을 사용하여 아이콘이나 텍스트에 더 집중이 될수 있도록 도와줄것으로 보입니다.

Source:https://yearinmusic.spotify.com/en-GB

20160104_010

20160104_011

Source:https://dribbble.com/shots/1718042-Weather-App

 

 

5. 시네마그래픽.

시네마그래프(Cinemagraph)란 시네마와 포토그래프의 합성어입니다. 움직이는 이미지를 만드는 사진 예술입니다. 애플 아이폰의 라이브 포토가 나오면서 일명 움짤이라고 있습니다.이 움짤(라이브포토)들로 광고주들과 콘텐츠 제작자들은 시네마 그래프의 힘을 알게 되었습니다.

멈춰있는 사진보다 강조될수있고, 고객에게 인상이 더 오래 남겨진다는것을 알았습니다. 앞으로 아이폰 움짤 사진으로 재미있고 독특하여 더 많이 사용하게 될것으로 보입니다.

20160104_012

20160104_013

 

 

6. Texture(질감).

백그라운드 컬러나 사진, 일러스트, 버튼 등에 텍스쳐(질감)를 활용하여 디테일한 표현을 할수 있으며, 플랫한 웹사이트나, 모바일 어플리케이션에 질감등을 넣어서 더욱더 느낌을 갖게하여 풍부한 경험을 갖게 할 수 있을것입니다.

20160104_014

Source:http://www.because-recollection.com

 

7. 타이포그래피. 많은 요소중에 가장 많은 변화를 보이는 요소는 타이포그래피인것 같습니다. 웹폰트가 모든 사람들에게 접근이 쉬워지면서 온라인 타이포그래피는 엄청난 변화를 맞이하였습니다. 2015년에는 단색과 얇고 간단한 폰트를 사용했다면, 2016년도에는 여러색상 조합과 굵고 강한 타이포그래피들이 유행할것으로 보입니다.

20160104_015

Source:http://tennentbrown.co.nz

 

20160104_016

Source:http://worldseasiestdecision.org/en-us

2016년 UI트렌드를 조사하면서 많은 요소들을 조사하였지만, 간추려서 몇개를 추려서 정리하였습니다. 2015년에 유행하였던 플랫한 디자인과 머터리얼 디자인은 계속 강조될것으로 보입니다.

참고 사이트

  • http://www.awwwards.com/
  • http://capptivate.co/
  • http://story.pxd.co.kr/865
  • https://dribbble.com
  • http://www.worldweb.co.kr/articles/articles_view.html?idno=16076
  • http://www.webdesign-inspiration.com/blog/5-web-design-predictions-for-2016

Dashboard UI Design

안녕하세요! 와탭의 UI 디자이너입니다. 그간 User Interface 디자인을 하면서 갖고있던 팁을 소개하고자 합니다.

대시보드는 하나의 화면에서 여러 정보들을 간단하게 요약하여 보여줍니다. 사용자가 필요한 정보를 빨리 찾을 수 있도록, 많은 정보를 다양한 시각화로 표현하여 이에 대한 의사 결정이나 조치를 취할 수 있도록 도와줍니다.

사용하는 템플릿에 따라 기본 내장되어 있는 대시보드가 있을 테지만 디자이너는 기본 대시보드에 만족해 하지 않고, 새로운 자기만의 그리고 컨셉에 맞는 UI를 구축하여 사용자 관점으로 대시보드를 만들고 싶어합니다.

하지만, 웹 페이지와 달리 대시보드는 어떻게 손을 대야할지 처음부터 망설여지게 됩니다. 아래와 같이 몇가지 팁을 보시고 대시보드 디자인을 한번 해보시길 바랍니다.

1. 웹사이트를 볼때 사용자는 제일먼저 컨텐츠 영역의 왼쪽에서 오른쪽으로 가로 읽기를 시작합니다. 이 행동은 보통 컨텐츠 영역의 제일위쪽에서 시작되며 F자 형태의 위의 가로줄에 해당하는 행동입니다. (Jakob Nielsen은 2006년)

대시보드 또한 이러한 경험을 토대로 디자인하면 좋습니다. 잘 설계된 대시보드는 왼쪽 상단에는 가장 긴급하고 중요한 정보를 배치하고, 낮은 우선 순위와 자주 변화하는 정보들을 하단영역에 배치 합니다.

20150917_001

 

2. 부적절한 시각화로 정보를 잘못된 메시지로 전달하여 사용자에게 혼돈을 줄수 있습니다. 아래 두개의 차트는 동일한 데이터를 보여줍니다.

최근 5개월동안의 판매율을 볼수 있는 차트인데, 원 차트로 표현된 차트는 범주와 차트를 따로 봐야하는 불편함을 초래합니다. 막대그래프를 통하여 한눈에 5개월간의 판매율을 그래프를 통해 한눈에 볼 수 있습니다.

정보를 시각화하기위해서는 적절한 차트를 사용하는게 중요합니다.

20150917_002

 

Source:www.ubiq.co

3. 대시보드는 많은 정보를 시각화 하고, 포장하여 사용자에게 주요정보를 강조하고, 정보의 관계들을 표현해야 합니다. 그러기 위해서는 색상을 통해 사용할 수있는데 사용자는 색상을 통하여 쉽게 정보를 스마트하게 알수 있습니다.

20150917_003

Source:www.ubiq.co

그림과 같이 그래프로 3개로 그룹화가 된것이 있습니다. 맨위에는 전체 판매통계 / 중간에는 제품 판매 통계 / 아래는 지역 판매 통계입니다. 이것을 색상으로 그룹화로 표현하여 정보들을 분류 할 수 있습니다.

4. 탭으로 서브 메뉴를 구성해보자. 웹사이트나 블로그를 돌아다니면 탭으로 구분된 메뉴를 종종 볼 수 있습니다. 탭으로 메뉴를 구성하다보면 가로나 세로로 나열된 정보를 작은 공간에 표시 할 수 있다는 장점이 있습니다. 그리고 사용자가 많은 페이지를 이동하지 않아도 한 화면에서 여러가지 정보를 볼수 있다는 장점이 있습니다.

5. 색상을 통하여 중요 정보를 강조하고 그룹화를 시키는 것은 가장 좋은 방법이지만, 너무 많은 색상을 사용하게 되면 사용자는 시각적으로 복잡함을 느낄수 있어 혼돈을 느낍니다.

20150917_004

20150917_004-1

똑같은 데이터를 가진 차트입니다. 첫번째에서 사용된 차트는 컬러로 새로운 정보를 주지 않습니다. 이런경우에는 사용자는 컬러를 사용하게 된 이유를 찾게되고 혼돈을 갖게됩니다. 우리는 여기서 갖아야 하는 정보는 최근 5개월 동안의 판매율만 알면 됩니다. 그럼 컬러를 단색으로 표현한 두번째 차트가 오히려 사용자에게 신속한 비교를 주어 정보를 쉽게 알게합니다. 차트의 성격을 정확히 파악하고, 색상을 적절하게 사용하는 것이 좋은 대쉬보드 디자인이라 할 수 있습니다.

6. 디자이너는 텍스트로 표현된 정보를 어떤 디자인으로 차트화를 해야하는지 고민도 많습니다. 차트 디자인은 여러가지가 있습니다.

6-1. Line charts는 날짜와 시간이 지남에 따라 보여주는 정보를 표현할때 가장 많이 사용합니다.

20150917_005

 

6-2. Bar and column charts를 사용하는 디자인은 나란히 값 정보를 비교할때 많이 사용합니다.

20150917_006-1

 

6-3. Basic (Layered) Area chart는 라인형 차트를 기반으로 합니다. 축과 라인 사이의 면적이 부피를 나타내는 색상으로 채워지는 차트입니다. 이 차트는 시간에 따라 변화의 크기를 강조하고 합계 정보를 확인하는데 사용할 수 있습니다. 예를 들어 시간에 따른 이익을 볼때 총이익을 강조할때 사용할 수 있습니다.

20150917_007

6-4. Single number card tiles는 대부분 상단에 모두 같은 크기로 가장 중요한 정보를 표현할때 사용합니다. 가장 중요한 숫자를 보여주고 싶을때 이러한 그래프는 가장 효과적입니다.

20150917_008

 

6-5. Combo charts는 라인차트와 막대차트를 결합한 차트입니다. 이 2개의 차트를 결합하면 좀더 빠른 비교를 사용자는 할 수 있습니다. X축 값은 공유하지만, Y축 값은 각기 다른 데이터를 통해 나열해 표현할 수 있는 차트를 말하며 흔히 혼합차트라고 합니다. 즉 하나의 차트 종류가 아닌 두가지의 차트를 표현하고, 캔버스 공간을 절약해주는 장점이 있습니다.

20150917_009

 

6-6. Doughnut charts는 원형 차트와 비슷합니다. 단일 카테고리 있는 값을 비교할때 사용합니다. 각 카테고리의 값을 퍼센트로 보여주게 됩니다.

20150917_010

 

by Goran Milovanovic6-7. Funnel charts는 순차적으로 연결 단계를 가지고 과정을 시각화하는데 도움이 됩니다. 주로 수익 매출 거래등을 계산할때 사용합니다.

20150917_011

20150917_011-1

 

6-8. Gauge charts는 목표를 향해 진행상황을 보여주는 차트입니다. 핵심성과 지표처럼 백분위 측정으로 나타내며, 단일 측정의 상태를 말합니다. 빠르게 이해할 수 있는 정보를 표시합니다.

20150917_012

 

by Justin Roberts

6-9. Maps은 주로 지도를 추상화시켜 보여주고 데이터와 지도와의 상관관계를 색상이나 라벨, 버블/패널등을 이용하고, 툴팁등을 통해 표현하는 것으로, 지도를 통해 데이터를 표현하는 차트입니다. 대표적인 사례로는 기상청의 날씨예보를 손쉽게 생각할 수 있습니다. 공공기간의 위치, 은행지점의 위치, 인구밀도..등등 최근의 데이터시각화 추세와 함꼐 많이 쓰이는 차트입니다.

20150917_013

20150917_013-1

 

6-10. Pie charts는 비율에 따라 분리된 표입니다. 각 부분은 수량을 각도와 면적으로 나타냅니다. 파이차트가 시각적으로 매력적인 것은 중앙각도와 원지름의 길이로 각각의 비율을 나타낸다는 것입니다.

5개이 이상의 항목을 넣지않아야 합니다. 작은 값을 구분하는것은 상당히 어렵습니다. 여러개로 나누어서 표현하게 되면 전달력이 떨어집니다. 필요하다면 수치가 작은것은 기타로 정리하여 표현하는것이 좋습니다. 복수의 파이차트로 비교를 하면 안됩니다. 나누어진 파트는 비교하기 어렵습니다.

또한, 합계가 100%인지 확인하여 사용하시기 바랍니다. 순서에 맞게 분리해야합니다. 그 순서는 2가지 방법이 있는데, 가장 큰 12시 지점에서 왼쪽. 두번째 큰값을 12시 지점의 오른쪽에 위치하여야 합니다. 나머지 값은 반시계방향으로 나열합니다. 나머지 방법은 가장 큰 값부터 12시 지점을 중심으로 시계 방향으로 나열합니다.

20150917_014

 

 

by Eric Atwell

6-11. Scatter charts는 여러개의 데이터 계열에 있는 숫자 값 사이의 관계를 표시하며, 2개의 데이터 관계를 나타내는 차트입니다. 일련의 데이터에 있는 값 사이의 연관성을 보여주는 차트라고 할수 있습니다.

20150917_015

 

by Ricardo Salazar

6-12. bubble charts는 거품의 크기로 데이터 값을 표현하는 차트입니다. 데이터의 비율 또는 양을 표시하여 비교할 수 있습니다.

20150917_016

 

by Gavin

20150917_016-1

by Lane Kinkade

6-13. Waterfall charts는 일련의 양수 및 음수값을 누적 효과를 표시합니다. 대부분 재무데이터와 같이 자금 유출입을 나타낼때 사용합니다.

20150917_017

20150917_017-1

 

제가 몇년간 디자이너로써 경험했던 대시보드 UI 디자인을 글로 써내려 보았습니다. 대시보드는 정확한 정보를 사용자에게 알려주는 또하나의 시각정보입니다. 사용자가 한눈에 알아 볼수있도록 정보들을 시각화 한다는 것은 쉬운일이 아니란것을 현재 디자인하면서도 알고 있습니다..

하지만 위에서 말한 몇가지 유의사항을 검토하여 사용자에게 정보를 쉽게 알려주고 빠른 시간안에 정보를 얻어가는 UI 디자이너가 되셨으면 좋겠습니다.

감사합니다.