< C0CCBBF95FC6BCBCC5C3F72E687770>

Journal of the Korea Convergence Society Vol. 12. No. 4, pp. 105-112, 2021 ISSN 2233-4890 / eissn 2713-6353 https://doi.org/10.15207/jkcs.2021.12.4.105 티셔츠커스터마이징사용편의성을위한웹 GUI 디자인가이드라인연구 이샘 1, 정제윤 1, 남원석 2* 1 국민대학교테크노디자인전문대학원제품이노베이션디자인학과석사과정 2 국민대학교조형대학공업디자인학과교수 A Study on the Web GUI Design Guidelines for the Ease of Using T-shirt Customization Saem Lee 1, Je-Yoon Jeong 1, Won-Suk Nam 2* 1 Student, Graduate School of Technology Design, Kookmin University 2 Professor, Department of Industrial Design, Kookmin University 요약커스터마이징서비스는단순상품판매를하는기존온라인쇼핑몰과는달리구매자가직접커스텀해야하는차이점이있기에사용자중심의원활한커스텀이가능한작업환경이제공되어야할필요성이있다. 따라서티셔츠커스터마이징웹 GUI의사용편의성연구를목표로티셔츠커스터마이징서비스를제공하는웹사이트 3곳을선정하여티셔츠커스터마이징웹사이트의현황을분석하였다. 또한선행연구를통해커스터마이징의특성이유의한웹 GUI 디자인가이드평가원칙을일관성및명료성, 조작성, 피드백, 오류의대처, 마지막으로공유및검색의용이성으로총 5가지의평가원칙을정립하였고, 이를바탕으로티셔츠커스터마이징웹 GUI디자인가이드라인초안을작성하여이를 GUI 관련전문가집단을대상으로 3차례의델파이조사를실시하여티셔츠커스터마이징에효과적인웹 GUI 가이드라인평가항목의내용타당도를확인했다. 본연구는향후티셔츠커스터마이징웹의제작및사용성을높이는데기여하고, 효과적인커스터마이징웹 GUI 디자인참고자료로활용될수있기를기대한다. 주제어 : 커스터마이징, 웹디자인, GUI 디자인, 온라인패션쇼핑몰, IT 패션 Abstract Unlike conventional online shopping malls that handle simple product sales, customization services have to be provided with a user-centered and smooth customizable work environment because of differences that buyers have to customize themselves. To study the ease of use of T-shirt customization web GUI, three websites that provide T-shirt customization services were selected to analyze the current status of T-shirt customization websites. Through prior research, we establish the evaluation principle as consistency and clarity, operability, feedback, coping with errors, sharing and ease of search. Based on this, the T-shirt customization web GUI design guidelines were drafted and three delphi surveys were conducted on GUI-related experts to prove the validity of the web GUI guidelines evaluation items that are effective in customizing T-shirts. This study is expected to contribute to increasing the production and usability of the T-shirt customization web and to be used as an effective reference for customization web GUI design. Key Words : Customization, Web design, GUI design, Online fashion shopping mall, IT fashion *This work was supported by the National Research Foundation of Korea(NRF) Grant funded by the Korean. Government(MSIP) (No. Grant Mumber 2015R1A5A7037615). *Corresponding Author : Won-Suk Nam(name@kookmin.ac.kr) Received October 26, 2020 Accepted April 20, 2021 Revised March 10, 2021 Published April 28, 2021

