KR20200011721A - 시각화된 사용자 인터페이스 구성 방법 - Google Patents

Abstract

본 발명은 시각화된 사용자 인터페이스 구성 방법에 관한 것으로, 보다 상세하게는 미리 설정된 적어도 하나 이상의 키 입력을 감지하는 단계; 및 적어도 하나 이상의 레이어 중 웹 페이지에 대응하는 레이어를 적용하는 단계를 포함하며, 상기 레이어는 미리 설정된 동작 순서에 따라 표시 수단을 연속적으로 표시하여 동작 경로를 나타낼 수 있다.

Description

시각화된 사용자 인터페이스 구성 방법{METHOD FOR CONFIGURING A VISUALIZED USER INTERFACE}

본 발명은 시각화된 사용자 인터페이스 구성 방법에 관한 것으로, 보다 상세하게는 미리 설정된 키 입력 시 사용자 인터페이스 상에 레이어를 추가하여 사용자가 동작 경로를 직관적으로 확인할 수 있도록 하는 시각화된 사용자 인터페이스 방법에 관한 것이다.

현대 사회는 무한한 정보와 지식기반의 사회로서 다양한 지식을 얻거나 공유, 창출하고 있다. 특히, 인터넷의 발달과 함께 사용자가 늘어나면서 이들을 수용하기 위한 다양한 웹 사이트 제작 및 서비스가 제공되고 있으며, 우리는 그 속에서 정보를 얻어 사용하고 있다.

하지만 대부분의 웹 사이트와 서비스들은 청·장년층을 중심으로 되어 있고 어린이나 노인, 장애인들의 편의성이나 신체적, 정신적 환경을 대부분 고려하지 않고 있다. 일반 사용자를 비롯하여 어린이나 노인, 장애인들의 인터넷 사용자가 점점 늘어나고 이들을 위한 웹 사이트가 별도로 제공되고 있으나 아직은 미비한 상태이며 이를 인식하지 못하고 있는 사용자들도 많다. 이에 따라 정보와 지식기반의 사회에서 지식을 얻거나 공유하기 어려워지고 결국 정보격차로 소외될 수 있다. 따라서 청·장년층뿐만이 아닌 모든 사용자를 고려한 웹 사이트 제작이 무엇보다 중요하며 이를 위해 어떠한 노력을 하고 있는지, 어떤 점들을 개선하여야 하는지를 분석하여 좀 더 나은 방향으로 나아가야 한다. 모든 사용자가 쉽게 사용할 수 있는 디자인이 바로 유니버설 디자인(Universal design)이며 이를 구현하기 위한 방법이 웹 접근성(Web Accessibility)이라 할 수 있다.

국내·외에서는 웹 접근성을 위한 정책이 펼쳐지고 있으며 우리나라에서는 인터넷 웹콘텐츠 접근성 지침(Internet Web Contents Accessibility Guidelines)을 정의하였으며, 이를 적용한 웹 사이트가 제작되고 있으나 그 수가 적고 웹 접근성 향상의 중요성을 잘 인식하지 못하고 있는 실정이다.

기존에는 탭(Tab) 키 입력 시, 이동하는 포커스를 표시하거나 해당 포커스 위치에 순번을 표기하는 방식을 적용하여 웹 접근성 설정을 시각화하고 있으나, 복잡한 페이지의 경우 이러한 방식만으로는 사용자가 직관적으로 접근성 설정을 확인하기가 어렵다.

따라서, 별도 프로그램 없이도 사용자가 직관적으로 동작 경로를 확인할 수 있도록 하여 웹 접근성을 향상시키는 기술이 개발될 필요가 있다.

따라서, 본 발명은 상기한 바와 같은 문제점을 해결하기 위하여 제안된 것으로, 사용자 인터페이스 상에 레이어를 적용함으로써, 사용자가 동작 경로를 직관적으로 확인할 수 있도록 하는 시각화된 사용자 인터페이스 구성 방법을 제공한다.

또한, 본 발명은 적어도 하나 이상의 화살표를 이용하여 사용자 인터페이스 상에 각 동작 경로를 연속적으로 표시함으로써, 사용자의 시선이 분산되지 않도록 하는 시각화된 사용자 인터페이스 구성 방법을 제공한다.

