A Study on the GUI Design of Fashion Customizing Web : Centered on Custom Knitware

패션 커스터마이징 웹 GUI디자인연구 : 커스텀 니트웨어를 중심으로

Abstract

The need for customized products has also been increasing as more active consumers consume according to their values in recent years. Accordingly, fashion customizing web is becoming popular, but because custom freedom is low, we want to increase custom freedom by applying knitwear. To this end, a theoretical review was conducted through prior research and literature research on customization, knit design, and GUI, and based on this, a case analysis was conducted focusing on knit-making programs and fashion customizing web. Knit designs have more considerations than other fashion design process, resulting in more UIs, so users should use visual elements that are easily recognizable. Therefore, a draft assessment item was derived based on the preceding survey and three Delphi surveys were conducted on experts based on the draft. Each item was modified and deleted during the Delphi research process to produce the Custom Knitware Web GUI Design Guide. Through this study, we were able to identify the need for intuitive understanding and application of knit custom functions in GUI design of custom knitwear web. Through this research, it is expected that this data will be used to improve the usability of custom knitwear websites and to refer to knit design fields that utilize knit machines.

최근 가치관에 따라 소비하는 능동적인 소비자가 증가함 따라 커스터마이징 제품의 니즈도 증가하고 있는데, 이중에서도 자신의 개성을 전면적으로 표현할 수 있는 패션분야의 커스터마이징 시장이 커지고 있다. 이에 따라 패션 커스터마이징 웹이 대중화 되고 있지만, 커스텀 자유도가 낮기 때문에 니트웨어를 접목하여 커스텀 자유도를 높이고자한다. 이를 위해 커스터마이징, 니트디자인, GUI에 대한 선행연구와 문헌 조사를 통해 이론적 고찰을 하였고, 이를 바탕으로 니트디자인 프로그램과 패션 커스터마이징 웹의 레이아웃, 아이콘과 메뉴, 컬러, 인터렉션을 중심으로 사례 분석을 했다. 니트디자인은 다른 패션디자인 과정보다 고려사항이 많아 그에 따른 UI가 많아지기 때문에 사용자가 쉽게 인식할 수 있는 시각적 요소를 사용해야한다. 따라서 선행조사를 바탕으로 커스텀 니트웨어 GUI디자인 가이드라인 초안을 도출하고, 초안을 기반으로 전문가를 대상으로 3차례의 델파이 조사를 실시하였다. 각 항목은 델파이 조사과정에서 수정, 삭제하여 커스텀 니트웨어 웹 GUI디자인 가이드라인을 제작했다. 본 연구 결과를 통해 커스텀 니트웨어 웹의 GUI디자인 시 니트 커스텀 기능의 직관적 이해와 적용이 필요함을 파악할 수 있었다. 본 연구를 통해 커스텀 니트웨어 웹사이트의 사용성 향상과 니팅머신을 활용한 니트 디자인 분야에 참고할 만한 자료로 기대된다.

I. 서론

1. 연구의 배경 및 목적

현대에 들어서 소비자들은 기업들이 생산한 물건을 소비하는 수동적인 소비방식이 아닌, 자신의 취향과 가치관에 맞는 물건을 소비하는 양상을 보이고 있다. 이런 능동적인 소비자들을 ‘프로슈머’라 지칭한다. 프로슈머들은 소비자이자 동시에 생산자가 되기도 한다. 이들은 시장에 자신이 원하는 제품이 없으면 스스로 만들어낸다[1]. 이에 최근 많은 기업들이 전 분야에 걸쳐 커스터마이징 상품들을 선보이고 있다. 생산 단계부터 소비자가 참여하여 소비자의 취향대로 제작하는 방식부터 제품의 케이스를 변경할 수 있는 구조로 구매 후에 소비자의 취향에 맞춰 교체할 수 있는 방식까지 넓게 분포하고 있다.

그러나 의류 분야의 커스텀에는 자유도의 한계가 있다. 소비자의 요구에 맞춰 개별적으로 생산하기에는 생산 단가가 비싸지기 때문에, 기성품 위에 커스텀 요소를 덧입히는 방식으로 서비스 되고 있다. 이를 니팅머신(Knitting Machine)을 통해 해결할 수 있다. 니팅머신은 생산 단계에서부터 소비자의 니즈를 반영할 수 있기 때문에, 니팅머신을 활용하면 소비자 한 명을 위한 니트웨어를 쉽게 생산할 수 있다. 패션 커스터마이징웹은 증가하고 있지만 니트 디자인은 다른 의류디자인과 다르게 고려할 요소가 더 많기 때문에 니트 커스텀을 위한 연구가 필요하지만 아직 미비한 실정이다. 이에 본 연구에서는 니트 커스텀을 위한 온라인 쇼핑몰의 GUI 디자인 가이드라인을 개발하고자 한다. 본 연구를 통해 향후 니팅 머신을 통한 니트 커스텀이 원활하게 이뤄질 수 있을 것으로 기대한다.

