Creative Dialogue

11월 18, 2016 /뉴스 및 이벤트 /

드림위버로 모던한 웹 디자인 UI 제작

동일한 모양과 분위기의 인터페이스를 수년간 고수해 온 드림위버(Dreamweaver) 팀은 단지 미적으로 보기 좋지 않다는 이유에서가 아니라(설령 우리가 보기 좋다고 생각할지라도) 코딩, 제작 속도 등의 작업 효율성 향상을 위한 새롭고 세련된 인터페이스를 디자인해야 할 시기가 왔다는 것을 깨달았습니다. 이 팀의 제품 관리자, 디자이너, 엔지니어가 함께 모여 UI에 관한 중요한 질문, 즉 웹 디자이너와 개발자를 위한 모던한 UI를 어떻게 디자인할 것인지를 자문했습니다.

우리는 생산성을 최대한 높이고 눈의 피로는 최소화하면서 다른 어도비 크리에이티브 클라우드 앱과 함께 가정에서도 바로 확인할 수 있는 부가 기능을 포함한 유연한 유저 인터페이스(UI)를 갖춘 웹 개발 툴을 구상했습니다. 드림위버 CC가 출시된 이후 처음으로 소프트웨어의 UI를 전면 검토하여 모던화를 추진하려는 비전이었습니다. 현재 드림위버 무료시험 버전을 다운로드하여 체험해볼 수 있습니다.

드림위버 베타 버전을 거쳐 이용 가능했던 업데이트 된 UI에는 팀이 촉각을 곤두세웠던 몇 가지 기능이 있었습니다.

트렌드를 반영한 어두운 UI 도입

모던한 디지털 제품의 표준으로 어두운 UI가 대두하게 된 데는 상당한 이유가 있습니다. 어두운 UI는 집중을 방해하는 요소를 최소화하고 코딩이나 디자인 작업에 고도의 집중력을 발휘하게 함으로써 생산성을 높여줍니다. 또한 눈의 피로를 최소화하고 집중력을 발휘하여 효과적으로 작업하도록 해줍니다. 궁극적으로 어두운 UI는 작업 속도를 개선하여 더 많은 작업을 가능하게 합니다.

devworkspace-1024x576

드림위버 베타 버전시 어두운 UI

드림위버 CC 제품 관리자인 아룬 카자(Arun Kaza)는 설명에서 “거의 모든 어도비 제품라인이 어두운 UI로 바뀌었습니다. 가장 주된 이유는 어두운 UI가 콘텐츠에 집중하고 주변의 다른 패널이나 컨트롤로 집중력이 분산되지 않게 하는 데 일조하기 때문입니다.”라고 하면서 “우리는 사용자들이 작업의 핵심인 콘텐츠에 주력하고 집중하기를 원합니다. 많은 코딩 전문가와 개발자들은 이미 어두운 UI에 익숙해져 있습니다.”라고 덧붙입니다.

개인의 취향 고려

어두운 UI가 작업의 효율성을 향상시키고 눈의 피로를 줄이는 데 일조한다지만, 드림위버 팀은 개인의 작업 취향에 대한 맞춤 설정이 그 무엇보다 중요하다는 것을 파악하고 있습니다. 디자이너는 대부분 자신만의 워크플로우를 가지고 있는데 이번 업그레이드에는 작업 영역을 손쉽게 사용자 설정할 수 있는 기능이 포함되어 있습니다. 베타 버전에서 제공하는 선택 가능한 색상 테마를 통해 사용자가 원하는 경험에 맞게 툴을 구성하고 맞춤화할 수 있습니다.

“색상은 그야말로 개인적인 취향입니다. 맞춤 설정 옵션을 제공하는 이유가 바로 여기에 있으므로 얼마든지 밝은 UI를 설정할 수 있습니다.”라고 아룬은 말합니다.

ui-brightness

드림위버 베타 버전 시 UI 밝기 설정

분산되고 번잡한 요소 제거

코딩 작업에 빠져있을 때 사용자가 우려하는 것은 불필요한 버튼이나 필요한 코드를 찾기 위한 수없는 스크롤로 주의가 분산되는 것입니다. 개발 팀은 가벼우면서 산만하지 않은 정돈된 UI를 디자인했습니다.

아룬은 “UI의 상단과 하단에서 불필요하고 번잡한 요소를 없애는 방식으로 UI를 디자인했습니다. 덕분에 사용자는 더 많은 위 아래 공간을 확보하게 되었고 이로 인해 더 많은 코드를 보고 여기에 집중할 수 있습니다. 이제 사용자는 코드 뷰에서 불필요한 요소 때문에 집중력이 흐려지지 않을 것입니다.”라고 덧붙입니다.

그러나 가장 간결하고 정돈된 공간일지라도 기본 툴을 빠르고 쉽게 사용할 수 있어야 합니다. 이러한 이유로 모든 메뉴와 패널을 보다 직관적이고 간결하며 심미적으로도 눈에 띄게 새롭게 디자인했습니다. 사용자가 상황에 맞는 툴을 통해 원하는 대로 주요 메뉴를 추가하고 숨기는 기능을 사용하여 필요한 기능을 신속하게 찾을 수 있으므로 작업 영역을 가능한 간소하게 유지하거나 특정 기능을 신속하게 사용할 수 있습니다.

사용자가 원하는 시각적 경험을 지원하는 UI

드림위버 팀은 디자이너와 개발자의 워크플로우가 그들이 제작 중인 사이트의 작업 유형에 따라 서로 다르다는 것을 인지하고 있습니다. 특별히, 하드코어 코딩 전문가를 위한 특수한 UI가 존재한다고 아룬은 역설하고 있습니다.

devworkspace3-1024x576

드림위버 베타 버전 시 적합한 작업 영역 선택

“우리는 하드코어 코딩 전문가를 위해 시각적 패널을 없애고 최소한의 코드 중심 워크플로우와 코드 중심 UI만 표시하는 작업 영역을 고심했습니다. 개발자들이 사용하지 않고 있거나 불필요한 패널들로 인해 시스템이 느려지지 않으므로 드림위버 실행 속도가 더욱 빨라졌습니다. 실행 시간을 비롯해 처리 속도가 보다 향상되어 사용자들은 이전 버전보다 가볍고 한층 빨라진 드림위버를 경험할 수 있을 것입니다.”

자세히 알아보려면 무료시험 버전을 다운로드하여 최신 버전을 사용해 보고 새로운 기능을 살펴보시기 바랍니다.

 

 

91934503269ba6009b99a365e31ed863

 

The Creative Cloud Team

 

 

 

 

 

뉴스 및 이벤트

Join the discussion