또한, 본 발명은 웹 접근성을 향상시킴으로써, 사용자의 동작 및 작업 효율이 향상되도록 하는 시각화된 사용자 인터페이스 구성 방법을 제공한다.

본 발명의 목적은 이상에서 언급한 것으로 제한되지 않으며, 언급되지 않은 또 다른 목적들은 아래의 기재로부터 본 발명이 속하는 기술 분야의 통상의 지식을 가진 자에게 명확히 이해될 수 있을 것이다.

상기와 같은 목적을 달성하기 위한 본 발명에 따른 사용자 인터페이스 구성 방법은, 미리 설정된 적어도 하나 이상의 키 입력을 감지하는 단계; 및 적어도 하나 이상의 레이어 중 웹 페이지에 대응하는 레이어를 적용하는 단계를 포함하며, 상기 레이어는 미리 설정된 동작 순서에 따라 표시 수단을 연속적으로 표시하여 동작 경로를 나타낼 수 있다.

본 발명에 의하면, 사용자 인터페이스 상에 레이어를 적용함으로써, 사용자가 동작 경로를 직관적으로 확인할 수 있도록 한다.

또한, 본 발명에 의하면, 적어도 하나 이상의 화살표를 이용하여 사용자 인터페이스 상에 각 동작 경로를 연속적으로 표시함으로써, 사용자의 시선이 분산되지 않도록 한다.

또한, 본 발명에 의하면, 웹 접근성을 향상시킴으로써, 사용자의 동작 및 작업 효율이 향상되도록 한다.

본 발명의 효과는 이상에서 언급한 것으로 제한되지 않으며, 언급되지 않은 또다른 효과들은 아래의 기재로부터 본 발명이 속하는 기술 분야의 통상의 지식을 가진 자에게 명확히 이해될 수 있을 것이다.

도 1은 기존의 사용자 인터페이스의 구성을 나타내는 도면이다.
도 2는 본 발명의 실시예에 따라 구성된 사용자 인터페이스를 나타내는 도면이다.
도 3a은 본 발명의 실시예에 따라 구성된 사용자 인터페이스에서 조건을 설정하는 일 예를 나타내는 도면이다.
도 3b은 본 발명의 실시예에 따라 구성된 사용자 인터페이스에서 설정된 조건이 적용된 일 예를 나타내는 도면이다.
도 4는 본 발명의 실시예에 따라 시각화된 사용자 인터페이스를 구성하는 방법을 나타내는 순서도이다.

본 발명의 목적 및 효과, 그리고 그것들을 달성하기 위한 기술적 구성들은 첨부되는 도면과 함께 상세하게 후술되어 있는 실시예들을 참조하면 명확해질 것이다. 본 발명을 설명함에 있어서 공지 기능 또는 구성에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에는 그 상세한 설명을 생략할 것이다. 그리고 후술되는 용어들은 본 발명에서의 기증을 고려하여 정의된 용어들로서 이는 사용자, 운용자의 의도 또는 관례 등에 따라 달라질 수 있다.

그러나, 본 발명은 이하에서 개시되는 실시예들에 한정되는 것이 아니라 서로 다른 다양한 형태로 구현될 수 있다. 단지 본 실시예들은 본 발명의 개시가 완전하도록 하고, 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 발명의 범주를 완전하게 알려주기 위해 제공되는 것이며, 본 발명은 청구항의 범주에 의해 정의될 뿐이다. 그러므로 그 정의는 본 명세서 전반에 걸친 내용을 토대로 내려져야 할 것이다.

본 발명은 사용자가 미리 설정된 키를 입력하여 사용자 인터페이스 상에 레이어를 추가하여 동작 경로를 연속적으로 표시하는 것이다. 이를 통해, 사용자는 동작 경로를 직관적으로 빠르게 확인할 수 있다.

이하에서는 본 발명의 실시예에 따른 시각화된 사용자 인터페이스 구성 방법에 대하여 첨부된 도면을 참고하여 구체적으로 설명하기로 한다.