2. 연구의 방법 및 절차

본 연구는 문헌연구와 사례조사를 통하여 니트 디자인 프로그램과 패션 커스터마이징 웹의 GUI요소에 대한 이해를 바탕으로 커스텀 니트웨어 쇼핑몰의 GUI디자인 가이드라인을 개발하고자 한다. 본 연구에서는 첫째, 문헌연구와 사례조사를 통하여 패션 분야의 커스터마이징과 니트 디자인, GUI에 대한 연구를 하였다. 둘째, 니트 디자인 프로그램과 패션 커스터마이징 웹의 GUI를 GUI디자인 요소인 레이아웃, 아이콘과 메뉴, 컬러, 인터렉션으로 분석하였다. 셋째, 니트 디자인 과정은 다른 패션 디자인 과정보다 고려해야할 요소가 많기 때문에 쉽게 인식 가능한 시각요소가 필요하기 때문에 사용성 평가 선행연구를 조사하였다. 넷째, 사례조사와 사용성 선행연구를 바탕으로 커스텀 니트웨어 GUI디자인 가이드라인 초안을 도출하였다. 다섯째, 초안을 바탕으로 20명의 전문가를 대상으로 3차례에 걸친 델파이 조사를 진행하여 내용의 타당성을 확인했다. 마지막으로, 3차 델파이 조사 결과를 바탕으로 커스텀 니트웨어 웹의 GUI디자인 가이드라인을 도출하였다.

Ⅱ. 이론적 고찰

1. 커스터마이징의 이해

1.1 커스터마이징의 이해

커스터마이징(Customizing)이란 생산업체나 수공업자들이 고객의 요구에 따라 제품을 만들어주는 일종의 맞춤제작 서비스를 말하는 것으로, ‘주문 제작하다’라는 뜻의 커스터마이즈(Customize)에서 나온 말이다[2]. 커스터마이징을 통해 소비자는 직접 디자인에 참여함으로 자신의 욕구와 경제력에 부합되는 제품을 구매할 수 있으며, 자신의 이미지를 적극적으로 살릴 수 있는 기회를 얻게 된다. 기업은 경쟁사와의 차별화를 통해 자사의 이미지를 홍보할 수 있으며, 다양한 고객을 대응하고 관리할 수 있는 경쟁력을 갖추게 된다[3].

1.2 패션분야의 커스터마이징 현황

패션분야에서 사용자에 맞춘 의류 제작의 개념은 이전부터 행해져 온 것이지만, 현대에 들어서는 대량 맞춤화(Mass Customization)의 추세로 표준화된 의류 제품을 제공하지만 고객을 제품의 판매, 유통, 소비과정에 참여시킴으로서 기호를 살릴 수 있는 서비스를 제공하고 있다. 스포츠 브랜드인 Adidas는 ‘Miadidas’ 프로그램을 통해서 고객 스스로가 자신의 신발 치수를 재고 32종의 모델 중 원하는 신발을 선택하여 소재, 컬러, 액세서리 등의 옵션에 따라 수천 가질 커스터마이징을 할 수 있는 플랫폼 서비스를 제공하여 고객이 원하는 디자인의 운동화를 디자인-구매할 수 있도록 하였다[4].

2. 니트 디자인의 이해

니트 디자인은 원사부터 편직까지 직접 작업을 관리해야 하는 복합적인 프로세스로 진행된다. 니트웨어를 디자인하기 위한 구성요소로 크게 소재, 선, 색으로 분류한다. 소재는 니트의 디자인적 요소를 가장 잘 반영할 수 있는 요소로 원사, 편직 방법, 조직, 밀도, 게이지, 패턴 등이 해당된다. 선은 의복의 전체적인 외형을 형성하는 것으로 실루엣, 여유분, 아이템, 디테일 등이 해당된다. 색채는 가장 가시성이 뛰어난 요소로서 다양한 감성과 패션 이미지를 전달한다[5].

표 1. 니트 디자인에 필요한 UI의 종류와 내용[6]

선행연구에 의하면 커스텀 니트웨어 제작을 위해서는 실루엣, 패턴, 조직, 게이지, 원사 다섯 가지의 디자인 요소를 담아야 한다. 따라서 니트 디자인 과정은 다른 의류 디자인 분야보다 고려해야하는 요소가 많기 때문에 현재 서비스 되고 있는 패션 커스텀 GUI에는 니트 디자인 요소를 담아낼 수 있는 GUI가 필요하다.

3. GUI(Graphic User Interface)에 관한 고찰

3.1 GUI의 이해

