KR20210142839A

KR20210142839A - 디자인 킷을 이용한 업무 협업을 위한 방법, 시스템, 및 비-일시적인 컴퓨터 판독가능한 기록 매체

Info

Publication number: KR20210142839A
Application number: KR1020200059515A
Authority: KR
Inventors: 한백희; 정고운; 김성철; 김상태
Original assignee: 네이버클라우드 주식회사
Priority date: 2020-05-19
Filing date: 2020-05-19
Publication date: 2021-11-26
Also published as: JP7387577B2; JP2021182366A; KR102543722B1; KR20220139849A; SG10202011511PA; KR102453345B1

Abstract

디자인 킷을 이용한 업무 협업을 위한 방법, 시스템, 및 비-일시적인 컴퓨터 판독가능한 기록 매체가 개시된다. 화면 디자인의 업무 협업을 위한 사이트를 제공할 수 있고, 이때 화면 구성에 사용되는 디자인 요소를 상태 표현과 인터랙션이 포함된 컴포넌트로 코드화하여 제공하고 이러한 컴포넌트를 이용하여 화면을 구성할 수 있다.

Description

디자인 킷을 이용한 업무 협업을 위한 방법, 시스템, 및 비-일시적인 컴퓨터 판독가능한 기록 매체{METHOD, SYSTEM, AND NON-TRANSITORY COMPUTER READABLE RECORD MEDIUM FOR BUSINESS COOPERATION USING DESING KIT}

아래의 설명은 화면 디자인에 대한 업무 협업을 지원하는 기술에 관한 것이다.

현재 웹 상에서 사용되고 있는 언어는 HTML(Hyper Text Markup Language)로, 특별한 데이터 타입이 사용되지 않고 이식성이 뛰어나며 사용이 편리하다. HTML은 전문적인 프로그래밍 지식이 없어도 일반 사용자들이 쉽게 생성하고 편집할 수 있다.

예컨대, 한국공개특허 제10-2002-0031501호(공개일 2002년 05월 02일)에는 HTML 코드를 이용하여 웹 상에서 홈페이지를 제작하는 기술이 개시되어 있다.

HTML은 단순한 구조로 되어 있어서 포맷과 레이아웃을 위한 표현 언어이지 데이터를 기술하기 위한 언어가 아니기 때문에, 간단히 하이퍼텍스트(Hypertext) 문서를 작성하기에는 적합한 반면, 복잡하고 구조화된 문서를 작성하기에는 한계를 가지고 있다.

이를 보완하기 위해 CGI(Common Gateway Interface)나 PHP(Professional HTML Preprocessor), ASP(Active Server Page), JSP(Java Server Page) 등의 언어 등과 함께 개발되고 있다.

그러나, 하나의 화면을 생성하기 위하여 다수의 기능 블록들이 복합적으로 구성되어 있어 코드의 복잡도와 상호 간섭 작용을 증가시키고 재사용성을 감소시키는 문제점이 있다.

화면 디자인에 참여하는 기획자, 디자이너, 개발자가 각자 작업을 하더라도 일관성을 유지할 수 있는 업무 협업 방법 및 시스템을 제공한다.

디자인 킷(design kit)을 이용하여 프로젝트마다 반복되는 프로세스를 줄여 개발 시간을 단축시킬 수 있는 업무 협업 방법 및 시스템을 제공한다.

직관적인 컴포넌트(component) 설계로 쉽고 빠른 커뮤니케이션을 지원할 수 있는 업무 협업 방법 및 시스템을 제공한다.

컴퓨터 시스템에서 실행되는 방법에 있어서, 상기 컴퓨터 시스템은 메모리에 포함된 컴퓨터 판독가능한 명령들을 실행하도록 구성된 적어도 하나의 프로세서를 포함하고, 화면 디자인의 업무 협업을 위한 사이트를 제공하고, 상기 방법은, 상기 적어도 하나의 프로세서에 의해, 화면 구성에 사용되는 디자인 요소를 상태 표현과 인터랙션이 포함된 컴포넌트로 코드화하여 제공하는 단계; 및 상기 적어도 하나의 프로세서에 의해, 서비스하고자 하는 화면의 개발 과정으로 상기 컴포넌트를 이용하여 화면을 구성하는 단계를 포함하는 방법을 제공한다.

일 측면에 따르면, 상기 제공하는 단계는, 상기 컴포넌트의 상태 별 인터랙션을 코드화하여 상기 컴포넌트를 소스 코드와 함께 제공하는 단계를 포함할 수 있다.

다른 측면에 따르면, 상기 제공하는 단계는, 상기 컴포넌트의 상태 별 인터랙션을 코드화하여 상기 컴포넌트를 상기 컴포넌트와 미러링된 소스 코드와 한 세트로 제공하는 단계를 포함할 수 있다.

또 다른 측면에 따르면, 상기 제공하는 단계는, 상기 컴포넌트의 선택 시 상기 컴포넌트의 소스 코드를 복사하여 제공하는 단계를 포함할 수 있다.

또 다른 측면에 따르면, 상기 제공하는 단계는, 상기 디자인 요소 중 하나인 아이콘을 폰트 형태의 컴포넌트로 구성하는 단계를 포함할 수 있다.

또 다른 측면에 따르면, 상기 제공하는 단계는, 둘 이상의 컴포넌트의 조합으로 구성된 모듈을 코드화하여 모듈 단위로 제공하는 단계를 포함할 수 있다.

또 다른 측면에 따르면, 상기 제공하는 단계는, 둘 이상의 모듈의 조합으로 구성된 템플릿을 코드화하여 템플릿 단위로 제공하는 단계를 더 포함할 수 있다.

또 다른 측면에 따르면, 상기 방법은, 상기 적어도 하나의 프로세서에 의해, 열(column) 단위의 규칙과 행(row) 단위의 규칙을 포함하는 그리드 레이아웃을 제공하는 단계를 더 포함할 수 있다.

또 다른 측면에 따르면, 상기 구성하는 단계는, 상기 컴포넌트를 상기 열 단위의 규칙과 상기 행 단위의 규칙에 따라 상기 그리드 레이아웃에 배치하여 상기 화면을 구성할 수 있다.

또 다른 측면에 따르면, 상기 그리드 레이아웃을 제공하는 단계는, 디바이스의 해상도에 따라 그리드 규칙을 기초로 상기 컴포넌트가 변화하는 반응형 레이아웃을 제공할 수 있다.

또 다른 측면에 따르면, 상기 그리드 레이아웃을 제공하는 단계는, 적어도 둘 이상으로 등분이 가능한 열 단위와 일정 높이를 가진 행 단위로 이루어진 상기 그리드 레이아웃을 제공할 수 있다.

또 다른 측면에 따르면, 상기 사이트는 상기 컴포넌트를 포함하는 디자인 킷(design kit)을 이용한 화면 개발 과정을 제공할 수 있다.

또 다른 측면에 따르면, 상기 사이트는 상기 화면 개발 과정 이전에 상기 디자인 킷을 이용한 디자인 컨설팅 과정 및 와이어프레임(wireframe) 과정 중 적어도 하나를 제공할 수 있다.

상기 방법을 상기 컴퓨터 시스템에 실행시키기 위해 비-일시적인 컴퓨터 판독가능한 기록 매체에 저장되는 컴퓨터 프로그램을 제공한다.

상기 방법을 컴퓨터에 실행시키기 위한 프로그램이 기록되어 있는 비-일시적인 컴퓨터 판독 가능한 기록 매체를 제공한다.