도 1은 기존의 사용자 인터페이스의 구성을 타내는 도면으로, 사용자가 CHM(Microsoft Compiled HTML Help) 관리 카테고리를 선택했을 때 구성되는 사용자 인터페이스의 일 예를 도시한 것이다.

도 1을 참조하면, 기존의 사용자 인터페이스(100)는 상태표시부(110), 설정부(130), 데이터표시부(150), 실행부(170)를 포함하여 구성될 수 있다.

상태표시부(110)에는 카테고리가 표시되고, 설정부(130)에는 그 카테고리에 포함된 데이터들 중 선택적인 데이터만을 필터링하기 위한 조건을 설정할 수 있는 설정창과 그 설정된 필터링 조건에 따라 데이터에 대한 필터링을 실행하도록 하는 검색 실행 버튼이 형성된다. 한편, 도 1에는 도시되지 않았지만, 설정부(130)에는 검색창을 더 형성하여 미리 형성된 필터링 조건 내에서 선택적으로 설정하지 않고도, 직접 검색어를 입력하여 원하는 데이터만을 필터링 하도록 할 수도 있다.

데이터표시부(150)에는 해당 카테고리에 포함된 데이터들이 정렬되어 표시되는데, 만약, 설정부(130)에서 필터링 조건을 설정한 상태라면, 해당 카테고리 내의 데이터들 중 필터링 조건을 만족하는 데이터들이 정렬된다. 만약, 해당 카테고리에 포함된 데이터가 전혀 존재하지 않거나, 해당 카테고리 내에 데이터들이 존재하지만 그 중 필터링 조건을 만족하는 데이터가 존재하지 않는다면, 데이터표시부(150)에는 데이터들이 정렬되지 않을 수 있다.

실행부(170)에는 데이터표시부(150)에 표시된 데이터들 중 사용자에 의해 선택된 적어도 하나 이상의 데이터를 실행할 수 있는 생성 버튼이 형성된다. 또한, 전체의 데이터를 선택할 수 있도록 하는 체크 박스가 더 형성될 수 있을 뿐만 아니라, 선택된 데이터에 대한 정보를 표시할 수도 있다.

본 발명은 별도의 소프트웨어 없이 앞서 설명한 기존의 사용자 인터페이스에 적용 가능한 것으로, 이하에서는 도 1에서 설명한 사용자 인터페이스의 일 예를 기반으로 본 발명에 대해 구체적으로 설명한다.

도 2는 본 발명의 실시예에 따라 구성된 사용자 인터페이스의 일 예를 나타내는 도면이다.

먼저, 사용자는 웹 접근성 경로를 화면에 표시하도록 하기 위해서 미리 설정된 단축키를 입력하고, 그 미리 설정된 단축키가 입력되면 사용자 인터페이스에는 그 웹 페이지 상에 레이어가 추가된다. 이를 통해, 기존의 사용자 인터페이스에 동작 경로가 표시되는 것이다. 한편, 이러한 기능은 라이브러리 형태로 제공되며, 기존의 사용자 인터페이스에 스크립트 삽입 형식으로 동작한다.

이때, 동작 경로는 동작 순서에 따라 사용자의 시선이 이동하도록 표시한다. 이때, 사용자의 시선이 분산되지 않도록 하기 위해 방향성을 갖는 화살표를 적어도 하나 이상 연속적으로 사용하여 동작 경로를 표시한다.

이러한 기능은 라이브러리 형태로 제공되며,

도 2를 참조하면, 동작 순서가 카테고리 확인, 필터링 조건 확인, 필터링 조건 설정, 필터링 실행, 데이터 정보 확인, 생성 실행, 전체 생성, 선택된 패치 확인, 종료 순으로 진행되어야 하는 경우, 선택 상태표시부(110)의 카테고리 표시에서 설정부(130)의 조건 설정 절차를 거치도록 화살표가 표시된다.

또한, 사용자가 검색을 실행한 후, 데이터표시부(150)에 검색을 통해 정렬된 데이터들의 패치번호를 확인하도록 화살표가 표시되며, 그 중 데이터를 선택한 후, 실행부(170)의 생성 버튼을 실행하도록 화살표가 표시된다.