GUI(Graphic User Interface)는 사용자가 시스템상의 정보와 쉽고 편리하게 상호작용할 수 있도록 돕거나 어떤 현상이 실제로 드러나게 인터페이스를 활용하는 것을 의미한다. 일반적으로 GUI는 제한된 출력장치에 의해 표시되므로 정보를 한꺼번에 제시할 수는 없다. 그렇기 때문에 사용자에게 전달될 정보들을 단순 나열하는 것이 아니라 구조화, 계층화하여 사용자와 시스템과의 상호작용이 원활하게 이루어지도록 도울 수 있다[7]. 사용자가 인터페이스를 통해 시스템을 이해하는 과정은 [표 2]와 같이 4단계로 정리할 수 있다[8].

표 2. 사용자가 인터페이스를 이해하는 과정

3.2 GUI디자인의 구성요

GUI디자인은 그림으로 표현되기 때문에 초보자들도 쉽게 직관적으로 사용할 수 있다. 또한 문자중심의 인터페이스에 비해 사용자가 경험해야할 학습의 양을 현저하게 줄이며 직관적인 조작이 가능하다. 따라서 인터페이스디자인 시 GUI를 고려하여 전달하고자 하는 정보를 가시화하고 사용자의 감성을 반영하여 경험을 풍부하게 할 수 있다.

본 연구에서는 GUI디자인 가이드라인 제작에 필요한 GUI의 구성요소를 조형적 측면에서 연구한 선행 연구를 조사하여 디자인 가이드라인의 기초로 활용하고자 [표 3]과 같이 정리하였다.

표 3. GUI 디자인의 구성요소 선행연구[9-13]

이와 같이 분류한 표를 바탕으로 본 연구에서는 사용자가 웹 사이트를 통해 니트의 디자인 요소를 인지하고, 니트의 커스텀 과정을 자유롭게 할 수 있도록 하는 역할인 레이아웃, 메뉴와 아이콘, 컬러, 인터렉션을 선정하였다.

표 4. GUI 디자인의 구성요소 평가분야 및 특징[9]

Ⅲ. 사례조사 및 디자인 분석

1. 조사영역 및 분석 방법

사례조사 단계에서는 커스터마이징 웹과 니트 제작 웹의 GUI를 심층적으로 파악하기위해 커스터마이징웹과 니트 제작 웹의 GUI를 분석하였다. 사례조사에 선정한 니트 제작 프로그램은 니트 디자인 경력 7년의 니트 디자이너의 제안에 따라 니팅머신을 활용한 니트 제작 분야에서 대표되는 3개의 프로그램으로 선정하였고, 커스터마이징 웹사이트 3곳은 아마존 코리아와 구글에서 추천하는 의류 잡화 부문 커스터마이징 웹사이트로 선정하여 분석하였다.

분석방법은 GUI디자인의 이론적 배경을 바탕으로 커스텀을 진행하는 단계에 작업이 이뤄지는 화면의 레이아웃, 메뉴와 아이콘, 컬러, 인터렉션 4개로 나눠 분석을 실행하고 설문조사를 진행하여 커스텀 니트웨어를 위한 GUI 디자인 요소 내에서의 중요 요인에 대해 정의하였다.

표 5. 조사영역

본 연구에서는 커스텀 니트웨어의 제작이 가능한 커스터마이징 웹의 GUI디자인 가이드라인 제시를 목표로 선행연구를 살펴보았다. 본 단계에서는 선행연구를 바탕으로 레이아웃, 메뉴와 아이콘, 컬러, 인터렉션 총 4가지의 조형적 구성요소를 분석 대상으로 선정하였다. 이후 추출한 자료들을 바탕으로 커스텀 니트웨어 웹의 GUI디자인 가이드라인 초안을 제작하여, 초안을 바탕으로 3차례에 걸친 델파이 조사를 실시하여 항목의 삭제 및 수정을 거쳐 커스텀 니트웨어 웹의 GUI디자인 가이드라인을 제시하였다.

2. 니트 제작 프로그램의 GUI 구성요소 분석

2.1 레이아웃

니트 제작 프로그램의 레이아웃은 작업 결과물을 보여주는 작업뷰 영역, 프로그램의 설정 값을 조정할 수 있는 커스텀 설정 영역, 니트 디자인의 종류 및 옵션 설정을 할 수 있는 커스텀 옵션 영역, 최종 결과물의 저장을 할 수 있는 영역으로 나눠 분석했다. 작업뷰는 노란색, 커스텀 설정은 보라색, 커스텀 옵션은 파란색, 파일 저장은 초록색으로 표시하였다.

표 6. 니트 제작 프로그램의 레이아웃 구성