컴퓨터 시스템에 있어서, 메모리에 포함된 컴퓨터 판독 가능한 명령을 실행하도록 구현되는 적어도 하나의 프로세서를 포함하고, 상기 적어도 하나의 프로세서는, 화면 디자인의 업무 협업을 위한 사이트를 제공하는 것으로, 화면 구성에 사용되는 디자인 요소를 상태 표현과 인터랙션이 포함된 컴포넌트로 코드화하여 제공하는 컴포넌트 제공부; 열 단위의 규칙과 행 단위의 규칙을 포함하는 그리드 레이아웃을 제공하는 레이아웃 제공부; 및 상기 컴포넌트를 상기 열 단위의 규칙과 상기 행 단위의 규칙에 따라 상기 그리드 레이아웃에 배치하여 화면을 구성하는 화면 구성부를 포함하는 컴퓨터 시스템을 제공한다.

본 발명의 실시예들에 따르면, 반복되는 디자인 요소를 컴포넌트화하고 이를 이용하여 개발자가 스스로 서비스 설계에 맞춰 화면을 구성함으로써 일관된 반응(response)과 사용자 경험(UI) 및 사용자 인터페이스(UI)를 유지할 수 있다.

본 발명의 실시예들에 따르면, 기획자, 디자이너, 개발자 등 화면 디자인에 참여하는 모든 사람들을 위해 반복적인 디자인 과정을 생략하여 효율적인 디자인 프로세스를 제공할 수 있으며, 직관적인 컴포넌트 설계로 쉽고 빠른 커뮤니케이션을 지원할 수 있다.

도 1은 본 발명의 일 실시예에 따른 네트워크 환경의 예를 도시한 도면이다.
도 2는 본 발명의 일 실시예에 있어서 전자 기기 및 서버의 내부 구성을 설명하기 위한 블록도이다.
도 3은 본 발명의 일 실시예에 따른 서버의 프로세서가 포함할 수 있는 구성요소의 예를 도시한 도면이다.
도 4는 본 발명의 일 실시예에 따른 서버가 수행할 수 있는 방법의 예를 도시한 흐름도이다.
도 5는 본 발명의 일실시예에 있어서 컴포넌트의 상태별 타입을 설명하기 위한 도면이다.
도 6은 본 발명의 일실시예에 있어서 컴포넌트의 예시를 도시한 것이다.
도 7은 본 발명의 일실시예에 있어서 컴포넌트의 일례인 입력(input)의 상태별 타입을 도시한 것이다.
도 8은 본 발명의 일실시예에 있어서 코드화된 컴포넌트의 예시를 도시한 것이다.
도 9는 본 발명의 일실시예에 있어서 컴포넌트 집합인 모듈의 예시를 도시한 것이다.
도 10은 본 발명의 일실시예에 있어서 모듈 집합인 템플릿의 예시를 도시한 것이다.
도 11은 본 발명의 일실시예에 있어서 아이콘의 폰트화를 설명하기 위한 예시 도면이다.
도 12는 본 발명의 일실시예에 있어서 아이콘 타입의 예시를 도시한 것이다.
도 13은 본 발명의 일실시예에 있어서 아이콘의 코드 복사를 활용하는 예시를 도시한 것이다.
도 14 내지 도 17은 본 발명의 일실시예에 있어서 화면 구성을 위한 그리드 시스템의 레이아웃 예시를 도시한 것이다.

이하, 본 발명의 실시예를 첨부된 도면을 참조하여 상세하게 설명한다.

본 발명의 실시예들은 화면 디자인에 대한 업무 협업을 지원하는 기술에 관한 것이다.

본 명세서에서 구체적으로 개시되는 것들을 반복되는 디자인 요소를 컴포넌트화하고 이를 이용하여 개발자가 스스로 서비스 설계에 맞춰 화면을 구성할 수 있도록 지원할 수 있다.

도 1은 본 발명의 일실시예에 따른 네트워크 환경의 예를 도시한 도면이다. 도 1의 네트워크 환경은 복수의 전자 기기들(110, 120, 130, 140), 복수의 서버들(150, 160) 및 네트워크(170)를 포함하는 예를 나타내고 있다. 이러한 도 1은 발명의 설명을 위한 일례로 전자 기기의 수나 서버의 수가 도 1과 같이 한정되는 것은 아니다.

복수의 전자 기기들(110, 120, 130, 140)은 컴퓨터 시스템으로 구현되는 고정형 단말이거나 이동형 단말일 수 있다. 복수의 전자 기기들(110, 120, 130, 140)의 예를 들면, 스마트폰(smart phone), 휴대폰, 내비게이션, 컴퓨터, 노트북, 디지털방송용 단말, PDA(Personal Digital Assistants), PMP(Portable Multimedia Player), 태블릿 PC, 게임 콘솔(game console), 웨어러블 디바이스(wearable device), IoT(internet of things) 디바이스, VR(virtual reality) 디바이스, AR(augmented reality) 디바이스 등이 있다. 일례로 도 1에서는 전자 기기(110)의 예로 스마트폰의 형상을 나타내고 있으나, 본 발명의 실시예들에서 전자 기기(110)는 실질적으로 무선 또는 유선 통신 방식을 이용하여 네트워크(170)를 통해 다른 전자 기기들(120, 130, 140) 및/또는 서버(150, 160)와 통신할 수 있는 다양한 물리적인 컴퓨터 시스템들 중 하나를 의미할 수 있다.

통신 방식은 제한되지 않으며, 네트워크(170)가 포함할 수 있는 통신망(일례로, 이동통신망, 유선 인터넷, 무선 인터넷, 방송망, 위성망 등)을 활용하는 통신 방식뿐만 아니라 기기들간의 근거리 무선 통신 역시 포함될 수 있다. 예를 들어, 네트워크(170)는, PAN(personal area network), LAN(local area network), CAN(campus area network), MAN(metropolitan area network), WAN(wide area network), BBN(broadband network), 인터넷 등의 네트워크 중 하나 이상의 임의의 네트워크를 포함할 수 있다. 또한, 네트워크(170)는 버스 네트워크, 스타 네트워크, 링 네트워크, 메쉬 네트워크, 스타-버스 네트워크, 트리 또는 계층적(hierarchical) 네트워크 등을 포함하는 네트워크 토폴로지 중 임의의 하나 이상을 포함할 수 있으나, 이에 제한되지 않는다.

서버(150, 160) 각각은 복수의 전자 기기들(110, 120, 130, 140)과 네트워크(170)를 통해 통신하여 명령, 코드, 파일, 컨텐츠, 서비스 등을 제공하는 컴퓨터 장치 또는 복수의 컴퓨터 장치들로 구현될 수 있다. 예를 들어, 서버(150)는 네트워크(170)를 통해 접속한 복수의 전자 기기들(110, 120, 130, 140)로 제1 서비스를 제공하는 시스템일 수 있으며, 서버(160) 역시 네트워크(170)를 통해 접속한 복수의 전자 기기들(110, 120, 130, 140)로 제2 서비스를 제공하는 시스템일 수 있다. 보다 구체적인 예로, 서버(150)는 복수의 전자 기기들(110, 120, 130, 140)에 설치되어 구동되는 컴퓨터 프로그램으로서의 어플리케이션을 통해, 해당 어플리케이션이 목적하는 서비스(일례로, 업무 협업 서비스 등)를 제1 서비스로서 복수의 전자 기기들(110, 120, 130, 140)로 제공할 수 있다. 다른 예로, 서버(160)는 상술한 어플리케이션의 설치 및 구동을 위한 파일을 복수의 전자 기기들(110, 120, 130, 140)로 배포하는 서비스를 제2 서비스로서 제공할 수 있다.