106 한국융합학회논문지제 12 권제 4 호 1. 서론 1.1 연구의배경및목적 4차산업혁명이후제품의대량생산대신개인의맞춤형디자인서비스패러다임이각광받고있다 [1]. 소비자의니즈를반영하여제작단계에서다양한커스터마이징서비스를제공하는등그적용범위가점차확대되고있는데가장보편적으로자리잡은커스터마이징은패션분야에서의반티나단체복등을대량맞춤화 (Mass Customize) 하여판매하는티셔츠중심의커스텀이다 [2]. 대중화되어가는커스터마이징서비스는기존온라인쇼핑몰과는달리사용자가직접커스터마이징해야한다는차이점이있다. 때문에커스터마이징서비스를처음이용하는사용자도쉽게접근할수있고, 작업툴에대한직관적인이해가가능하며, 조작법이용이한작업환경이요구되어시각적요소를활용한디자인가이드연구의필요성이있다고판단되었다 [3]. 이에본연구에서는소비자의다양한니즈충족과초입자도원활한커스터마이징진행이가능한티셔츠커스터마이징웹 GUI 디자인가이드라인개발에목적을두고있다. 1.2 연구의방법및절차본연구에서는티셔츠커스터마이징웹사이트의커스터마이징작업환경사용성개선을목표로커스터마이징작업페이지의 GUI 가이드라인을개발하고자한다. 첫째, 티셔츠커스터마이징과웹 GUI에대한이론적고찰을통해정의를알아보고, 웹 GUI 디자인가이드에필요한핵심 GUI 구성요소를도출했다 [4-6]. 둘째, 도출한웹 GUI의핵심구성요소를평가기준으로티셔츠커스터마이징웹 GUI의현황및문제점을도출하였다. 셋째, 웹 GUI의사용성평가원칙에대한선행연구를진행하여티셔츠커스터마이징의특성과유의한웹 GUI 디자인평가원칙을도출하였다. 넷째, 도출한사용성평가원칙을토대로디자인가이드라인초안을작성하고, 이를 30명의전문가를대상으로 3차례의델파이조사를통해티셔츠커스터마이징에효과적인웹 GUI 디자인가이드라인의타당성을검증받았다. 마지막으로검증된평가항목들을최종수정및정리하여티셔츠커스터마이징웹사이트에적합한웹 GUI 디자인가이드라인을도출하였다. 2. 이론적고찰 2.1 커스터마이징의이해 커스터마이징 (Customizing) 이란생산업체나수공업자들이소비자의니즈에따라요청사항을반영하여제품을만들어주는맞춤형제작서비스를말한다. 2.2 GUI의이해 GUI(Graphic User Interface) 는컴퓨터, 태블릿, 스마트폰과같은디바이스기기의화면상에레이아웃, 메뉴, 컬러, 아이콘, 인터랙션등시각적요소를통해기능과작동방법을직관적으로알려주는그래픽인터페이스를말한다. 이를통해사용자는원하는정보를제공받으며, 시각적요소를활용한다양한서비스를제공받을수있다. 2.3 사용편의성의이해사용편의성 (Usability) 이란특정사물에대한사용자의경험적만족도를의미하며, 그범주는제품, 소프트웨어, 하드웨어, 실내, 환경, 서비스등다양한분야에서정의할수있고, 사용자로하여금시스템을얼마나잘편리하게사용할수있는가의측면으로볼수있다. 3. 티셔츠커스터마이징웹연구대상분석 3.1 티셔츠커스터마이징웹사이트비교모델선정 티셔츠커스터마이징서비스를제공하는웹사이트분석을위해구글에서조회가많이되는 3곳의티셔츠커스터마이징웹사이트를비교모델로선정하였다. 연구범위는티셔츠커스터마이징웹사이트에서제공하는서비스중사용자가직접작업하게되는커스터마이징작업페이지로한정하여분석하였다. Table 1. 3 T-shirt customization website selection models Model A Model B Model C