니터레이트는 작업뷰를 중심으로 커스텀 옵션과 설정이 분리됨을 볼 수 있다. 좌측에는 커스텀 옵션 중에서도 상위 개념의 옵션이 있어서 아이콘을 클릭하면 우측에 그와 관련한 세부 선택 사항들이 나타난다. 커스텀 설정의 경우 레이어를 선택할 수 있는 창이 있어서 사용자는 좌측에서 레이어와 상위 개념 옵션을 선택한 후 우측에서 세부 항목을 적용할 수 있다.

엔비소니트는 작업뷰가 좌측에 크게 위치하고 커스텀 옵션이 상위, 하위 개념에 따라 좌측 상단에 상위 개념의 옵션에 따라 우측에 세부 커스텀 옵션이 보여진다.

니트버드는 작업뷰가 가장 큰 영역을 차지하며 작업뷰의 좌측에 커스텀 옵션에 관련된 UI가 모여있어 옵션을 선택하면 그 옆에 새로운 창이 나타나 세부 항목을 선택할 수 있다.

2.2 메뉴와 아이콘

니터레이트는 복종(服從),커스텀 종류, 레이어를 묶고 커스텀 옵션을 하나로 묶어서 상위 항목과 세부 항목을 나눠 정리했다. 따라서 사용자는 ‘복종 클릭-커스텀 종류 클릭-세부 옵션 선택’의 과정으로 니트를 디자인한다. 아이콘은 비슷한 톤의 이미지 위주로 구성되어있어 사용자의 직관적인 이해를 돕는다.

엔비소니트 또한 니터레이트와 같이 커스텀 종류에 관한 메뉴가 구성되어있고 종류를 선택하면 세부 옵션에 관한 창이 새롭게 나오는 형태로 구성되어있다. 아이콘은 입체적인 형태로 구성되어있는데, 커스텀 종류에 관한 아이콘은 디자인 옵션에 관한 아이콘에 비해 크게 표기되어있고, 디자인 편집에 관한 아이콘은 작게 표현했다.

니트 버드는 커스텀 종류를 선택하면 우측으로 작은 메뉴창이 나와 커스텀 옵션을 선택할 수 있도록 메뉴가 구성되었으며, 커스텀 옵션의 아이콘들은 텍스트 위주로 구성되어 있다.

표 7. 니트 제작 프로그램의 메뉴와 아이콘 구성

2.3 컬러

니터레이트는 전체적으로 화이트의 배경위에 그레이톤의 텍스트와 아이콘으로 구성되어있다. 강조색으로는 블루와 퍼플을 사용하였는데, 버튼이 활성화 되면 블루와 퍼플로 활성화 표기를 하여 포인트 컬러의 사용으로 사용자가 선명하게 인식할 수 있도록 하였다.

앤비소니트는 전체적으로 색감이 드러나지 않는 컬러 사용으로 화이트 배경에 그레이톤으로 레이아웃을 표기하고 강조색으로 연한 하늘색을 사용하여 버튼 활성화 표시를 하였다.

니트버드는 니터레이트와 엔비소니트와는 다르게 전체적으로 초록색이 추가된 그레이톤이 주조색을 이루고 있어서 아기자기한 느낌을 준다. 그러나 버튼 활성화에 따른 색감이 강조되지 않아 전체적으로 흐릿한 인상을 준다.

니터레이트와 엔비소니트는 그레이톤에 버튼 활성화 표기에 눈에 띄는 강조색을 사용한 반면 니트버드는 그린색감이 추가된 그레이톤을 사용하였고 버튼 활성화에 따라 약간의 색감 차이를 주었다.

표 8. 니트 제작 프로그램의 컬러 구성

2.4 인터렉션

세 사례 공통적으로 도트형식으로 구성된 매트릭스를 클릭해서 원하는 색을 입히거나 매듭 표시를 하여도안을 제작할 수 있는 형식이었다. 도트 하나가 매듭 하나를 의미하며 사용자가 도트의 위치를 알 수 있도록[표 12]의 엔비소니트 사례와 같이 커서 위치를 트래킹하여 사용자가 쉽고 빠르게 파악할 수 있도록 하였다. 매트릭스를 확대, 축소할 수 있는 인터페이스를 통해 전체적인 패턴을 파악할 수 있도록 하였다.

표 9. 니트 제작 프로그램의 인터렉션

표 12. 니트 제작 프로그램의 컬러 구성

3. 패션 커스터마이징 웹의 GUI 구성요소 분석

3.1 레이아웃

패션 커스터마이징 웹의 레이아웃은 작업 결과물을 보여주는 작업뷰 영역, 커스텀을 편집 할 수 있는 커스텀 설정 영역, 커스텀 기능의 종류 및 옵션 설정을 할 수 있는 커스텀 옵션 영역, 최종 결과물의 저장을 할 수 있는 영역으로 나눠 분석했다. 작업뷰는 노란색, 커스텀 설정은 보라색, 커스텀 옵션은 파란색, 파일 저장은 초록색으로 표시하였다.