도 2는 본 발명의 일실시예에 있어서 전자 기기 및 서버의 내부 구성을 설명하기 위한 블록도이다. 도 2에서는 전자 기기에 대한 예로서 전자 기기(110), 그리고 서버(150)의 내부 구성을 설명한다. 또한, 다른 전자 기기들(120, 130, 140)이나 서버(160) 역시 상술한 전자 기기(110) 또는 서버(150)와 동일한 또는 유사한 내부 구성을 가질 수 있다.

전자 기기(110)와 서버(150)는 메모리(211, 221), 프로세서(212, 222), 통신 모듈(213, 223) 그리고 입출력 인터페이스(214, 224)를 포함할 수 있다. 메모리(211, 221)는 비-일시적인 컴퓨터 판독 가능한 기록매체로서, RAM(random access memory), ROM(read only memory), 디스크 드라이브, SSD(solid state drive), 플래시 메모리(flash memory) 등과 같은 비소멸성 대용량 저장 장치(permanent mass storage device)를 포함할 수 있다. 여기서 ROM, SSD, 플래시 메모리, 디스크 드라이브 등과 같은 비소멸성 대용량 저장 장치는 메모리(211, 221)와는 구분되는 별도의 영구 저장 장치로서 전자 기기(110)나 서버(150)에 포함될 수도 있다. 또한, 메모리(211, 221)에는 운영체제와 적어도 하나의 프로그램 코드(일례로 전자 기기(110)에 설치되어 구동되는 브라우저나 특정 서비스의 제공을 위해 전자 기기(110)에 설치된 어플리케이션 등을 위한 코드)가 저장될 수 있다. 이러한 소프트웨어 구성요소들은 메모리(211, 221)와는 별도의 컴퓨터에서 판독 가능한 기록매체로부터 로딩될 수 있다. 이러한 별도의 컴퓨터에서 판독 가능한 기록매체는 플로피 드라이브, 디스크, 테이프, DVD/CD-ROM 드라이브, 메모리 카드 등의 컴퓨터에서 판독 가능한 기록매체를 포함할 수 있다. 다른 실시예에서 소프트웨어 구성요소들은 컴퓨터에서 판독 가능한 기록매체가 아닌 통신 모듈(213, 223)을 통해 메모리(211, 221)에 로딩될 수도 있다. 예를 들어, 적어도 하나의 프로그램은 개발자들 또는 어플리케이션의 설치 파일을 배포하는 파일 배포 시스템(일례로, 상술한 서버(160))이 네트워크(170)를 통해 제공하는 파일들에 의해 설치되는 컴퓨터 프로그램(일례로 상술한 어플리케이션)에 기반하여 메모리(211, 221)에 로딩될 수 있다.

프로세서(212, 222)는 기본적인 산술, 로직 및 입출력 연산을 수행함으로써, 컴퓨터 프로그램의 명령을 처리하도록 구성될 수 있다. 명령은 메모리(211, 221) 또는 통신 모듈(213, 223)에 의해 프로세서(212, 222)로 제공될 수 있다. 예를 들어 프로세서(212, 222)는 메모리(211, 221)와 같은 기록 장치에 저장된 프로그램 코드에 따라 수신되는 명령을 실행하도록 구성될 수 있다.

통신 모듈(213, 223)은 네트워크(170)를 통해 전자 기기(110)와 서버(150)가 서로 통신하기 위한 기능을 제공할 수 있으며, 전자 기기(110) 및/또는 서버(150)가 다른 전자 기기(일례로 전자 기기(120)) 또는 다른 서버(일례로 서버(160))와 통신하기 위한 기능을 제공할 수 있다. 일례로, 전자 기기(110)의 프로세서(212)가 메모리(211)와 같은 기록 장치에 저장된 프로그램 코드에 따라 생성한 요청이 통신 모듈(213)의 제어에 따라 네트워크(170)를 통해 서버(150)로 전달될 수 있다. 역으로, 서버(150)의 프로세서(222)의 제어에 따라 제공되는 제어 신호나 명령, 컨텐츠, 파일 등이 통신 모듈(223)과 네트워크(170)를 거쳐 전자 기기(110)의 통신 모듈(213)을 통해 전자 기기(110)로 수신될 수 있다. 예를 들어 통신 모듈(213)을 통해 수신된 서버(150)의 제어 신호나 명령, 컨텐츠, 파일 등은 프로세서(212)나 메모리(211)로 전달될 수 있고, 컨텐츠나 파일 등은 전자 기기(110)가 더 포함할 수 있는 저장 매체(상술한 영구 저장 장치)로 저장될 수 있다.

입출력 인터페이스(214)는 입출력 장치(215)와의 인터페이스를 위한 수단일 수 있다. 예를 들어, 입력 장치는 키보드, 마우스, 마이크로폰, 카메라 등의 장치를, 그리고 출력 장치는 디스플레이, 스피커, 햅틱 피드백 디바이스(haptic feedback device) 등과 같은 장치를 포함할 수 있다. 다른 예로 입출력 인터페이스(214)는 터치스크린과 같이 입력과 출력을 위한 기능이 하나로 통합된 장치와의 인터페이스를 위한 수단일 수도 있다. 입출력 장치(215)는 전자 기기(110)와 하나의 장치로 구성될 수도 있다. 또한, 서버(150)의 입출력 인터페이스(224)는 서버(150)와 연결되거나 서버(150)가 포함할 수 있는 입력 또는 출력을 위한 장치(미도시)와의 인터페이스를 위한 수단일 수 있다. 보다 구체적인 예로, 전자 기기(110)의 프로세서(212)가 메모리(211)에 로딩된 컴퓨터 프로그램의 명령을 처리함에 있어서 서버(150)나 전자 기기(120)가 제공하는 데이터를 이용하여 구성되는 서비스 화면이나 컨텐츠가 입출력 인터페이스(214)를 통해 디스플레이에 표시될 수 있다.

또한, 다른 실시예들에서 전자 기기(110) 및 서버(150)는 도 2의 구성요소들보다 더 많은 구성요소들을 포함할 수도 있다. 그러나, 대부분의 종래기술적 구성요소들을 명확하게 도시할 필요성은 없다. 예를 들어, 전자 기기(110)는 상술한 입출력 장치(215) 중 적어도 일부를 포함하도록 구현되거나 또는 트랜시버(transceiver), GPS(Global Positioning System) 모듈, 카메라, 각종 센서, 데이터베이스 등과 같은 다른 구성요소들을 더 포함할 수도 있다. 보다 구체적인 예로, 전자 기기(110)가 스마트폰인 경우, 일반적으로 스마트폰이 포함하고 있는 가속도 센서나 자이로 센서, 카메라 모듈, 각종 물리적인 버튼, 터치패널을 이용한 버튼, 입출력 포트, 진동을 위한 진동기 등의 다양한 구성요소들이 전자 기기(110)에 더 포함되도록 구현될 수 있다.

이하에서는 디자인 킷을 이용한 업무 협업을 위한 방법 및 시스템의 구체적인 실시예를 설명하기로 한다.

도 3은 본 발명의 일실시예에 따른 서버의 프로세서가 포함할 수 있는 구성요소의 예를 도시한 블록도이고, 도 4는 본 발명의 일실시예에 따른 서버가 수행할 수 있는 방법의 예를 도시한 흐름도이다.