티셔츠커스터마이징사용편의성을위한웹 GUI 디자인가이드라인연구 107 3.2 티셔츠커스터마이징작업페이지 GUI 분석 비교모델로선정한 3곳의티셔츠커스터마이징웹사이트를커스터마이징작업페이지를연구범위로한정하여화면구성, 기능구성을기준으로분석하였다. Table 2. Configure the T-shirt customization web GUI screen Model A Model B GUI composition 3.2.2 선정모델메뉴구성분석 티셔츠커스터마이징작업에필요한모델 A, B, C의공통된메뉴구성은작업화면 ( 빨강 ), 커스텀툴 ( 노랑 ), 상세옵션툴 ( 파랑 ), 편집툴 ( 초록 ), 작업화면전환툴 ( 보라 ) 로구성되어있다. 그밖의메뉴로는모델 A와 C에서커스텀방법을, B와 C에서는주문금액을공통으로구성하고있으며, 추가적으로 A는상품판매, 온라인상담채팅, 장바구니, 서비스를제공하며가장많은메뉴를구성하고있었고, 모델 B가작업레이어와저장서비스를제공함으로써가장높은수준의작업환경을제공하였다. 3.2.3 선정모델기능구성분석 티셔츠커스터마이징작업페이지의기능구성은사용자의작업활동에서시각적요소와기능적요소를통해직접적으로영향을줄수있는요소에대해분석하였다. Table 3. T-shirt customization Web GUI function configuration GUI function Model C Model A 3.2.1 선정모델화면구성분석모델 A, B, C의티셔츠커스터마이징작업페이지의화면구성분석결과, 공통적으로작업화면 ( 빨강 ) 을화면중앙에배치하여가장많은영역을차지하고있었다. 이를기준으로자주사용하게되는상세옵션툴 ( 파랑 ) 은화면의우측에배치되어마우스동선및사용성에용이하다고판단되었으며, 모델 A를제외한 B, C 모델이커스텀툴 ( 노랑 ) 을작업화면 ( 빨강 ) 의좌측에배치함으로써커스텀툴 ( 노랑 ) 의공간을확보하여더많은커스텀툴을세부적으로보여준것을확인할수있었다. 또한작업화면전환툴 ( 보라 ) 은작업화면 ( 빨강 ) 의하단에위치한모델 B, 기능의예시를이미지로표현한모델 C, 간략하게텍스트및아이콘으로표기한 A순으로가시성이높았으며, 마지막으로편집툴 ( 초록 ) 은커스텀툴 ( 노랑 ) 과상세옵션툴 ( 파랑 ) 의하위작업에속하기에반복되는작업에용이하기위해작업화면 ( 빨강 ) 의가장가까이에배치하였다는사실을확인하였다. Model B Model C 모델 A는명확한컬러대비와즉각적인인터랙션을사용함으로써사용자의실시간적작업내용인지를도왔다. 반면, 모델 B는메뉴선택시작업화면이어두워지고새로운창이팝업이되는형식으로다소시간이지체되는느낌을주지만, 정확한수치를입력할수있는상세창을통해더욱섬세한작업을가능케했다. 마지막으로