엄브로의 레이아웃은 작업뷰와 커스텀 설정 및 옵션이 명확하게 분리되어있다. 좌측에서 중앙까지 작업뷰의 범위가 넓고 우측에 커스텀 설정 및 옵션 창이 위치한다. 사용편의성을 높이기 위해 작업뷰 하단에 작업 저장 버튼을 두어 결과물 확인 후 바로 저장이 가능하도록 하였고, 커스텀 옵션 선택 후 하단에 붙어있는 커스텀 설정을 클릭할 수 있도록 위치시킨 점이 특징적이다.

보우 앤 드레이프의 레이아웃은 작업뷰가 가운데에 위치하고 커스텀 설정은 우측, 커스텀 옵션은 좌측, 커스텀 저장은 하단에 위치한다. 커스텀 옵션을 적용하고 편집하기 위해 좌우로 움직이는 불편함이 존재한다.

마플의 레이아웃은 작업뷰를 중심으로 커스텀 옵션이 좌우로 위치하고, 커스텀 설정은 작업뷰 상단에 위치하고, 커스텀 저장은 우측 하단에 위치한다. 커스텀옵션에는 ‘텍스트’와 같은 상위항목에 따라 우측에 ‘서체선택’, ‘글씨색상’과 같은 하위항목이 나타난다. 다른 커스텀 웹에 비해 커스텀 옵션에 비중을 둔 레이아웃이다.

표 10. 니트 제작 프로그램의 레이아웃 구성

3.2 메뉴와 아이콘

엄브로의 메뉴에 따른 커스텀 전개 단계는 ‘유닛 선택– 색상 선택’ 또는 ‘유닛 선택 – 텍스트 및 색상 선택’으로 옷의 유닛에 따라 색상 혹은 텍스트를 바꿀 수 있다. 이 과정에서 사용자에게 해당 유닛을 이미지로 전달하여 사용자가 직관적으로 이해할 수 있도록 하였다.

보우 앤 드레이프는 ‘와펜 종류 선택 – 와펜 선택’으로 간단하게 커스텀 할 수 있으며 별다른 적용 메뉴 없이 드래그 앤 드롭으로 와펜을 쉽게 적용할 수 있다. 아이콘은 와펜의 이미지로 구성되어있으며 와펜의 사이즈까지 표기하지는 않아 일일이 적용해야 사이즈를 알 수 있다. 와펜 이외의 아이콘은 삭제, 회전, 중앙 정렬, 적용을 픽토그램으로 표현하였다.

마플은 ‘커스텀 옵션 선택 – 세부 옵션 선택 – 사이즈 조정 – 레이어 편집’으로 다른 사례들과 비교해 가장 세부적인 옵션을 제공하고 있었다. 커스텀 옵션 중 ‘텍스트’는 선택 시 우측으로 세부 옵션을 선택할 수 있는 창이 나타나지만 다른 옵션들은 새로운 창이 전면에 팝업된다.

표 11. 니트 제작 프로그램의 메뉴와 아이콘 구성

3.3 컬러

엄브로와 보우 앤 드레이프는 시뮬레이션 배경이 화이트였지만 마플은 옅은 회색을 사용하였다. 그러나 메뉴는 모두 동일하게 화이트 톤을 사용하였다.

아이콘의 컬러는 엄브로와 마플의 경우 버튼 비활성화 시에는 회색이고, 버튼 이 활성화 시에 각각 더 짙은 회색과 파란색으로 표기하였다. 보우 앤 드레이프의 경우 아이콘들이 와펜의 형식으로 되어있어 컬러풀하고 버튼 활성화에 퍼플로 표기하였다.

보우 앤 드레이프와 마플은 각각 퍼플과 블루로 포인트 컬러를 주고 엄브로는 더 짙은 회색으로 버튼의 활성화를 나타냈다.

표 12. 니트 제작 프로그램의 컬러 구성

3.4 인터렉션

엄브로는 사용자가 원하는 뷰에 도달하기 위한 네비게이션을 이미지 아이콘으로 구성하여 앞면, 옆면, 뒷면에 각각 쉽고 빠르게 도달할 수 있도록 하였다.

보우 앤 드레이프는 앞면, 뒷면으로만 구성하여 간단하지만 각각의 아이콘 이미지가 방향성을 나타내는 이미지가 아닌 방향 회전을 의미하는 이미지로 구성되어 혼란의 여지가 있다.

마플은 ‘앞면/뒷면’ 아이콘을 클릭하면 작업뷰에 의복의 방향성을 선택할 수 있는 새로운 창이 나타난다. 따라서 사용자는 방향성을 바꾸기 위해서는 ‘앞면/뒷면’ 클릭 – 원하는 뷰 클릭 2개의 단계를 거치기 때문에 방향 변경이 용이하지 않다.