본 실시예에 따른 서버(150)는 업무 협업 서비스를 제공하는 서비스 플랫폼 역할을 한다. 서버(150)에는 컴퓨터로 구현된 디자인 업무 협업 시스템이 구성될 수 있다. 서버(150)는 클라이언트(client)인 복수의 전자 기기들(110, 120, 130, 140)을 대상으로 하는 것으로, 전자 기기들(110, 120, 130, 140) 상에 설치된 전용 어플리케이션이나 서버(150)와 관련된 웹/모바일 사이트 접속을 통해 화면 디자인에 대한 업무 협업 서비스를 제공할 수 있다. 특히, 서버(150)는 디자인 킷을 이용하여 화면 디자인에 대한 일관성 있는 작업을 유지하면서 반복적인 디자인 과정을 생략할 수 있는 새로운 디자인 프로세스를 제공할 수 있다.

서버(150)의 프로세서(222)는 도 4에 따른 디자인 업무 협업 방법을 수행하기 위한 구성요소로서 도 3에 도시된 바와 같이, 컴포넌트 제공부(310), 레이아웃 제공부(320), 및 화면 구성부(330)를 포함할 수 있다. 실시예에 따라 프로세서(222)의 구성요소들은 선택적으로 프로세서(222)에 포함되거나 제외될 수도 있다. 또한, 실시예에 따라 프로세서(222)의 구성요소들은 프로세서(222)의 기능의 표현을 위해 분리 또는 병합될 수도 있다.

이러한 프로세서(222) 및 프로세서(222)의 구성요소들은 도 4의 디자인 업무 협업 방법이 포함하는 단계들(S410 내지 S430)을 수행하도록 서버(150)를 제어할 수 있다. 예를 들어, 프로세서(222) 및 프로세서(222)의 구성요소들은 메모리(221)가 포함하는 운영체제의 코드와 적어도 하나의 프로그램의 코드에 따른 명령(instruction)을 실행하도록 구현될 수 있다.

여기서, 프로세서(222)의 구성요소들은 서버(150)에 저장된 프로그램 코드가 제공하는 명령에 따라 프로세서(222)에 의해 수행되는 서로 다른 기능들(different functions)의 표현들일 수 있다. 예를 들어, 서버(150)가 디자인 요소의 컴포넌트를 제공하도록 상술한 명령에 따라 서버(150)를 제어하는 프로세서(222)의 기능적 표현으로서 컴포넌트 제공부(310)가 이용될 수 있다.

프로세서(222)는 서버(150)의 제어와 관련된 명령이 로딩된 메모리(221)로부터 필요한 명령을 읽어들일 수 있다. 이 경우, 상기 읽어들인 명령은 프로세서(222)가 이후 설명될 단계들(S410 내지 S430)을 실행하도록 제어하기 위한 명령을 포함할 수 있다. 이후 설명될 단계들(S410 내지 S430)은 도 4에 도시된 순서와 다른 순서로 수행될 수 있으며, 단계들(S410 내지 S430) 중 일부가 생략되거나 추가의 과정이 더 포함될 수 있다.

도 4를 참조하면, 단계(S410)에서 컴포넌트 제공부(310)는 화면 구성에 필요한 디자인 요소를 컴포넌트화하여 제공할 수 있다. 화면 디자인에 참여하는 기획자, 디자이너, 개발자 등 서비스를 만드는 모든 사람들(이하, '사용자'라 통칭함)은 디폴트 디자인 이외에 액션에 따라 반응하도록 변화되는 상태를 모두 포함하여 디자인해야 한다. 디자인 요소들은 한두 개가 아니기 때문에 실수로 누락되거나 개발 측 우선순위로 인해 배포되지 못하는 문제가 있다. 이런 문제를 해결하기 위해 모든 반응이 고려된 컴포넌트들을 코드화하여 일관된 반응을 유지하는 업무 협업이 필요하다. 컴포넌트 제공부(310)는 디자인 요소 각각에 대하여 상태 표현과 인터랙션이 포함된 컴포넌트를 코드화하여 소스 코드와 함께 제공할 수 있다. 기획자, 디자이너, 개발자 간에 코드로 커뮤니케이션 가능한 환경을 제공하는 것으로, UX를 감안한 인터랙션이 적용된 UI와 UI가 작동하는 방법을 코드화하여 제공하고 해당 UI에 미러링된 소스 코드를 한 세트로 제공함으로써 사용자 모두 디자인과 코드를 동시에 확인할 수 있고 일관성 있는 작업을 지원할 수 있다.

단계(S420)에서 레이아웃 제공부(320)는 모바일, 태블릿, 데스크탑 등 다양한 기기의 해상도에 대응하기 위해 반응형 레이아웃을 제공하고자 반응형에 필요한 열 단위의 규칙과 컴포넌트 정렬을 위한 행 단위의 규칙을 포함하는 그리드 시스템의 레이아웃을 제공할 수 있다. 일례로, 레이아웃 제공부(320)는 반응형에 필요한 12개의 열(column) 단위와 다양한 컴포넌트들을 쉽게 나열할 수 있는 32픽셀 높이의 행(row) 단위로 구성된 그리드 시스템의 레이아웃을 제공한다. 열 단위와 행 단위가 포함된 레이아웃을 이용하는 경우 개발자를 비롯한 사용자 모두 컴포넌트를 배치할 수 있고, 이를 통해 구성된 화면을 자동으로 반응형으로 구현할 수 있다.

단계(S430)에서 화면 구성부(330)는 사용자 선택에 따른 컴포넌트를 행 단위와 열 단위의 규칙을 기반으로 레이아웃에 배치함으로써 화면을 구성할 수 있다. 디자이너의 페이지 디자인 없이 사전에 만들어진 컴포넌트와 레이아웃 시스템을 이용하여 서비스하고자 하는 화면을 개발자가 직접 구성할 수 있다. 본 실시예에서는 화면 디자인에서 반복적으로 사용되는 디자인 리소스를 라이브러리로 구축하여 화면 구성에 적용할 수 있다. 화면 구성부(330)는 컴포넌트를 선택하는 경우 선택된 컴포넌트의 소스 코드를 복사하여 컴포넌트와 소스 코드를 한 세트로 레이아웃에 배열함으로써 일관된 리소스로 서비스 화면을 구성할 수 있다. 일례로, 아이콘을 모두 폰트로 임베드(embed)하고 소스 코드를 복사하여 화면을 구성함으로써 아이콘이 바뀔 염려가 없으며 아이콘 또한 폰트이기 때문에 폰트 크기를 조절하듯이 아이콘 크기를 조절할 수 있다.

본 실시예에 따른 서버(150)는 미리 만들어진 컴포넌트와 레이아웃 시스템을 이용하여 서비스 화면을 구성할 수 있는 디자인 킷 사이트를 제공한다. 이러한 디자인 킷 사이트를 이용하여 디자이너의 개입 없이 개발자가 바로 서비스 화면의 개발이 가능하다.