아울러, 사용자가 전체 데이터에 대한 생성을 실행할 수도 있고, 선택된 패치/버전에 대한 정보를 확인하고 동작을 종료할 수 있도록 화살표가 표시된다.

도 3a은 본 발명의 실시예에 따라 구성된 사용자 인터페이스에서 조건을 설정하는 일 예를 나타내는 도면이고, 도 3b은 본 발명의 실시예에 따라 구성된 사용자 인터페이스에서 설정된 조건이 적용된 일 예를 나타내는 도면이다.

먼저, 사용자는 예를 들어, 그리드(Grid), 달력과 같은 복합적인 컴포넌트, 디비전, 또는 탭 페이지의 경우에 접근 레벨을 지정하여 그 세부적인 동작 경로를 표시하도록 할 수 있다.

도 3a를 참조하면, 사용자는 그리드 컴포넌트 시각화, 전체 페이지 시각화 중 어느 하나를 선택하도록 구성될 수 있으며, 사용자는 미리 설정된 단축키를 입력함으로써 접근 레벨을 지정할 수 있도록 하는 선택창이 표시되도록 할 수 있다.

접근 레벨을 지정할 수 있도록 하는 선택창이 표시되면, 사용자는 원하는 접근 레벨을 지정/선택한다.

도 3b는 앞서 사용자가 지정한 접근 레벨에 따라 그 세부적인 동작 경로를 표시한 것이다.

도 4는 본 발명의 실시예에 따라 시각화된 사용자 인터페이스를 구성하는 방법을 나타내는 순서도이다.

사용자로부터 입력되는 단축 키, 즉 미리 설정된 적어도 하나 이상의 키 입력을 감지하고(S401), 입력이 감지되면 적어도 하나 이상의 레이어 중 해당 웹 페이지에 대응하는 레이어를 적용하여 동자 경로를 표시한다(S403).

이때, 레이어는 미리 설정된 동작 순서에 따라 표시 수단을 연속적으로 표시하여 동작 경로를 나타내는 것으로, 그 표시 수단은 예를 들어 방향성을 갖는 화살표가 될 수 있다.

이후, 사용자로부터 적어도 하나 이상의 컴포넌트 중 하나가 선택되는지 여부를 감지하고(S405), 선택이 감지되면 그 선택된 컴포넌트에 대응하는 레이어를 해당 웹 페이지 상에 적용하여 세부 동작 경로를 표시한다(S407).

본 명세서와 도면에는 본 발명의 바람직한 실시예에 대하여 개시하였으며, 비록 특정 용어들이 사용되었으나, 이는 단지 본 발명의 기술 내용을 쉽게 설명하고 발명의 이해를 돕기 위한 일반적인 의미에서 사용된 것이지, 본 발명의 범위를 한정하고자 하는 것은 아니다. 여기에 개시된 실시예 외에도 본 발명의 기술적 사상에 바탕을 둔 다른 변형예들이 실시 가능하다는 것은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에게 자명한 것이다.

110: 상태표시부 130: 설정부
150: 데이터표시부 170: 실행부

Claims (3)

1. 시각화된 사용자 인터페이스 구성 방법에 있어서,
   미리 설정된 적어도 하나 이상의 키 입력을 감지하는 단계; 및
   적어도 하나 이상의 레이어 중 웹 페이지에 대응하는 레이어를 적용하는 단계를 포함하며,
   상기 레이어는 미리 설정된 동작 순서에 따라 표시 수단을 연속적으로 표시하여 동작 경로를 나타내는 것임을 특징으로 하는 시각화된 사용자 인터페이스 구성 방법.
   
2. 제1항에 있어서,
   상기 표시 수단은,
   화살표인 것을 특징으로 하는 시각화된 사용자 인터페이스 구성 방법.
   
3. 제1항에 있어서,
   상기 사용자 인터페이스가 적어도 하나 이상의 컴포넌트로 구성된 경우,
   상기 적어도 하나 이상의 컴포넌트 중 하나를 선택하고, 상기 선택된 컴포넌트에 대응하는 레이어를 적용하는 것을 특징으로 하는 시각화된 사용자 인터페이스 구성 방법.

Images