108 한국융합학회논문지제 12 권제 4 호 모델 C는커스텀창과옵션창을열고닫는인터랙션으로여닫을때마다혼잡한느낌을주지만작업화면 ( 빨강 ) 의화면전환은별다른인터랙션없이즉각적으로변환되기때문에작업활동에는지장이없음을확인할수있었다. 칙, 미국국립암연구소 (NCI) 웹디자인및사용성평가지침 을반영하였고, 커스터마이징 의특수성을고려한선행연구로는 커스터마이징상품제작웹사이트사용성평가도구개발에관한연구 와 니팅머신을이용한커스터마이징니트제작웹사이트사용성평가도구개발 을분석하여선행연구를진행하였다 [11,12]. 4. 티셔츠커스터마이징웹 GUI 디자인 가이드도출 4.1 GUI 평가항목선행연구 4.1.1 GUI 구성요소선행연구선행연구를통해웹 GUI 디자인의구성요소를분석하고이를기반으로티셔츠커스터마이징웹 GUI의평가항목을선정하고자한다. 선행연구를통해웹 GUI의핵심구성요소는레이아웃, 컬러, 메뉴, 시각적요소, 인터랙션이라는것을확인할수있었고, 이를통해본연구에서는티셔츠커스터마이징작업에필요한웹 GUI 핵심구성요소평가항목을레이아웃, 컬러, 메뉴, 시각적요소, 인터랙션으로선정하였다 [7-10]. Table 4. Components of the GUI Thesis title and author S. H. Kim(2011). A study on the Graphic User Interface Design for Improving Usability Components of the GUI Color, Layout, Typography, Graphics, Multimedia, Interaction W. Wu(2014). Research on perceptual GUI Layout, Color, Menu and design applying techniques of collage-gui Icons, Text, Sound, Image design for the official website of Hubei Source, Video, Interaction Institute of Fine Arts- H. S. Lee(2002). A study of effective GUI design expression on Web site. Y. J. Wui(1996). A Study of Graphics User Interface Design on Screen K. E. Kim(2014). Attributes of GUI design according to the development of E-book platform : focusing on domestic cases Text, Image, Video, Color, Symbol & Icon Visual symbols, Letters, Graphics, External media, Colors Colors, Layouts, Typography, Images, Multimedia, Interaction 4.1.2 GUI 사용편의성평가항목선행연구 티셔츠커스터마이징웹 GUI의사용편의성개선을목표로디자인가이드개발에앞서평가원칙도출을위한선행연구를진행하였다. 일반적인웹사이트 GUI의사용편의성과 커스터마이징 이라는특성이유의한사용편의성평가원칙도출을위해 웹사이트에서효과적인 GUI 에관한연구 와 제이콥닐슨의웹사이트사용성평가원 Table 5. GUI Design Usability Assessment Principles Precedent research Usability Assessment Principles H. S. Lee(2002). A study of effective GUI Consistency, Ease of use, Feedback, Clarity design expression on Web of design, Aesthetics configuration site. Visibility of system status, Match between system and the real world, User control and Jakob Nielsen(1993). freedom, Consistency and standards, Error 10 Usability Heuristics for prevention, Recognition rather than recall, User Interface Design Flexibility and efficiency of use, Aesthetic and minimalist design, Help users recognize, diagnose, and recover from errors, Help and documentation Design process and evaluation, Optimization of user experience, Accessibility, Hardware US National Cancer and software, Homepage, Page layout, Institute Web Design and Navigation, Long page/short page, Usability Assessment Heading/title/label, Link, Appearance of Guidelines text, List, Screen-based controls, Graphics/multimedia, Web content creation, Composition, Search S. W. Son(2018). Development of Usability Evaluation Method For Online Product Customization Operability for utilization, Learningability for Use, Understanding the structure, Controlling the system, Avoiding mistakes, Clarity of function, Consistency of structure, Recognition of function, Feedback of function, Importance of information, Simplicity of information, Customer and seller communication, User compatibility, Availability of searches, System control H. S. Jang(2020). The Development of Simplicity of information, Consistency of Usability Assessment Tool structure, Feedback of work, Ease of for Customized Clothing function, Handling errors, Clarity of function, Web Site Using Nitting Ease of sharing, Information provision Machine 일반적인웹 GUI 디자인연구에서강조되는평가원칙을살펴보면전반적인사용자의작업효율과관련된항목으로구성되어일관성, 사용편리성, 피드백, 명료성, 심미성이강조되었고, 커스터마이징의사용성평가도구개발연구에서강조되는평가기준은커스터마이징시스템에대한구조의이해, 조작성, 오류의대처, 작업활동에대한피드백, 공유및검색의용이성이강조되는것을확인할수있었다. 이를통해커스터마이징의특성이유의한웹사이트 GUI 디자인가이드평가원칙을위해시스템구조및기능의이해를돕는일관성및명료성, 커스텀작업영역에서의조작성, 사용자작업활동에대한