경우에 따라서는 디자인 킷의 원활한 사용을 위해서 UX/UI 컨설팅(consulting)을 제공할 수 있다. 화면 구성부(330)는 개발자가 디자인 킷을 사용하기 이전에 개발자의 요청에 따라 디자이너의 페이지 디자인으로서 UX/UI 컨설팅을 요청할 수 있다. 일례로, 화면 구성부(330)는 서드파티 라이브러리로서 부가적인 스크립트, 스타일 파일 로드를 제공할 수 있다. 화면 구성부(330)는 커스텀 스크롤, 인터랙티브한 트리 구조, 차트 기능, 리사이징 기능, 정렬 기능, 시간 선택 기능, 날짜 및 시간 선택 기능, 슬라이드 화면 전환 기능, 이미지 미리보기 기능(드래그 앤 드롭 파일 업로드) 등을 제공할 수 있다. 본 실시예에서는 개발자의 화면 구성 이전에 디자이너가 디자인 킷을 이용한 UX/UI 컨설팅을 해서 개발 측에 가이드하는 별도의 프로세스가 포함될 수 있다.

다른 경우에는 기획자가 먼저 사전에 만들어진 디자인 킷을 이용하여 와이어프레임(wireframe)을 정리하면 디자이너가 기획자의 와이어프레임에 대해 UX/UI 컨설팅을 하여 필요한 경우 추가로 컴포넌트를 디자인할 수 있으며, 이후 개발자는 사전에 만들어진 디자인 킷과 디자이너에 의해 새롭게 추가된 컴포넌트를 가지고 서비스 화면을 만들 수 있다.

디자인 킷 사이트를 이용한 디자인 프로세스로서, (1) 디자이너의 개입 없이 서비스 설계에 맞춰 개발자가 사전에 만들어진 디자인 킷(컴포넌트와 레이아웃 시스템)을 이용하여 서비스 화면을 바로 구성하는 프로세스, (2) 서비스 설계에 대해 디자이너가 디자인 킷을 이용한 UX/UI 컨설팅 이후 디자이너의 컨설팅을 기반으로 개발자가 서비스 화면을 구성하는 프로세스, 및 (3) 서비스 설계에 대해 기획자가 먼저 디자인 킷을 이용하여 와이어프레임을 정리하면 이에 디자이너가 추가로 필요한 컴포넌트를 디자인한 후 개발자가 디자인 킷과 추가된 컴포넌트로 서비스 화면을 구성하는 프로세스를 제공할 수 있다.

디자인 킷을 이용한 디자인 프로세스에는 디자인 QA(Quality Assurance, 제품 출시 이전에 테스트 및 검수하는 단계) 프로세스가 포함될 수 있으며, 해당 프로세스를 통해 디자이너는 개발자가 만든 서비스 화면에 대해 코드로 의견을 줄 수 있다.

이하에서는 디자인 킷에 대한 세부적인 실시예를 설명하기로 한다.

디자인 킷은 세 가지 단위인 컴포넌트와 모듈 및 템플릿으로 구성될 수 있다. 컴포넌트는 기본 단위 요소로서 UI(user interface)를 구성하는 디자인 요소를 의미하고, 모든 컴포넌트는 각각의 컴포넌트로서의 기능을 가진다. 이러한 컴포넌트들의 조합을 모듈이라 정의한다. 그리고, 템플릿은 레이아웃이 포함된 디자인 요소로서 목적(예컨대, 검색 등)에 따라 적어도 둘 이상의 컴포넌트 또는 모듈을 조합하여 제공되는 단위를 의미한다.

디자인 킷의 모든 컴포넌트는 인터랙션을 통해 컴포넌트의 상태를 시각화하여 보여줌으로써 사용자가 취해야 할 액션을 유도하거나 직관적으로 컴포넌트의 상태를 알 수 있도록 지원한다. 사용자의 액션에 즉각적으로 반응하고 사용자는 명확한 결과를 확인할 수 있으며, 또한 통일된 인터랙션을 통해 서비스 전체에 일관성을 제공할 수 있다.

일례로, 컴포넌트는 4가지 상태 별 타입이 존재한다. 도 5를 참조하면, 컴포넌트의 일례인 버튼(500)은 호버(hover) 상태, 활성화(enabled) 상태, 포커스(focus) 상태, 비활성화(disabled) 상태를 포함할 수 있다. 호버 상태는 액션이 가능한 컴포넌트에 사용자가 커서를 올렸을 때 표현되는 상태를, 활성화 상태는 액션이 가능한 컴포넌트의 상태를, 포커스 상태는 사용자가 컴포넌트를 하이라이트하거나 옵션을 선택한 상태를, 비활성화 상태는 액션이 불가능한 컴포넌트의 상태를 의미한다.

모든 컴포넌트에는 이러한 4가지 상태 표현이 필수로 제작되어야 하고, 사용자는 컴포넌트의 상태를 통해 자신의 액션에 대한 반응을 인지할 수 있다.

도 6은 버튼(button), 입력(input), 메뉴(menu), 페이지네이션(pagination), 체크 박스(check box), 라디오 버튼(radio button), 드롭다운(dropdown) 등 컴포넌트의 예시들을 나타내고 있다.

컴포넌트의 일례로, 입력은 사용자가 데이터를 입력하기 위한 필드를 의미한다. 다른 컴포넌트와는 달리, 도 7에 도시한 바와 같이 입력(700)은 데이터에 따라 보조 설명(helper), 오류(error), 완료(success), 필수 입력(required) 등의 케이스가 존재한다. 입력 전에는 보조 텍스트를 통해 이해를 돕고, 입력 후에는 입력한 값에 따른 결과를 보여줄 수 있다. 이를 통해 사용자는 피드백을 받을 수 있으며, 상황 별로 컬러를 다르게 설정하여 직관적인 상황 인지가 가능하다. 예를 들어, 상황 별 컬러로서 오류는 Red, 완료는 Green, 필수 입력은 Blue를 적용할 수 있다.

이러한 입력은 다양한 기능과 컴포넌트와 결합하여 사용할 수 있다. 입력 박스 앞 타이틀 제공 여부에 따라 2가지 타입으로 나뉠 수 있으며, 모든 타입은 3가지 상태, 즉 활성화 상태, 비활성화 상태, 읽기 전용 상태가 제공된다.

프로세서(222)는 상태 표현과 인터랙션이 포함된 컴포넌트를 코드화하여 제공하는 것으로, 도 8에 도시한 바와 같이 기본적인 입력 타입에 해당되는 컴포넌트(801)와 해당 컴포넌트(801)의 소스 코드(802)를 한 세트로 제공할 수 있다. 다시 말해, 입력 컴포넌트(801) 하나에 여러 상태가 존재하는 경우 상태 별 인터랙션을 코드화하여 해당 컴포넌트(801)를 소스 코드(802)가 포함된 세트 개념으로 제공할 수 있다. 소스 코드(802)가 노출된 인터페이스 화면에서는 코드 전체를 볼 수 있는 '크게 보기' 버튼(81), 코드 복사를 위한 '복사' 버튼(82)이 포함될 수 있다.

소스 코드(802)는 컴포넌트(801)와 함께 직접 노출되는 방식 이외에도 노출없이 컴포넌트(801)의 선택 시 자동 복사되는 방식으로 제공될 수 있다.

프로세서(222)는 둘 이상의 컴포넌트의 조합으로 구성된 모듈 또한 코드화하여 제공할 수 있으며, 예를 들어 달력 컴포넌트가 입력 컴포넌트에 포함되어 입력 데이터로서 날짜 선택이 가능한 모듈을 제공할 수 있다. 도 9에 도시한 바와 같이, 프로세서(222)는 달력 컴포넌트와 입력 컴포넌트가 결합된 형태로 월 단위 달력이 입력 내에 포함되어 날짜 선택이 가능한 모듈(901)과, 해당 모듈(901)의 소스 코드(902)를 한 세트로 제공할 수 있다. 이때, 프로세서(222)는 달력 내에서 년, 월, 일 단위의 선택이 가능한 리스트를 제공하는 기능, 옵션 값 추가를 통해 설정 기간을 제한하는 기능 등을 추가로 더 포함하여 코드화할 수 있다. 달력 컴포넌트 이외에도 타이틀이 있는 입력 컴포넌트를 이용할 때 타이틀에 드롭다운 컴포넌트, 트리메뉴 컴포넌트, 다양한 레이어 타입 컴포넌트 등이 결합되어 모듈 단위로 코드화되어 제공될 수 있다.