표 13. 니트 제작 프로그램의 인터렉션

4. 분석결과

니트 제작 프로그램과 패션 커스터마이징 웹의 GUI를 분석한 결과는 아래와 같다.

레이아웃은 작업뷰가 화면에서 가장 큰 비율을 차지하며 화면의 중앙에 위치해 가장 잘 보이도록 하였다. 그러나 커스텀 설정과 커스텀 옵션의 경우에는 공통적으로 나타나는 점이 없었다. 다만 패션 커스터마이징 웹의 경우 커스텀 옵션이 화면의 많은 부분을 차지하고 있음을 볼 수 있었다. 이로 인해 전체적인 GUI가 확대되어 사용자가 커스텀 옵션을 쉽게 인식할 수 있을 것으로 예상된다.

메뉴와 아이콘은 공통적으로 커스텀 종류에 따라 커스텀 옵션을 선택할 수 있는 메뉴창이 변화하는 것을 볼 수 있었다. 또한 커스텀 종류의 아이콘이 이미지 위주로 표현됨을 볼 수 있었다. 그러나 아이콘의 형태와 아이콘과 텍스트 사용 비중의 차이를 볼 수 있었는데 니터레이트와 같이 아이콘에 일관적인 색감과 크기를 적용하는 것이 커스텀 기능을 직관적으로 파악할 수 있을 것으로 보인다.

컬러는 전체적으로 동일한 방향성을 나타냄을 볼 수 있었다. 그레이톤을 주로 사용하였으며, 사례에 따라 버튼 활성화 표기를 위해 강조색을 포인트 컬러로 사용하여 커스텀 결과물의 컬러와 충돌하지 않도록 하였다.

인터렉션은 니트 제작 프로그램에서는 니트의 매듭에 해당하는 셀을 클릭하는 방식으로 패턴을 만드는 공통점을 찾아낼 수 있었다. 또한 사용자가 작업뷰에서 직접적인 조정이 가능했다. 패션 커스터마이징 웹에서는 커스텀 옵션 창에서 입력한 내용을 바탕으로 작업뷰에 표기 되기 때문에, 사용자는 작업뷰에서는 커스텀의 이동, 회전, 사이즈 조정 등 디자인 편집만 가능했다.

결과적으로 니트 제작 프로그램은 니트 디자인과 관련한 기능이 많았지만, 커스텀 영역에 따른 분류가 되어있지 않아 일반 사용자가 사용하기에는 커스텀 영역과 기능 파악의 어려움이 있을 것으로 예상됐다. 반면 패션 커스텀 웹은 일반 사용자가 커스텀 영역과 기능을 직관적으로 이해할 수 있도록 구성되었지만, 니트 디자인 과정을 담기에는 정보의 깊이가 얕았다. 따라서 커스텀 니트웨어 웹 제작 시 니트 제작에 필요한 UI를 사용자가 편리하게 이용할 수 있도록 직관적인 니트 커스텀 옵션 정보를 이해할 수 있는 디자인 요소의 사용성 연구가 필요하다.

Ⅳ. 커스텀 니트웨어 웹의 작업화면 GUI디자인 가이드 도출

1. GUI 평가도구 조사

니트 디자인은 다른 패션 디자인 과정에 비해 고려해야 할 디자인 요소가 많아 웹상에서 니트 디자인이 진행 될 시 많은 UI가 사용된다. 이에 사용자가 쉽게 인식할 수 있는 시각적 요소를 사용해야한다. 따라서 본 단계에서는 사용성 평가항목에 관한 선행연구를 조사하고, 이를 커스텀 니트웨어 웹의 GUI구성요소에 적용하여 디자인가이드 초안을 제작하고자 한다.

1.1 GUI 평가항목 선행연구

다양한 GUI 이론들 중 엘리슨 J 헤드(Alison. J.Head)와 스티브크룩(Steve Krug)의 이론 및 고려사항을 반영하여 니트 제작 프로그램과 커스터마이징 웹 분석 기준을 준비하였다.

엘리슨 J 헤드의 UI 평가 기준은 니트 디자인 작업에 있어서 사용자의 작업 효율감과 관련된 항목으로 구성되어 3가지 항목 모두 GUI디자인 가이드라인 초안 내용에 적용하였다. 스티브크룩의 UI 평가원칙은 GUI 구성요소 분석 화면이 커스텀 작업을 하는 화면으로 한정되어 있기 때문에 내비게이션 항목은 제외하고 나머지 항목은 디자인 가이드라인 초안 내용에 적용하였다.

표 14. 엘리슨 J 헤드(Alison J.Head)의 3가지 UI 평가 기준 [14]

표 15. 스티브크룩의 UI 평가원칙