티셔츠커스터마이징사용편의성을위한웹 GUI 디자인가이드라인연구 109 피드백, 작업활동중오류의대처, 마지막으로커스터마이징데이터에대한공유및검색의용이성으로총 5가지의평가원칙을정립하였다. 4.2 티셔츠커스터마이징웹 GUI 디자인사용성평가리스트 선행연구를통해도출한평가원칙을바탕으로티셔츠커스터마이징웹 GUI 디자인가이드라인평가항목초안을작성하였다. 사용자가티셔츠커스터마이징웹사이트를이용할때커스텀의기능, 커스텀적용방법, 커스텀을적용한결과물을이해할수있는지판단하기위해명료성, 조작성, 피드백, 오류의대처, 공유및검색의용이성으로총 5가지의평가원칙을도출한후사용자의정보이해측면에서일관성, 공유및검색의용이성을분석하고, 커스터마이징기능의사용측면에서조작성과피드백, 오류의대처를분석하였다. 가이드라인의초안의내용은 Table 6과같이정리할수있다. Table 6. T-shirt customization Web GUI guideline assessment item draft Number GUI guideline assessment item draft Provides tutorials for custom methods, features, and 1 location descriptions. Restrict custom work views to 'front', 'back', 'side', 'back 2 of neck'. Center the task screen, right for the detailed editing 3 tool, and left for the custom tool. Custom tools are represented by simple titles and icons, 4 but should be recognizable to anyone. For sub-icon without text, hover the mouse cursor over 5 the letter to provide a functional description. Provide custom sub-editing tools classified according to Consist 6 their function. ency Provides instant screen transformation without the use and 7 of flamboyant interaction. clarity Provide the same type of GUI for various browsers and 8 operating systems. Overall, provide menus, colors, and fonts in a consistent 9 format. Emphasize the information that is important for 10 customization through visual elements. Follow the customization methods in order so that users 11 can understand the customization. Clearly categorize and mark the categories of custom 12 and editing tools by color. Provide achromatic background so that you can be 13 realistic about your custom. 14 Make it possible to store customized work done by the user. Do one thing at a time rather than multiple 15 customizations at the same time. Operabi Provide layer functionality to facilitate selection and 16 lity editing of each design source. Separate work screens and other areas and provide 17 space for users to place files to edit. 18 Allow users to set the location of frequently used features as desired. Feedba ck Handlin g Errors Ease of sharing and retrieva l 19 20 21 22 23 Customized tools tailored to user settings should be automatically saved for future use. A simple function of the custom function should enable the use of shortcuts. The correct completion button for the work activity must be pressed to complete it. It should be disabled and shown even if the function is not available rather than just showing the custom functions available. Numerical inputs should be used to enable accurate work. 24 The custom work screen should be able to be enlarged. 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 Screen augmentation allows for all available formats, such as buttons and scrolls. To avoid custom errors, the size and number of characters in the custom area should be limited. The number of characters that can be pre-populated should be indicated to prevent users from modifying them during the operation. It should be possible to check the current customization process. It provides a preview of the functionality of the custom tool as an example GIF screen. Except for the categories of tools that the user is using, the remaining tools should be grouped and hidden. It should clearly distinguish between tasks in progress and those that are not. Depending on the user's mouse cursor, the color of the selection tool should be changed. The last activity the user worked on should be changed to the top of the layer in real time. When finished customizing, guide them to the next step. The interface should be automatically modified according to the user's operation. When changing the product during customization, the customization work that was carried out should remain the same. There should be an automatic storage function so that the work that has been carried out can be recovered even if it fails. Q&A or counseling should be possible to solve the user's cognitive errors. You should be able to refer to the help according to your needs. A save pop-up window should be provided to prevent user exit errors. The program should inform the user about the user's error. The customization of the user should be provided in the most realistic representation. Custom files should be converted to match the format of various SNS. It should be possible to upload customizations to the site and to save them as files by individuals. Custom files that you want to refer to should be imported into the user's custom. Users should be able to introduce their customizations through hashtags. It should store other people's customizations and provide them for users to edit. 티셔츠커스터마이징웹 GUI 디자인가이드라인평가항목초안은총 47개의항목으로일관성및명료성항목은 13개, 조작성항목은 10개, 피드백항목은 12개, 오