프로세서(222)는 둘 이상의 모듈의 조합으로 구성된 템플릿 또한 코드화하여 템플릿과 해당 템플릿의 소스 코드를 한 세트로 제공할 수 있다. 도 10을 참조하면, 둘 이상의 모듈이 결합된 템플릿 단위로, 예를 들어 3개 이하의 조건을 입력하는 검색 템플릿(1001), 5개 이상의 조건을 입력하는 검색 템플릿(1002) 등을 각각의 소스 코드와 함께 제공할 수 있다.

컴포넌트의 다른 예인 아이콘은 텍스트 폰트 형태로 컴포넌트화될 수 있다. 도 11을 참조하면, 아이콘(1100)은 원과 사각형을 기준으로 하며, 일정 영역(예컨대, 정사각형)의 그리드(1101) 안에서 크기를 자유롭게 변형할 수 있으며, 어떠한 오브젝트를 표현하느냐에 따라 비율을 조정할 수 있는 폰트 형태의 컴포넌트로 구성된다. 이때, 일정한 기울기를 사용하여 아이콘에 통일성을 부여할 수 있으며, 예를 들어 0°, 45°, 90°를 사용하며 좌우 반전하여 추가 응용할 수 있다.

도 12를 참조하면, 아이콘(1100)은 단순하게 라인으로 형태를 표현하는 라인 아이콘, 시각적으로 명확하게 전달할 수 있는 솔리드 아이콘, 테마에 따라 컬러가 변화하는 컬러 아이콘 등으로 나뉠 수 있다.

프로세서(222)는 아이콘 컴포넌트를 코드화하여 제공할 수 있으며, 아이콘 또한 다른 컴포넌트와 마찬가지로 아이콘 컴포넌트와 해당 아이콘의 소스 코드를 한 세트로 제공할 수 있다.

프로세서(222)는 아이콘을 모아 놓은 라이브러리를 제공할 수 있으며, 사용자가 라이브러리 내에서 아이콘을 클릭하면 해당 아이콘의 코드가 복사되어 화면 구성에 바로 이용할 수 있다. 프로세서(222)는 도 13에 도시한 바와 같이 라이브러리 내 아이콘 목록(1300)을 제공할 수 있으며, 사용자가 아이콘 목록(1300) 내에서 특정 아이콘(1301)을 선택하는 경우 코드 복사에 대한 알림(1302)을 노출할 수 있다. 아이콘(1301)의 선택을 통해 코드가 복사됨에 따라 문서에 붙여넣기하여 아이콘(1301)에 대한 코드 클래스를 바로 적용할 수 있다.

아이콘 이외에도 일러스트레이션(illustration) 또한 공감 요소로 많이 사용되는 디자인 요소 중 하나이므로 아이콘과 마찬가지로 컴포넌트화하여 화면 구성에 이용 가능한 컴포넌트 라이브러리로 구축할 수 있다.

따라서, 프로세서(222)는 화면 구성에 있어 컴포넌트를 물론이고, 사용 빈도가 높은 컴포넌트 그룹을 모듈화하여 제공할 수 있으며, 더 나아가 레이아웃까지 갖춘 템플릿 단위로 제공하는 것 또한 가능하다.

프로세서(222)는 화면 구성을 위한 그리드 시스템의 레이아웃을 제공할 수 있다. 일례로, 프로세서(222)는 디자인 킷에 대한 전용 레이아웃으로서 부트스트랩(bootstrap) 기반의 12 그리드 시스템을 사용할 수 있다. 모바일, 태블릿, 데스크탑 등 다양한 기기의 해상도에 대응하기 위해 반응형 레이아웃을 적용할 수 있으며, 기기마다 적합한 화면 구성을 보여주기 위해 동적으로 변화하는 레이아웃을 제공할 수 있다.

레이아웃 설계 목적은 해상도가 변하더라도 같은 경험을 사용자에게 제공하고자 하는 것으로, 이를 위해서는 기기마다 다른 구조의 화면을 설계하는 것이 아니라, 해상도가 줄어줄 때 그리드 규칙에 맞게 컴포넌트의 변화가 가능한 레이아웃을 제공한다. 해상도에 따른 컴포넌트 변화로 기기마다 다른 구조로 설계할 필요가 없다.

일례로, 도 14를 참조하면 프로세서(222)는 12개의 열 단위로 이루어진 레이아웃을 제공할 수 있으며, 이때 열 단위를 12개의 그리드로 설정한 이유는 효율적인 레이아웃을 구성할 수 있기 때문이다. 12는 1, 2, 3, 4, 6, 12로 나뉘어지므로 화면을 다양하게 구성할 수 있으며, 예를 들어 6개의 그리드씩 2등분으로 나누어 각각 이미지와 텍스트로 구성할 수 있고, 4등분하는 경우 3개의 그리드씩 나누어 각각 다른 컨텐츠를 보여줄 수 있다.

아울러, 프로세서(222)는 컴포넌트를 효율적으로 배치하기 위한 행 단위의 규칙을 포함하는 레이아웃을 제공할 수 있다. 버튼, 입력, 데이터 테이블, 리스트 등 모든 컴포넌트들을 32픽셀 높이의 행에 들어갈 수 있도록 설계된 레이아웃을 이용할 수 있으며, 이를 통해 다양한 컴포넌트들을 행 안에 쉽게 정렬할 수 있는 행 단위로 쌓아 배치할 수 있다. 32픽셀 높이를 가진 행 단위의 규칙과 12 그리드로 이루어진 열 단위의 규칙을 이용하여 개발자는 디자인 가이드 없이도 컴포넌트를 배치할 수 있으며, 이를 통해 구성된 화면을 자동으로 반응형으로 구현할 수 있다.

도 15는 화면 구성을 위한 전체 페이지의 구조 예시를 도시한 것으로, 페이지의 구성을 클래스 단위로 나타내고 있다.

도 15를 참조하면, app(1510)은 페이지의 시작점을 의미한다.

content-wrap(1520)은 본문 전체 영역으로, 예를 들어 태블릿 사이즈 대응을 위해 최소 너비 960픽셀로 규정될 수 있다.

flexible-lnb(1530)은 LNB(left navigation bar) 영역으로, 기본 너비 250픽셀에서 500픽셀까지 확장 가능하며 닫힌 경우 40픽셀의 너비를 가진다.

flexible-content(1540)는 flexible-lnb(1530)을 제외한 본문 영역으로, header-top-wrap(1550), content-header(1560), content-body(1570)으로 구성되며, flexible-lnb(1530)의 너비 변화에 따라 너비 값이 유동적으로 변경된다.

header-top-wrap(1550)은 GNB(global navigation bar) 영역으로 활용되는 공간으로, 우측 정렬을 기본으로 규정한다.

content-header(1560)는 페이지의 타이틀 영역으로, 실제 타이틀이 적용되는 영역은 80픽셀의 높이를 가지며 하단 여백이 포함될 수 있다.