1.2 커스텀 니트웨어 웹의 GUI디자인 사용성 평가 리스트

니트 제작 프로그램과 의류 커스터마이징 웹의 GUI 분석 방법은 선행연구의 이론을 GUI 구성요소에 접목시켜 제작했다. 사용자가 니트 제작 프로그램과 패션커스터마이징 웹 사이트를 이용하면서 커스텀 기능, 커스텀 적용 방법, 커스텀이 적용된 결과물을 이해할 수 있는지 판단하기 위해 일관성, 간결성, 접근성, 효율성, 심미성, 일관성 5가지의 평가 원칙을 도출했다. 사용자의 정보 이해 측면에서 일관성, 간결성을 분석하고, 커스텀 기능의 사용 측면에서 접근성과 효율성을 분석하고, 전체적인 작업 화면과 결과물이 소비자의 구매 욕구를 일으키는지 측면에서 심미성을 분석하였다.

사용성 평가에 대한 선행연구와 사례조사를 기반으로 커스텀 니트웨어 웹의 GUI디자인 가이드라인 항목 초안을 도출하였다. GUI 구성요소에 각각 일관성, 간결성, 접근성, 효율성, 심미성 항목에 해당하는 세부 항목을 넣어 57개의 항목으로 작성했다. 이 중 일관성 항목은 8개, 간결성 항목은 9개, 접근성 항목은 13개, 효율성 항목은 17개, 심미성 항목은 10개이다. 다음 단계에서는 초안을 바탕으로 델파이 조사를 실시하여 전문가 대상으로 검증하고자 한다.

표 16. 조형적 구성요소 평가 분야 및 특징[7]

2. 델파이조사

2.1 델파이조사의 개요

델파이(Delphi)기법은 예측하고자 하는 문제에 관해 전문가들의 견해를 종합 및 정리하는 절차로, 조직의 특정 문제를 예측, 진단, 해결하기 위하여 의견의 일치를 볼 때까지 전문가 집단으로부터 반응을 체계적으로 도출하여 분석 및 ᆞ종합하는 과정을 거친다[15].

본 연구에서는 커스텀 니트웨어 웹의 GUI디자인 가이드 제작에 앞서 GUI 구성요소에 따라 중요한 사용성 요소를 파악하기 위해 델파이 조사를 진행했다. 초안을 기초로 타당성 및 신뢰도를 갖추기 위해 1,2,3차에 걸쳐 델파이 조사를 진행하여 전문가 검증을 받았다. 전문가 집단은 5년 이상의 경력자들로 구성되었으며, 니트 디자이너, 니팅머신 개발자, UX/UI 디자이너, GUI 디자이너 총 20명으로 구성되었다. 결과로 도출된 중요사용성 요소는 정리하여 커스텀 니트웨어 웹의 GUI 디자인 가이드로 작성하였다.

표 17. 델파이 조사 기법의 개요 및 범위

표 18. 델파이 조사 기법의 참여 대상

2.2 자료분석

3차례에 거친 델파이 조사를 통해 얻은 데이터는 엑셀(Excel)프로그램과 SPSS Statistics 프로그램을 이용하여 평균과 내용 타당도를 구했다. 내용 타당도는 Lawshe(1975)가 제시한 내용타당도 비율(Content Vaildity Ratio)를 바탕으로 분석했다. 선행연구에 의하면 CVR은 패널 수에 따라 최소값을 제시하고 있으며, 최소 값 이상이 되었을 때 내용타당도가 있는 것으로 판단된다[16]. 본 연구의 응답자 수는 20명으로CVR 최소값은 0.42이므로, 0.42 미만의 항목과 평균값 3.70 미만의 항목을 삭제하였다[17].

2.3 1차 델파이조사

1차 델파이 조사에서는 니트 디자이너, 니팅머신 개발자, UX/UI 디자이너, GUI 디자이너 집단의 의견을 폭넓게 수렴하기 위해 초안을 바탕으로 설문을 진행하였다. 설문지에는 GUI 디자인 항목에서 삭제되어야 할 항목과 수정 또는 추가해야하는 사항 그리고 GUI디자인 항목에 대한 자유로운 의견을 제출할 수 있도록 하였다. 그 결과 총 57개의 항목 중 7개의 항목은 내용중복의 이유, 5개의 항목은 커스텀 니트웨어 웹에 부적합의 이유, 2개의 항목은 어휘 수정 요청으로 총 14개의 항목을 삭제 및 수정 하였다.

2.4 2차 델파이조사

2차 델파이 조사에서는 1차 델파이 조사를 기반으로 수정된 45개의 항목으로 진행하였다. 수정된 항목은 리커트 5점 척도를 실시하고, 그 외의 의견은 서술하도록 하였다. 설문 조사 결과를 바탕으로 Lawshe(1975)의 이론에 근거하여 CVR 최솟값인 0.42 미만의 항목과 3.70 미만의 항목을 삭제하였다. 최종적으로 평균값 3.70 미만인 항목 6개, CVR 최솟값 0.42 미만 항목 5개 총 11개의 항목을 삭제하였다.