110 한국융합학회논문지제 12 권제 4 호 류의대처항목은 7개, 공유및검색의용이성항목은 5 개로구성되어있다. 다음단계에서는작성한평가항목초안을바탕으로 3차례의델파이조사를실시하여전문가를대상으로검증받고자한다. 4.3 델파이조사 4.3.1 델파이조사개요델파이 (Delphi) 조사기법은예측되는문제에대해전문가들의견해를참고하여특정문제를예측, 진단, 해결하기위한최종적의견일치를목표로전문가집단으로부터수차례의조사를통해정확한분석및종합하는과정을거친다 [13]. 본연구는초안을바탕으로평가항목의타당성을갖추기위해총 3차의델파이조사를걸쳐전문가들의검증을받았다. 전문가집단은 4년이상의 GUI 경력자들로구성되어있으며웹디자이너, UX/UI 디자이너, GUI디자이너로총 30명으로구성되었다. 결과로도출된중요한사용성요소는종합및정리하여티셔츠커스터마이징웹 GUI디자인가이드로작성하였다. 4.3.3 1차델파이조사 1차델파이조사에서는웹디자이너, UX./UI 디자이너, GUI 디자이너로구성된전문가집단의의견수렴을위해초안을바탕으로설문조사를진행하였다. 설문지에는 GUI 디자인평가항목을제시하여제거하거나수정되어야할항목을선택하는의견제출로구성하였다. 그결과총 47개의항목중내용중복, 커스텀웹 GUI 에부적합등의요인으로총 3개의항목을삭제, 2개의항목을수정하였다. 4.3.4 2차델파이조사 2차델파이조사에서는 1차델파이조사를바탕으로수정된 44개의평가항목을리커트 5점척도로재설문을실시하였다. 2차델파이설문조사결과를 Lawshe (1975) 의이론에근거하여 CVR 최솟값인 0.33 미만의항목과평균값 3.00 미만의항목을삭제하였다. 최종적으로 CVR 최솟값 0.33 미만항목 12개와평균값 3.00 미만인항목 1개총 13개의항목을삭제하였다. Table 7. Overview and scope of Delphi investigation techniques Degree Survey schedule Contents of investigation 1st 2nd 3rd 2020.12.03.~ 2020.12.17 2021.01.10.~ 2021.01.19 2021.02.11.~ 2021.02.22 4.3.2 자료분석 Clean up and delete entries for drafts Five-point Likert scale for the first Delphi survey, items supplemented and deleted 5 Likert scale for the 2nd Delphi survey, items supplemented and deleted 3차례에걸친델파이조사를통해얻은데이터는엑셀 (Excel) 프로그램과 SPSS Statistics 프로그램을이용하여평균값과내용타당도를도출했다. 내용타당도는 Lawshe(1975) 가제시한내용타당도비율 CVR(Content Vaildity Ratio) 를바탕으로분석했다. 선행연구에의하면 CVR값은전문가수에따라최솟값을제시하며, 최솟값이상이면내용에타당성이있는것으로판단된다 [14]. 본연구의응답자수는 30명으로 CVR 최솟값은 0.33이므로, 0.33 미만의항목과평균값 3.50 미만의항목을삭제하였다 [15]. Table 8. Third Delphi Survey Results 4 5 7 8 4.3.5 3 차델파이조사및결과 3차델파이조사에서는 2차델파이조사를기반으로삭제및수정된 31개의평가항목을리커트 5점척도를활용하여중요도를측정하였고, 이후결과를바탕으로내용타당도비율 (CVR) 값을구해최솟값 0.33 미만의항목과평균값은 0.5점강도를높여 3.50 미만의항목을제거및수정하였다. 최종적으로 9가지항목삭제로총 22개의항목을도출했다. 4.4 최종티셔츠커스터마이징웹 GUI 디자인가이드라인도출 10 3rd evaluation M CVR Custom tools are represented by simple titles and icons, but should be recognizable to anyone. For sub-icon without text, hover the mouse cursor over the letter to provide a functional description. Provides instant screen transformation without the use of flamboyant interaction. Provide the same type of GUI for various browsers and operating systems. Emphasize the information that is important for customization through visual elements. 4.87 1.00 4.23 0.87 3.53 0.87 4.00 0.87 4.47 1.00