content-body(1570)는 모든 컴포넌트가 실제로 적용되는 공간으로, 예를 들어 860픽셀의 최소 너비를 가지며 좌우 30픽셀과 하단 60픽셀의 여백을 가질 수 있고 해당 영역 내부에서 대부분 컴포넌트는 12 그리드 시스템을 따른다.

도 16은 페이지의 폼 구조 예시를 도시한 것으로, 이는 content-body(1570)의 내부에 적용된다.

도 16을 참조하면, form-area(1610)는 폼의 시작점으로, form-group row(단일 행)(1630)이 다른 구조에 포함될 때 생략되는 경우가 있다.

form-wrap(1620)는 폼 영역의 구분 단위이며, 내부에 form-group row(1630)를 포함한다. form-wrap(1620)과 form-wrap(1620) 사이에는 상하 20픽셀 간격과 구분 선이 발생한다.

form-group row(1630)는 한 행을 정의하는 부분이며, 32픽셀의 높이와 13픽셀의 하단 여백을 가진다. form-group 내부에서는 12 그리드 시스템에 따라 컴포넌트를 배치할 수 있다. 좌측 라벨 영역은 두 개의 열, 우측 컴포넌트 영역은 6개 또는 10개의 열을 기본으로 규정한다.

form-bottom(1640)은 폼 가장 하단에 배치되며, 주로 버튼들이 나열되는 영역이다. 상단 20픽셀과 하단 60픽셀의 여백을 가진다.

폼 레이아웃은 content-body(1570)을 구성하는 기본적인 레이아웃으로, 일례로 도 17에 도시한 바와 같이 한 행은 라벨 영역(form-label)(1701)과 컴포넌트 영역(row)(1702)으로 구성된다.

라벨 영역(1701)은 두 개의 열, 컴포넌트 영역(1702)은 6개 또는 10개의 열로 규정된다. 6개의 열로 구성되는 컴포넌트 영역(1702)은 행 단위 컴포넌트(예를 들어, 입력, 드롭다운 등)에 사용하고, 10개의 열로 구성되는 컴포넌트 영역(1702)은 면 단위 컴포넌트(예를 들어, 텍스트 영역, 테이블 등)에 사용한다.

프로세서(222)는 분할 폼 레이아웃을 제공할 수 있으며, 이는 폼 영역을 일정 비율로 분할할 때 사용할 수 있고, 12 그리드 시스템에 따라 일정 개수의 그리드 단위로 적용하는 경우 동일한 비율로 등분할 수 있다.

프로세서(222)는 타이틀 영역이 포함된 폼 레이아웃을 제공할 수 있으며, 이는 하위 요소들로 그룹핑할 때 사용할 수 있다. 타이틀 영역은 form-wrap(1620) 내부에 title-wrap 클래스로 적용될 수 있고, 32픽셀 높이를 가지며 구분 선을 기준으로 상단 10픽셀과 하단 20픽셀의 여백을 가진다.

프로세서(222)는 필수 입력사항이 포함된 폼 레이아웃을 제공할 수 있으며, 상기한 타이틀 영역과 유사한 구조를 가지기 위해 12 그리드 시스템 구조로 적용한다.

상기한 폼 레이아웃 타입들은 컴포넌트를 12 그리드 시스템으로 배치하기 때문에 고정된 가로 너비 영역을 표현하는데 어려움이 있다. 열별 고정값 및 유동적으로 변화하는 열에 대한 정의가 가능한 폼 테이블을 적용할 수 있으며, 이러한 폼 테이블은 테이블 구조가 기본적인 폼 형태로 구성된다.

상기에서는 12 그리드 시스템이 적용된 레이아웃을 설명하고 있으나, 이에 한정되는 것은 아니며, 서비스 대상 기기나 디자인 화면 구성에 따라 레이아웃 구조, 그리드 규칙 등은 얼마든지 변경 가능하다.

이처럼 본 발명의 실시예들에 따르면, 반복되는 디자인 요소를 컴포넌트화하고 이를 이용하여 개발자가 스스로 서비스 설계에 맞춰 화면을 구성함으로써 일관된 반응을 유지할 수 있다. 또한, 반복적인 디자인 과정을 생략하여 효율적인 디자인 프로세스를 제공할 수 있으며, 직관적인 컴포넌트 설계로 쉽고 빠른 커뮤니케이션을 지원할 수 있다.

이상에서 설명된 장치는 하드웨어 구성요소, 소프트웨어 구성요소, 및/또는 하드웨어 구성요소 및 소프트웨어 구성요소의 조합으로 구현될 수 있다. 예를 들어, 실시예들에서 설명된 장치 및 구성요소는, 프로세서, 콘트롤러, ALU(arithmetic logic unit), 디지털 신호 프로세서(digital signal processor), 마이크로컴퓨터, FPGA(field programmable gate array), PLU(programmable logic unit), 마이크로프로세서, 또는 명령(instruction)을 실행하고 응답할 수 있는 다른 어떠한 장치와 같이, 하나 이상의 범용 컴퓨터 또는 특수 목적 컴퓨터를 이용하여 구현될 수 있다. 처리 장치는 운영 체제(OS) 및 상기 운영 체제 상에서 수행되는 하나 이상의 소프트웨어 어플리케이션을 수행할 수 있다. 또한, 처리 장치는 소프트웨어의 실행에 응답하여, 데이터를 접근, 저장, 조작, 처리 및 생성할 수도 있다. 이해의 편의를 위하여, 처리 장치는 하나가 사용되는 것으로 설명된 경우도 있지만, 해당 기술분야에서 통상의 지식을 가진 자는, 처리 장치가 복수 개의 처리 요소(processing element) 및/또는 복수 유형의 처리 요소를 포함할 수 있음을 알 수 있다. 예를 들어, 처리 장치는 복수 개의 프로세서 또는 하나의 프로세서 및 하나의 콘트롤러를 포함할 수 있다. 또한, 병렬 프로세서(parallel processor)와 같은, 다른 처리 구성(processing configuration)도 가능하다.

소프트웨어는 컴퓨터 프로그램(computer program), 코드(code), 명령(instruction), 또는 이들 중 하나 이상의 조합을 포함할 수 있으며, 원하는 대로 동작하도록 처리 장치를 구성하거나 독립적으로 또는 결합적으로(collectively) 처리 장치를 명령할 수 있다. 소프트웨어 및/또는 데이터는, 처리 장치에 의하여 해석되거나 처리 장치에 명령 또는 데이터를 제공하기 위하여, 어떤 유형의 기계, 구성요소(component), 물리적 장치, 컴퓨터 저장 매체 또는 장치에 구체화(embody)될 수 있다. 소프트웨어는 네트워크로 연결된 컴퓨터 시스템 상에 분산되어서, 분산된 방법으로 저장되거나 실행될 수도 있다. 소프트웨어 및 데이터는 하나 이상의 컴퓨터 판독 가능 기록 매체에 저장될 수 있다.

실시예에 따른 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 이때, 매체는 컴퓨터로 실행 가능한 프로그램을 계속 저장하거나, 실행 또는 다운로드를 위해 임시 저장하는 것일 수도 있다. 또한, 매체는 단일 또는 수 개의 하드웨어가 결합된 형태의 다양한 기록수단 또는 저장수단일 수 있는데, 어떤 컴퓨터 시스템에 직접 접속되는 매체에 한정되지 않고, 네트워크 상에 분산 존재하는 것일 수도 있다. 매체의 예시로는, 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체, CD-ROM 및 DVD와 같은 광기록 매체, 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical medium), 및 ROM, RAM, 플래시 메모리 등을 포함하여 프로그램 명령어가 저장되도록 구성된 것이 있을 수 있다. 또한, 다른 매체의 예시로, 어플리케이션을 유통하는 앱 스토어나 기타 다양한 소프트웨어를 공급 내지 유통하는 사이트, 서버 등에서 관리하는 기록매체 내지 저장매체도 들 수 있다.