2.5 3차 델파이조사 및 결과

3차 델파이 조사에서는 2차 델파이 조사를 기반으로 삭제 및 수정된 34개의 평가 항목으로 진행하였다. 3차 조사 이전에 전문가들에게 2차 조사를 통해 삭제된 항목들에 대해 설명하였다. 2차 조사와 마찬가지로 리커트 5점 척도를 활용하여 중요도를 측정하였다. 또한 항목에 관해 수정 사항을 서술할 수 있도록 하여 수정 사항을 파악하였다. 이후 결과를 바탕으로 내용타당도 비율(CVR)값을 구해 CVR 최솟값인 0.42 미만의 항목과 평균값 3.70 미만의 항목, 수정 요구 항목을 수정하였다. 최종적으로 5개의 항목 삭제로 총 29개의 항목을 도출하였다.

표 19. 3차 델파이 조사 결과

3. 커스텀 니트웨어 웹 GUI 디자인 가이드 도출

커스텀 니트웨어 웹의 GUI디자인 가이드의 3차 델파이 조사 결과물을 기반으로 각 GUI디자인 요소에 따라 디자인 가이드를 서술하였다. 이후 조사에 참여했던 20명의 전문가들에게 내용을 전달하여 타당성을 확인했다.

표 20. 3차 델파이 조사 결과

Ⅴ. 결론

최근 자신의 취향과 가치관에 따라 소비하는 능동적인 소비자가 증가함에 따라 커스터마이징 서비스가 증가하고 있다. 패션분야에서도 소비자가 직접 디자인에 참여하여 제작, 구매하는 방식으로 커스터마이징 서비스가 증가하고 있다. 이에 따라 패션 커스터마이징 쇼핑몰이 증가하고 있지만 기성복 위에 커스텀을 진행하는 것으로 자유도가 낮다. 따라서 본 연구에서는 니팅머신을 통해 제작하는 니트웨어를 접목시켜 커스터마이징 자유도를 높이고자 한다. 니팅머신을 이용한 니트웨어는 사용자의 니즈를 반영하여 하나의 니트도 제작할 수 있기 때문에, 기존의 패션 커스텀보다 자유도가 높다. 그러나 아직 커스텀 니트웨어를 제작할 수 있는 웹에 관한 연구가 미비해 연구가 필요한 실정이다. 따라서 본 연구에서는 니트 제작 프로그램과 패션 커스터마이징 웹의 GUI를 분석하여 앞으로 제작될 커스텀 니트웨어 웹의 GUI디자인 가이드라인을 제시하고자 한다.

이에 따라 본 연구에서는 커스터마이징과 패션 커스터마이징, 니트 디자인, GUI에 관한 문헌연구와 니트제작 프로그램과 패션 커스터마이징 웹에 대해 분석하고, 사용성 평가에 관한 선행연구를 바탕으로 커스텀니트웨어 웹의 GUI디자인 가이드 초안 57개 항목을 도출하였다. 도출된 초안으로 20명의 전문가(니트 디자이너, 니팅머신 개발자, UX/UI디자이너, GUI디자이너)를 대상으로 3차례에 걸친 델파이 조사를 실시하였다. 조사는 리커트 5점 척도를 실시하여 CVR 최소값인 0.42미만의 항목과 평균 값 3.70 미만의 항목을 삭제하였고, 수정사항의 서술을 요청하여 결과적으로 29개의 항목으로 추려냈다. 커스텀 니트웨어 웹의 GUI디자인 가이드는 29개의 항목을 기반으로 도출하였다. 연구 결과 니트 디자인 과정은 다른 패션 디자인 과정보다 고려해야할 요소가 많아 커스텀 시 정보의 양이 많아지기 때문에 니트 커스텀 기능의 직관적인 이해와 빠른 적용이 가능하도록 GUI가 적용되어야 함을 파악할 수 있었다.

본 연구를 통해 도출한 GUI디자인 가이드는 향후 커스텀 니트웨어 웹 제작 시 사용성을 높일 수 있는 도구로 활용되고, 니팅머신을 활용한 니트웨어 제작에 관한 서비스 개발 시 참고할만한 자료로 활용되길 기대한다. 그러나 제시된 GUI디자인 가이드를 바탕으로 실제 사용자나 기업이 커스텀 니트웨어 웹을 사용했을 때의 사용성을 테스트 하지 못한 데에 그 한계점이 있어 앞으로 계속된 연구를 통해 보다 구체적인 결과물을 통해 실제 사용성 평가를 진행하고자 한다.