티셔츠커스터마이징사용편의성을위한웹 GUI 디자인가이드라인연구 111 14 20 24 27 28 29 31 32 34 35 36 37 38 39 41 42 45 Make it possible to store customized work done by the user. A simple function of the custom function should enable the use of shortcuts. The custom work screen should be able to be enlarged. The number of characters that can be pre-populated should be indicated to prevent users from modifying them during the operation. It should be possible to check the current customization process. It provides a preview of the functionality of the custom tool as an example GIF screen. It should clearly distinguish between tasks in progress and those that are not. Depending on the user's mouse cursor, the color of the selection tool should be changed. When finished customizing, guide them to the next step. The interface should be automatically modified according to the user's operation. When changing the product during customization, the customization work that was carried out should remain the same. There should be an automatic storage function so that the work that has been carried out can be recovered even if it fails. Q&A or counseling should be possible to solve the user's cognitive errors. You should be able to refer to the help according to your needs. The program should inform the user about the user's error. The customization of the user should be provided in the most realistic representation. Custom files that you want to refer to should be imported into the user's custom. 5. 결론 4.43 1.00 4.23 0.93 4.27 1.00 4.23 0.93 3.87 0.93 3.60 0.87 4.80 1.00 3.87 0.93 4.23 0.87 4.37 0.93 4.07 1.00 3.97 1.00 3.73 0.87 4.80 1.00 3.53 1.00 4.83 1.00 4.07 1.00 개인의맞춤형디자인서비스패러다임이확산됨에따라티셔츠커스터마이징서비스의이용이증가하고있다. 잇달아다양한형식의커스터마이징플랫폼이곳곳에서도입되고있으며, 이에커스터마이징이라는생소한서비스에입문하는사용자들의커스터마이징서비스이용중발생하게되는여러가지문제점에대해개선할필요성이있다고판단하였다. 이에본연구에서는소비자의다양한니즈를충족함과동시에초입자도원활한커스터마이징서비스이용이가능하며, 작업툴에대한직관적인이해와조작법이용이한작업환경을목표로티셔츠커스터마이징웹 GUI 디자인가이드라인을연구하였다. 이론적고찰과티셔츠커스터마이징웹연구대상 GUI 분석을바탕으로커스터마이징서비스의 GUI와현황및문제점을살펴보았고, GUI의구성요소선행연구와사용편의성평가항목선행연구를통해커스터마이징의특성과유의한평가원칙을도출하였다. 도출한평가원칙은시스템구조및기능의이해를돕는일관성및명료성, 커스텀작업영역에서의조작성, 사용자작업활동에대한피드백, 작업활동중오류의대처, 커스터마이징데이터에대한공유및검색의용이성으로총 5가지의평가원칙을정립하였다. 선행연구를통해정립한 GUI의구성요소와평가원칙을기반으로티셔츠커스터마이징웹 GUI 디자인가이드라인평가항목초안을작성하였고, 이를 4년이상의 GUI 경력자 30명의전문가집단을대상으로 3차례의델파이조사를실시하였다. 조사결과에따라전문가집단의의견을반영및수정하여최종적으로총 22개의티셔츠커스터마이징웹 GUI 디자인가이드라인항목을도출하였다. 도출된가이드라인은피드백에서 8개, 오류의대처에서 6개, 일관성및명료성에서 5개, 조작성에서 2개, 공유및검색의용이성에서 1개의항목순으로선별되었으며, 전반적인분석은기능구성측면에서의개선보다는화면구성과메뉴구성측면에서의직관적인배치와표현은물론, 사용자가정보의혼란이없도록가능한간결하되필요에따라추가설명을제시함으로써사용자의인지및이해도를높이는것이중요하다고평가되었다. 또한무엇보다사용자가시스템을이용하는도중의오류발생을방지하는것이가장중요하기때문에사용자가자신의작업활동을보다명확하게인지할수있도록다양한피드백을제공하고, 시스템상에서의오류역시사용자에게경고및계속된인지를통해미연에방지하는것이중요하다는결론이나왔다. 본연구를통해도출한 GUI 디자인가이드는향후티셔츠커스터마이징웹의사용성을높이는데기여하고, 웹 GUI 디자인가이드평가항목개발시참고자료로활용될수있기를기대한다. 다만제안한 GUI 디자인가이드에대한실제웹적용및사용자를대상으로사용성테스트를하지못한데에한계점이있기에추후 GUI 디자인가이드를적용후구체적인결과물을통해실제사용성평가를진행하고자한다. REFERENCES [1] S. & P. (2017.10.21). Naver Post. https://m.post.naver.com/viewer/postview.nhn?volum