이상과 같이 실시예들이 비록 한정된 실시예와 도면에 의해 설명되었으나, 해당 기술분야에서 통상의 지식을 가진 자라면 상기의 기재로부터 다양한 수정 및 변형이 가능하다. 예를 들어, 설명된 기술들이 설명된 방법과 다른 순서로 수행되거나, 및/또는 설명된 시스템, 구조, 장치, 회로 등의 구성요소들이 설명된 방법과 다른 형태로 결합 또는 조합되거나, 다른 구성요소 또는 균등물에 의하여 대치되거나 치환되더라도 적절한 결과가 달성될 수 있다.

그러므로, 다른 구현들, 다른 실시예들 및 특허청구범위와 균등한 것들도 후술하는 특허청구범위의 범위에 속한다.

Claims

컴퓨터 시스템에서 실행되는 방법에 있어서,
상기 컴퓨터 시스템은 메모리에 포함된 컴퓨터 판독가능한 명령들을 실행하도록 구성된 적어도 하나의 프로세서를 포함하고,
화면 디자인의 업무 협업을 위한 사이트를 제공하고,
상기 방법은,
상기 적어도 하나의 프로세서에 의해, 화면 구성에 사용되는 디자인 요소를 상태 표현과 인터랙션이 포함된 컴포넌트로 코드화하여 제공하는 단계; 및
상기 적어도 하나의 프로세서에 의해, 서비스하고자 하는 화면의 개발 과정으로 상기 컴포넌트를 이용하여 화면을 구성하는 단계
를 포함하는 방법.
제1항에 있어서,
상기 제공하는 단계는,
상기 컴포넌트의 상태 별 인터랙션을 코드화하여 상기 컴포넌트를 소스 코드와 함께 제공하는 단계
를 포함하는 방법.
제1항에 있어서,
상기 제공하는 단계는,
상기 컴포넌트의 상태 별 인터랙션을 코드화하여 상기 컴포넌트를 상기 컴포넌트와 미러링된 소스 코드와 한 세트로 제공하는 단계
를 포함하는 방법.
제1항에 있어서,
상기 제공하는 단계는,
상기 컴포넌트의 선택 시 상기 컴포넌트의 소스 코드를 복사하여 제공하는 단계
를 포함하는 방법.
제1항에 있어서,
상기 제공하는 단계는,
상기 디자인 요소 중 하나인 아이콘을 폰트 형태의 컴포넌트로 구성하는 단계
를 포함하는 방법.
제1항에 있어서,
상기 제공하는 단계는,
둘 이상의 컴포넌트의 조합으로 구성된 모듈을 코드화하여 모듈 단위로 제공하는 단계
를 포함하는 방법.
제6항에 있어서,
상기 제공하는 단계는,
둘 이상의 모듈의 조합으로 구성된 템플릿을 코드화하여 템플릿 단위로 제공하는 단계
를 더 포함하는 방법.
제1항에 있어서,
상기 방법은,
상기 적어도 하나의 프로세서에 의해, 열(column) 단위의 규칙과 행(row) 단위의 규칙을 포함하는 그리드 레이아웃을 제공하는 단계
를 더 포함하는 방법.
제8항에 있어서,
상기 구성하는 단계는,
상기 컴포넌트를 상기 열 단위의 규칙과 상기 행 단위의 규칙에 따라 상기 그리드 레이아웃에 배치하여 상기 화면을 구성하는 것
을 특징으로 하는 방법.
제8항에 있어서,
상기 그리드 레이아웃을 제공하는 단계는,
디바이스의 해상도에 따라 그리드 규칙을 기초로 상기 컴포넌트가 변화하는 반응형 레이아웃을 제공하는 것
을 특징으로 하는 방법.
제8항에 있어서,
상기 그리드 레이아웃을 제공하는 단계는,
적어도 둘 이상으로 등분이 가능한 열 단위와 일정 높이를 가진 행 단위로 이루어진 상기 그리드 레이아웃을 제공하는 것
을 특징으로 하는 방법.
제1항에 있어서,
상기 사이트는 상기 컴포넌트를 포함하는 디자인 킷(design kit)을 이용한 화면 개발 과정을 제공하는 것
을 특징으로 하는 방법.
제12항에 있어서,
상기 사이트는 상기 화면 개발 과정 이전에 상기 디자인 킷을 이용한 디자인 컨설팅 과정 및 와이어프레임(wireframe) 과정 중 적어도 하나를 제공하는 것
을 특징으로 하는 방법.
제1항 내지 제13항 중 어느 한 항의 방법을 상기 컴퓨터 시스템에 실행시키기 위해 비-일시적인 컴퓨터 판독가능한 기록 매체에 저장되는 컴퓨터 프로그램.
제1항 내지 제13항 중 어느 한 항의 방법을 컴퓨터에 실행시키기 위한 프로그램이 기록되어 있는 비-일시적인 컴퓨터 판독 가능한 기록 매체.
컴퓨터 시스템에 있어서,
메모리에 포함된 컴퓨터 판독 가능한 명령을 실행하도록 구현되는 적어도 하나의 프로세서
를 포함하고,
상기 적어도 하나의 프로세서는,
화면 디자인의 업무 협업을 위한 사이트를 제공하는 것으로,
화면 구성에 사용되는 디자인 요소를 상태 표현과 인터랙션이 포함된 컴포넌트로 코드화하여 제공하는 컴포넌트 제공부;
열 단위의 규칙과 행 단위의 규칙을 포함하는 그리드 레이아웃을 제공하는 레이아웃 제공부; 및
상기 컴포넌트를 상기 열 단위의 규칙과 상기 행 단위의 규칙에 따라 상기 그리드 레이아웃에 배치하여 화면을 구성하는 화면 구성부
를 포함하는 컴퓨터 시스템.
제16항에 있어서,
상기 컴포넌트 제공부는,
상기 컴포넌트의 상태 별 인터랙션을 코드화하여 상기 컴포넌트를 상기 컴포넌트와 미러링된 소스 코드와 한 세트로 제공하는 것
을 특징으로 하는 컴퓨터 시스템.
제16항에 있어서,
상기 컴포넌트 제공부는,
상기 디자인 요소 중 하나인 아이콘을 폰트 형태의 컴포넌트로 구성하는 것
을 특징으로 하는 컴퓨터 시스템.
제16항에 있어서,
상기 컴포넌트 제공부는,
둘 이상의 컴포넌트의 조합으로 구성된 모듈을 코드화하여 모듈 단위로 제공하고,
둘 이상의 모듈의 조합으로 구성된 템플릿을 코드화하여 템플릿 단위로 제공하는 것
을 특징으로 하는 컴퓨터 시스템.
제16항에 있어서,
상기 레이아웃 제공부는,
디바이스의 해상도에 따라 그리드 규칙을 기초로 상기 컴포넌트가 변화하는 반응형 레이아웃으로서 적어도 둘 이상으로 등분이 가능한 열 단위와 일정 높이를 가진 행 단위로 이루어진 상기 그리드 레이아웃을 제공하는 것
을 특징으로 하는 컴퓨터 시스템.