112 한국융합학회논문지제 12 권제 4 호 eno=10006218&memberno=1192430 [2] M. H. Kim (2020). A Study on the Customizing T-shirt Design by 3D Printing. Journal of Cultural Product & Design, 60(2020), 147-156. [3] S. W. Son. & W. J. Chung. (2018). Development of Usability Evaluation Method For Online Product Customization. Doctoral dissertation. Kookmin University. Seoul. [4] H. S. Jang & W. S. Nam. (2020). A Study on the GUI Design of Fashion Customizing Web : Centered on Custom Knitware. The Korea Contents Society, 20(4), 124-137. [5] W. S. Choi. (2014) A Study on Overseas and Domestic Online Fashion Shopping Mall based on Web Usability and Graphical User Interface(GUI) Design. Domestic Master's Thesis, Graduate School of Design, Kookmin University. Seoul [6] H. S. Lee. (2002). A study of effective GUI design expression on Web site. KOREA DIGITAL DESIGN COUNCIL, 3, 45-53. [7] Y. H. Lee. (2019). Study of GUI Design appearing in Fast Food Restaurant DID Focused on Lotteria, McDonald's, Burger King and Mom's Touch -. Journal of the Korea Convergence Society, 10(11), 253-262. [8] Y. Y. Kyung. (2016). A study on Coffee Shop App GUI Design. Journal of Korea Institute of Cultural Product & Design, 45, 47-56. [9] K. S. Lee & C. S. Leam. (2019). A Case Study on Implementation of UI Development Tool for Web Environment ERP System. Journal of the Korea Convergence Society, 10(1), 13-24. 이샘 (Saem Lee) [ 학생회원 ] 2020년 3월 ~ 현재 : 국민대학교테크노디자인전문대학원제품이노베이션학과석사과정 관심분야 : 제품디자인, 플랫폼디자인 E-Mail : dltoa6746@kookmin.ac.kr 정제윤 (Je-Yoon Jeong) [ 학생회원 ] 2019년 9월 ~ 현재 : 국민대학교테크노디자인전문대학원제품이노베이션학과석사과정 관심분야 : 제품디자인, 플랫폼디자인 E-Mail : jeongjy01@kookmin.ac.kr 남원석 (Won-Suk Nam) [ 정회원 ] 2011년 3월 ~ 현재 : 국민대학교공업디자인학과 ( 교수 ) 관심분야 : 제품디자인, 플랫폼디자인 E-Mail : name@kookmin.ac.kr [10] Doosan Encyclopedia. GUI. doopedia.[online]. http://www.doopedia.co.kr/doopedia/master/master. do?_method=view&mas_idx=101013000721673 [11] H. S. Lee. (2002). A study of effective GUI design expression on Web site. Journal of Digital Design 3, 2002.2, 45-53. [12] Jakob Nielsen. (2005). 10 Usability Heuristics for User Interface Design. Nielsen Norman Group.[Online]. https://www.nngroup.com/articles/ten-usability-heuri stics/ [13] Human. Delphi method. (2019). Wikipedia. https://ko.wikipedia.org/wiki/%eb%8d%b8%ed%8c%8 C%EC%9D%B4_%EA%B8%B0%EB%B2%95 [14] S. W. Son. (2018). A Study on Web Usability for Custom Product Design. Doctoral dissertation. Kookmin University. Seoul. [15] L. Man. (2020). Development Evaluation Model for Improving the Usability of Smart Home App GUI Design. Doctoral dissertation. Chungnam ational University. Daejeon.