안경원 웹사이트의 메인 화면 레이아웃 특성 연구: 프랜차이즈 안경원을 중심으로
초록
안경원 웹사이트의 메인 화면 레이아웃 특성 분석을 통해 안경원의 웹사이트 디자인 개선이나 웹사이트를 개설하고자 하는 안경원에 디자인 자료로 활용하고자 하였다.
레이아웃의 개념을 살펴보고 국내 프랜차이즈 안경원 웹 사이트의 메인 화면에서 심벌로고, 이미지, 메뉴, 텍스트, 서브메뉴, 아이콘의 시각적 구성요소들을 가지고 레이아웃 특성을 분석하였다.
심벌로고는 좌측 상단과 다음으로는 중앙 상단 위치가 많았다. 이미지는 대부분이 사진이었고 좌우 블리드 기법에 상하 여백이나 하단 여백의 레이아웃이 많았으며 화면의 80~90% 공간을 차지하였다. 메뉴는 중앙 상단과 우측 상단의 위치가 유사하게 많았고 메뉴바를 만들어 위치시키기도 하였다. 텍스트는 가운데 정렬의 한글이 많았고 대부분 이미지 안에 중앙으로 배치시켰다. 서브메뉴와 아이콘은 우측 상단 위치가 제일 많았는데 화면 여러 공간으로 분산시킨 레이아웃도 있었다.
웹사이트 메인 화면의 레이아웃은 접근성이나 편의성을 좌우하고 시각적 호소력이 높은 중요한 그래픽디자인 기술이다. 안경원의 브랜드 아이덴티티에 따른 체계적이고 차별화된 웹사이트의 메인 화면 디자인이 되어야 한다.
Abstract
This study aimed to analyze the main screen layout features of optical shop websites to improve their designs or to be utilized as design materials for optical shops that intended to open websites.
The layout concept was examined, and the layout features were analyzed using the visual components of symbol logos, images, menus, texts, submenus, and icons on the website main screens of domestic franchise shops.
Many symbol logos were positioned on the upper leftpositions, and most images were photos., It was also common to use left-right bleed techniques, with a blank on the top and bottom or only on the bottom, wherein about 80%-90% of the screen was filled up. The location of the menu was similarly found at the upper top and top right, and some websites made and positioned menu bars. The texts were often in Korean and were center-aligned, and the sub-menus and icons were most often placed on the upper right side.
The main screen layouts of the websites determined accessibility and convenience for customers, as it is an important graphic design technology with high visual appeal.
Keywords:
Websites, Webdesign, Layout, Main screen, Optical shops키워드:
웹사이트, 웹디자인, 레이아웃, 메인 화면, 안경원서 론
언택트(untact) 시대에 SNS(social network service)를 이용하는 사람들이 늘어나고 있는 현실에서, 정보 전달과 소통의 대표적 매체인 웹사이트(web site)에서 표현되고 있는 수많은 정보와 시각적 구성요인들은 방문객들로 하여금 소비자의 웹사이트 접근성을 높이고 있다. 나아가 이미지 형성의 주요 요인으로 작용되어 기업이미지 향상, 소비자의 만족도와 지속적 방문을 통한 인지도 상승의 주요 요인이 되고 있다.[1] 기업들은 브랜드의 이미지를 일관성있게 추진하기 위한 하나의 방법으로 웹사이트 디자인을 통해 웹 아이덴티티를 확고하게 인지시키며 해당 기업의 역량을 강화시킬 수 있는 핵심 요소로 활용하고 있다.
소비자들이 원하는 정보 및 쇼핑의 편리성이 높은 웹사이트 디자인은 고객 유입에 중요한 역할을 하게 되며 업체에게는 매출을 높일 수 있는 수단이 되기도 한다. 때문에 온라인 쇼핑몰 웹사이트 디자인에서는 업체의 차별화된 제품 특성을 반영하는 것 이외에 철저한 시장조사와 트렌드 분석을 통해 소비자들의 만족도를 높일 수 있는 디자인 개발이 중요하다.[2]
웹사이트의 디자인이란 멀티 디바이스(multi device)로 보이는 온라인의 모든 가상공간에서 필요한 정보 제공을 독창적이고 심미적으로 적절하게 구성하고 표현 하는 것을 의미하는데,[2] 사용자의 원하는 정보를 전달하고 구매욕구를 충족시키며, 광고 노출 등으로 기업의 마케팅 목적을 달성할 수 있게 하는 디자인 영역이다. 또한 시각적인 표현상에서 사용자와 기업이 서로 커뮤니케이션 하며 소통 할 수 있는 수단이기도 하다. 그러므로 웹사이트 디자인은 기업이 전달하고자 하는 정보, 사용자가 원하는 정보를 어떻게 표현하고 전달할 것인지 계획하고 정보디자인과 기술적 디자인 요소를 복합적으로 조합하고 구성하여야 한다.
특히 메인 화면, 첫 번째 페이지는 웹사이트를 방문하는 고객들에게는 중요한 첫 만남으로 기업과 브랜드의 이미지에 큰 영향을 미친다. 고객들은 웹사이트 메인 화면의 시각적인 디자인 효과를 통해 해당 웹사이트의 첫 인상을 파악할 수 있다.[1] 첫 인상(first impression)은 이미지에 대한 지각, 믿음과 신뢰, 다양한 쾌락적 속성을 만들어내는 등 넓은 범위에서 강한 영향력을 미친다. 웹사이트를 보자마자 사용자는 첫인상을 형성하여 즉각적으로 판단을 내리는데, 시각적 호소력(visual appeal)이 높은 웹사이트일수록 첫인상은 콘텐츠를 인식하고, 유용성, 구매 여부를 결정하는데 영향을 미칠 수 있는 요인이다.[3]
따라서 메인 화면의 디자인은 웹사이트의 접근성이나 편의성과 함께 웹사이트에 대한 소비자의 만족도를 높이는데 중요한 변인이기도 하다. 메인 화면의 디자인은 접근성이나 편의성에 포함되는 하위 요인의 하나일 수도 있지만 웹사이트 매체의 특성에 적합한 사용자 인터페이스와 메타포, 상호작용 시스템의 시작이 된다는 측면에서 중요하다. 많은 양의 정보를 용이하게 전달할 수 있고 합목적성을 갖는 내용을 전달 할 수 있는 기능을 가지고 있는 웹사이트 체제에서 메인 화면 디자인은 웹사이트 전체 구조 및 네비게이션, 인터페이스, 시각적 스타일 등을 형성하고 구축하는 디자인의 출발이라고 할 수 있다.
따라서 각 기업이나 브랜드의 웹사이트에서는 메인 화면을 어떻게 기획하고 디자인 할 것인지, 기업의 정체성이나 브랜드의 컨셉을 어떻게 명확하게 부각시킬 것인지를 고민하고 디자인 개발과 마케팅 전략을 강화하고 있는 추세다.
안경원 웹사이트 또한 안경 제품에 대한 소개와 가격 위주에서 시력검사, 착시테스트, 선글라스 코디, 콘택트렌즈 코디 등 콘텐츠 구성이 나날이 발전하고 있으며 트렌드에 발맞춰 재미있게 소비자들에게 접근하고 있다.[4] 소비자와 안경원과의 커뮤니케이션을 형성시키는 수단으로 중요해지고 웹사이트 디자인에 대한 안경원과 소비자의 관심도 높아지고 있다. 하지만 시대적 매체의 중요성에도 불구하고 안경원 브랜드의 디자인 아이덴티티[5]나 안경원 브랜드네임 유형,[6] 안경원 상권 분석,[7] 안경원의 점포선택과 만족도,[8] 안경원 창업[9] 등에 관한 연구는 지속적으로 이루어져 왔으나 안경원 웹사이트 디자인에 관한 연구는 전무한 실정이다.
본 연구에서는 웹사이트에서 레이아웃의 개념과 시각구성요소를 살펴보고, 국내 프랜차이즈 안경원 웹사이트의 메인 화면에서 심벌로고, 이미지, 메뉴, 광고성 카피의 텍스트, 서브메뉴, 검색이나 SNS와 같은 아이콘 등의 구성요소들을 가지고 레이아웃 특성을 분석하였다. 분석을 통해 안경원의 웹 사이트 디자인 개선과 웹 사이트를 개설하고자 하는 안경원에 디자인 자료로 활용하고자 하는 것이 연구목적이다.
대상 및 방법
1. 대상
본 연구에서는 인터넷 상에서 검색할 수 있는 대표적인 국내 프랜차이즈 안경원에서 웹사이트가 개설된 안경원의 2021년 2월에 노출된 웹사이트 메인화면을 대상으로 하였다(Table 1).
Franchise optical shop brands
2. 방법
안경원 웹사이트의 메인 화면에서 레이아웃의 대표적인 구성 요소인 심벌로고(①), 이미지(②), 메뉴(③), 텍스트(④), 서브메뉴(⑤), 아이콘(⑥) 의 6개 항목을 나누어 항목에 번호를 부여하여 화면에서 위치를 분석하였다. 텍스트는 안경원의 광고성 텍스트 -특정 상품 브랜드 광고 카피는 제외-나 슬로건 등으로 한정하였고 아이콘은 검색 돋보기나 SNS, 기타 아이콘을 포함하였다. 이미지 영역은 음영으로 처리하였고 항목마다 그리드로 나누어 도식화하여 시각디자인 측면에서 레이아웃의 특성을 분석하였다(Fig. 1).
Main screen and grid system of websites.
결과 및 고찰
1. 레이아웃의 개념과 원리
레이아웃은 본래 설계, 배치를 뜻하는 말로 일정한 공간 안에 여러 가지 구성요소들이 배치되는 방식을 말한다[10]. 콘텐츠의 중요도를 구분하고 얼마나 독창적이고 차별화되었는지를 적용된 전체의 구도를 문자, 그림, 사진 등의 시각적 구성요소들을 조화롭게 화면상에 적절하게 구성배치하는 것이다[11]. 레이아웃에 필요한 구성요소들을 이용하여 정해진 지면이나 화면에 어떻게 적절히 배치하는 가에 따라 사용자의 만족감과 편의성을 좌우하게 된다. 레이아웃은 제한된 공간 내에서 각 구성요인들의 크기나 위치를 결정하여 합리적으로 배치하고 효과적으로 정리하는 작업으로 그래픽 디자인의 가장 기본적이고 중요한 기술로 사용된다. 디자이너의 감각과 직관에 의한 디자인 의도와 기업이나 브랜드 아이덴티티 전략에 근거해 시각전달을 목적으로 조형미를 추구하는 것에 작업의 목적이 있다. 화면을 보기 좋고 깔끔한 조형적, 심미적인 레이아웃으로 화면 구성이 되기 위해서는 화면에서 사용자 시선의 움직임이나 여백의 활용 등이 되어야 하고, 시각적 질서의 레이아웃이 필요하다. 시각적 질서와 일관성(consistency)을 유지시키는 도구가 바로 그리드 시스템(grid system)이다. 그리드의 사전적인인 뜻은 격자, 바둑판의 눈금을 말하는데 일반적으로 수직과 수평으로 면이 분할되고 반복되는 최소 이미지 단위 면적을 기준으로 하는 것이 좋다[12].
웹사이트에서 레이아웃은 정보를 바로 인지하고 가시성 향상에 영향을 주기 때문에 매우 중요한 시각적 요인으로 지정된 공간 내에서 공간의 활용용도에 따라 시각적 요인들을 다루고 정리하는 방법이다. 정보 전달의 목적에 맞게 화면상에서 심미적으로 적절하게 구성하고 배치하는 것을 말한다. 레이아웃은 한 페이지 안에서 콘텐츠를 배치하는 방법으로 정보의 효과적 전달에 목적을 두고 있어 사용자가 사이트에서 정보를 원활하게 얻을 수 있도록 돕는다. 레이아웃은 웹페이지의 정보를 질서정연하게 정리하여 구역을 형성하는 일종의 디자인 방식[13]으로 배치와 디자인에 따라 정보 전달 속도와 정보 이해력 정도를 조정할 수 있는 기능을 가지게 된다. 이때 정보의 용이성 획득을 위해 문자 사진 일러스트 등의 배열을 합리적으로 고려해야하며 일관성 있게 구성되어야 한다.[1]
포스터나 광고디자인처럼 인쇄 매체나 웹디자인에서의 레이아웃은 시각디자인 측면에서 구성요소는 거의 동일하다. 하지만 웹사이트 디자인에서 원리는 사용자와 컴퓨터 사이의 상호 정보 교환의 지각적, 인지적 특징을 기반으로 사용자가 용이하게 접근하여 대할 수 있는 인터페이스를 만들어 가는 유저 인터페이스 디자인(user interface design)이라는 것을 감안해 디자인과 레이아웃을 접근해야 한다. 웹사이트의 인터페이스는 도구모음, 주소표시라인, 상태표시라인, 스크롤바 같은 웹 브라우저(web browser)와 메인메뉴, 서브메뉴, 검색, 히스토리바(history bar) 등의 네비게이션 요소 및 로고, 이미지, 텍스트, 저작권 표시 등의 각종 컨텐츠로 구성된다. 이중 네비게이션 요소와 콘텐츠의 경우 해당 쇼핑몰의 이미지를 좌우할 수 있으므로 레이아웃을 만들 때 시각적으로 효과 있게 구성, 배치되어야 한다(Table 2).[2]
List of website interfaces
이러한 인터페이스 기반의 디자인 접근 레이아웃이 시각적 흥미를 유발하고 정보 탐색의 욕구를 극대화 시키는데 중요한 역할을 한다. 그리고 사용자에게 전달받고자 하는 정보나 메시지, 상호작용을 용이하게 하고 사용자들이 찾고자 하는 정보나 내용을 획득하는데 최적의 환경을 만들어 준다.
레이아웃의 원리도 시각디자인 측면에서 유사한데 구성원리는 통일, 변화, 균형, 강조 등으로 크게 4가지로 분류한다.[10] 통일은 구성 요소들의 크기, 형태, 색상, 서체 등의 규칙을 정해 일관성을 유지하며 요소들이 화면에서 하나로 보이도록 만든다. 이 요소들의 결합이 잘 이루어 졌을 때 전체의 통일성이 강조되고 사용자의 시선도 어느 한 부분만 응시하게 되지 않고 전체를 보고 순차적으로 보게 된다. 변화는 통일성만큼 중요한 원리로 레이아웃의 포인트로 시선을 끌고 재미를 주는 요소로 작용한다. 변화를 주는 방법에는 리듬과 율동, 공간감과 입체감, 대비와 비대칭 등이 있는데, 통일성을 유지하며 변화를 주는 것이 중요하다. 균형은 여백의 적절함, 이미지 크기, 텍스트 위치, 구도 등의 균형이 어울릴 때 보기 좋은 레이아웃을 구성하게 되는데. 비례적인 느낌이 강하다. 크기와 명암, 색상 등으로 균형의 비례적인 느낌을 나타낼 수 있다. 마지막으로 강조는 시각적으로 안정성과 리듬감을 나타내어 지루하고 밋밋한 화면의 균형을 맞추면서 중심을 잡아주는 역할을 한다. 강조의 효과는 한정적이어야 제대로 나타나는데, 강조할 구성요소나 부분을 명확하게 정하고 어떤 디자인 방법으로 강조할 것인지 우선되어야 한다.
2. 메인 화면의 디자인 구성요소
레이아웃의 시각적 구성 요소로는 타이포그래피, 이미지, 색상, 여백, 그래픽 장식(graphic element)으로 나눌 수 있다. 이러한 구성요소들을 크기나 위치를 결정하여 합리적으로 배치하고 효과적으로 정리하는가에 레이아웃의 완성도가 좌우된다. 이러한 시각적 구성요소는 웹사이트에서도 크게 달라지지는 않는다.
Jeong의 연구[2]에서는 온라인 쇼핑몰의 디자인 구성요소를 레이아웃, 네비게이션 설계, 색채, 그래픽, 홈페이지 구조, 타이포그래피로 구분하고, 웹 아이덴티티를 구성하는 요소를 레이아웃, 타이포그래피, 이미지, 아이콘, 컬러, 네비게이션, 애니메이션으로 구분한, 그리고 구성 요소를 레이아웃, 타이포그래피, 메인비주얼, 아이콘, 컬러로 나눈 선행 연구자들의 분석으로 디자인 요소를 구조적 측면, 시각적 측면, 고객서비스 측면으로 디자인 구성 요소를 구분하였다(Table 3).
Main screen components of the websites
또한 Kim의 연구[1]에서는 색상, 레이아웃, 그래픽, 네비게이션, 타이포그래피의 항목으로 디자인 구성요소를 정하였고, Zhao의 연구[14]에서는 시각적 컨셉, 색상, 폰트, 레이아웃, 그래픽 요인 등의 시각적 측면과 사이트 맵, 메뉴, 구성, 네비게이션, 검색 등의 정보구조적 측면으로 나누기도 하였다.
본 연구의 경우에는 선행 연구를 토대로 메인화면 구성요소를 심벌로고, 이미지, 메뉴, 텍스트, 서브메뉴, 아이콘의 6개 항목을 레이아웃 특성을 분석함으로써 시각적 측면으로 살펴보고자 한다.
웹사이트 메인화면에서 대표적인 레이아웃의 시각적 구성 요소 특징들을 살펴보면, 첫째 심벌로고는 얼굴의 눈에 해당되는 브랜드 디자인 응용 시스템의 근간이 되고 가장 강력하며 기억성 높은 상징물로 안경원 브랜드 디자인의 핵심이다. 안경원의 이미지 향상과 업종의 가치 부여와 직결되는 시각물로 브랜드의 성격을 규정하며 고객이 브랜드에 대하여 기대하고 인지하는 매개체이다[10]. 둘째 사진이나 일러스트레이션과 같은 이미지는 크기와 색상, 이미지의 내용에 따라 인식과 인지가 달라질 수는 있지만 웹사이트 메인 화면에서는 시지각에 영향을 미치는 시각적 메시지의 대표적인 요소다. 셋째로 사용자 고객서비스 측면에서 주요한 네비게이션 메뉴는 메인 화면에서는 필수적인 요소로 메뉴의 내용은 기업과 브랜드에 따라 조금씩 다를 수 있다. 넷째 텍스트는 기업의 홍보나 광고성 카피로 타이포그래피라고도 한다. 글자에 의한 모든 정보커뮤니케이션의 문자 조형적 표현으로도 확대 해석[7]되고 있는 텍스트는 메인화면에서는 커뮤니케이션 수단과 함께 시각적, 조형적으로도 사용자의 시선을 끌 수 있는 요소이다. 다섯째로 대부분 계층적으로 구성되는 웹사이트의 메뉴에서 서브메뉴는 여러 수준의 메뉴 구조를 통해 탐색을 가능하게 하는 것으로 메인화면에 필수적 구성요소는 아니다. 메인 메뉴 클릭에 서브 메뉴를 탐색하게도 하지만, 디자인 계획이나 비중에 따라 서브메뉴를 메인 화면에서 노출시키기도 하고, 시각적으로 더 강조하기도 한다. 마지막으로 아이콘의 구성요소 특징은 다양한 SNS 아이콘처럼 심벌화된 아이콘도 있지만 실제 기능의 직접 대상 -검색 돋보기, 청구서, 쇼핑카트기 등- 을 디자인하는 직접 대상 아이콘(resemblance icon)도 있다.[12] 전달하려는 의미와 형태 사이에 자연스러운 대응관계, 즉 내용을 시각적으로 이해하기 쉽게 만들어 정보 전달이 용이해야 하는 아이콘은 그래픽 유저 인터페이스(GUI) 발달의 중요한 구성 요소이다.
3. 메인 화면 레이아웃 분석
안경원의 웹사이트 메인 화면 레이아웃의 특성과 구성 요소의 그리드 도식화는 다음과 같다(Table 4).
Main screens and layouts of the optical shop websites
먼저 그랑프리안경 웹사이트의 메인 화면을 보면 심벌로고(①)는 기본시스템 색상으로 좌측 상단에 위치해 있고, 이미지(②)는 사진으로 좌우 블리드(bleed) 형식에 전체 화면의 90%를 차지하고 있다. 메뉴(③)(회사 소개, 제품소개, CS Center, 회원점 찾기, 회원점용)는 상단 중앙에 위치해 있고, 텍스트(④)는 광고이미지에 포함된 카피로 우측에 있다.
글라스바바의 메인화면에서는 좌측 상단에 심벌로고(①)가 기본시스템 색상으로 위치해 있다. 이미지(②)는 전체화면의 60% 정도를 차지하고 있으며 메뉴(③)(회사소개, 조직도/비전, 오시는길, 가맹점리스트, 가맹점 개설안내, 영상물)는 좌측 중앙보다 약간 위에 위치해 있다. 텍스트(④)는 뒷줄 정렬의 영어와 앞줄 정렬의 한글은 이미지에 포함, 우측 중앙과 하단에 위치해 있고, Event, Notice, Review 등의 서브메뉴(⑤)는 좌측 하단에 JOIN, CART, ORDER 등의 서브메뉴는 메뉴바를 만들어 우측 상단에, 나머지 서브 메뉴들은 중앙 아래 등으로 각각 흩어져 위치해 있다. 아이콘(⑥)은 우측 상단 끝에 위치해 있다.
글라스박스의 메인 화면에서는 심벌로고(①)가 좌측 상단에 위치해 있다. 심벌은 기본색상으로, 로고는 네가티브 형식에 화이트로 배치되었다. 이미지(②)는 감성형 사진으로 화면에 100% 풀(full) 사이즈로 위치해 있으며 메뉴(③)(About, Store, Notice, S.P.A, Franchise, Contact, Login, CS CENTER)는 상단 제일 위쪽 중앙부터 우측까지 나열되어 있다.
글라스스토리 웹사이트 메인화면을 살펴보면 심벌로고(①)는 포지티브 형식에 검정색으로 상단 중앙에 위치에 있다. 이미지(②)는 각기 다른 성격의 사진들이 네 개로 구성되어 가운데를 기준으로 좌우로 위치되어 있고 화면의 80% 정도를 차지하고 있다. 사진 경계를 화이트 라인으로 처리하였다. 메뉴(③)(BRAND, BEST, NEW, SUNGLASSES, GLASSES, QUICK PICK, CONTACT LENS, ACC, SALE, EVENT, 매장 찾기)는 사진 이미지 위에 중앙에 위치하여 사진이미지와 양끝 맞추기를 하였다. 특정 브랜드의 광고텍스트를 제외한 나머지 텍스트(④)에서 우측 상단 두 개의 이미지에서는 각각 좌측 상단과 중앙 하단에 위치해 있고, 우측 하단의 이미지에서 텍스트는 중앙 가운데부터 하단까지 위치해 있다. MY, ORDER 등의 서브메뉴(⑤)는 상단 제일 위쪽 우측에 위치하였고, 검색, SNS, 시계 등의 각종 아이콘(⑥)들은 대부분우측의 상단이나 중앙 아래의 가장자리에 위치해 있다.
다비치안경의 웹사이트 메인화면에서심벌로고(①)는 중앙 상단에 기본형 색상으로 위치되어 있다. 기업 홍보 광고성 이미지(②)는 가로형 사이즈에 블리드 형식으로 중앙 상단부터 아래로 위치, 전제 화면의 70% 정도를 차지하고있다. 메뉴(③)(제품안내, 눈 건강 차별화 검사, 멤버 쉽, 가맹 개설 안내, 홍보센터, 다비치, 인재양성)는 중앙 상단으로 하여 이미지 위에 위치되었다. 광고 이미지에 포함되어 있는 텍스트(④)는 중앙을 기준으로 이미지 상하에 걸쳐 위치해 있다. 마이페이지, 로그인, 회원 가입 등의 서브메뉴(⑤)는 우측 제일 상단에 위치해 있으며, 다비치마켓, SNS 등의 아이콘(⑥)은 우측 상단과 좌측 제일 상단에 위치해 있다.
룩옵티컬의 메인 화면에서는 심벌로고(①)가 좌측 상단에 슬로건과 조합되어 네가티브 형식에 화이트로 위치되었다. 이미지(②)는 모델 중심의 감성형 사진으로 화면에 100% 풀(full) 사이즈로 위치해 있는데 글라스박스 안경 웹사이트 이미지와 동일한 위치다. 메뉴(③)(About Look Optical, Product, Technology, Shop Info)는 상단 제일 위쪽 우측에 위치되어 있으며 텍스트(④)는 엄밀하게 보자면 텍스트라기보다는 로고와 슬로건 조합을 확대해 위치했다고 보는 것이 적절해 보인다.
무극안경의 웹사이트 메인 화면에서 심벌로고(①)는 좌측 상단에 기본형 색상으로 위치되어 있고, 안경원 내부의 이미지(②)는 다비치안경 웹사이트 이미지와 동일하게 가로형 사이즈에 블리드 형식으로 중앙 상단부터 아래로 위치, 전제 화면의 70% 정도를 차지하고 있다. 메뉴(③)(HOME, 회사소개, 체인점안내, 매장안내, 고객센터, 전체메뉴)는 이미지 상단 좌측에 검은색 메뉴바 안에 위치하였다. 텍스트(④)는 중간 맞추기 형식으로 이미지 중앙 가운데 위치해 있고 슬로건 성격의 또 하나의 텍스트는 로고 위치와 동일한 선상에 검정색 가로 직사각형 안에 놓여 져 있다. 북마크, FAQ, 사이트 맵 등의 서브메뉴(⑤)는 상단 제일 위쪽 좌우로 위치되었고, 소비자 상담, 고객 불만 접수 등의 아이콘(⑥)은 이미지 우측 하단에 위치하고 있다.
씨채널 메인화면에서는 심벌로고(①) 좌측 상단에 기본형 색상으로 위치되어 있고 광고성 이미지(②)는 좌우 블리드 형식에 상단에 여백을 주며 전체 화면의 90% 정도를 차지하고 있다. 메뉴(③)(회사소개, 가맹안내, EYE 힐링, 뉴스 & 이벤트, 매장 찾기)는 이미지 상단 우측에 정렬되어 있다. 슬로건 형식의 텍스트(④)는 이미지 안의 우측 중앙 약간 아래 위치해 있으며, 검색 아이콘(⑥)은 메뉴 제일 우측에 자리 잡고 있다.
아이젠트리 웹사이트에서 심벌로고(①)는 중앙 상단 제일 위쪽에 검정색 바탕에 네가티브 형식의 화이트로 자리 잡고 있다. 두 가지의 각기 다른 성격의 이미지(②)는 100% 풀 사이즈로 화면 전체를 차지하고 있고 이미지간의 경계는 없다. 메뉴(③)(NEW & EVENT, BRANDS, EYE GENTRY, AGENCY, FRANCHISE)는 로고 바로 아래에 검은색 메뉴바 형식으로 하여 위치하였는데 로고와 동일한 검정 배경으로 로고와 메뉴가 일체형으로 보이는 착시효과가 있다. 텍스트(④)는 이미지 내 중앙 상단에 가운데 정렬로 하여 영어와 한글로 위치되어 있다. 각종 SNS 아이콘(⑥)들은 로고와 동일한 선상에 우측에 위치해 있다.
안경나라의 메인 화면을 살펴보면 심벌로고(①)는 좌측 상단에 기본형 색상으로 위치되어 있고 광고성 이미지(②)는 좌우 블리드로 처리하며 위, 아래 여백을 주어 전체 화면의 80% 정도를 차지하고 있다. 메뉴(③)(회사소개, 가맹안내, EYE힐링, 뉴스&이벤트, 매장 찾기, 제품리스트)는 이미지 상단 우측에 위치해 있고, 검색의 아이콘(⑥)은 메뉴 제일 우측에 있다.
안경매니저 메인화면에서 심벌로고(①)의 위치는 기본형 색상으로 중앙 상단에 있고, 그래픽 광고성 이미지(②)는 좌우 블리드 형식에 상단은 여백을 주며 전체 화면의 80% 정도를 차지하고 있다. 메뉴(③)(회사소개, 제품소개, 가맹점 찾기, 가맹안내, 커뮤니티)는 로고와 이미지 가운데 레드바를 만들어 메뉴 사이에 세로 라인을 주며 위치하였다. 카피형 텍스트(④)는 서체 그래픽디자인 형식으로 하여 이미지 중앙에 위치시켰다. 청구서 확인과 가맹점 쇼핑몰 등의 서브메뉴(⑤)와 아이콘(⑥)은 로고와 동일한 선상에 우측에 위치해 있다.
일공공일 메인화면에서 심벌로고(①)는 이미지 내 우측 상단에 위치해 있고, 각기 다른 모델의 세 가지의 이미지(②)는 100% 풀 사이즈로 화면 전체를 차지하고 있고 이미지간의 경계는 없다. 메뉴(③)(회사소개, 가맹안내, EYE 힐링, 뉴스&이벤트, 매장 찾기)는 좌측 상단에 위치해 있으며 텍스트(④)는 이미지 구분 없이 좌측 중앙부터 하단에 이르기까지 왼쪽 정렬로 하여 위치해 있다. 가맹점 전용 쇼핑몰, 제품주문, 웹 하드, 상품권 정산, 협력업체 납품등록 등의 서브메뉴(⑤)와 아이콘(⑥)은 다른 웹사이트에서는 찾아보기 어려운 라운드 사각형 안에 넣어 이미지내 가장 중앙 아래에 위치하고 있다.
이노티 웹사이트에서 심벌로고(①)는 중앙 상단 제일 위쪽의 이미지 내에 네가티브 형식의 화이트로 자리 잡고 있다. 이미지(②)는 화면 풀 배치나 상하 여백 둔 다른 웹사이트와는 다르게 하단 여백을 주고 좌우 블리드 기법에 화면의 80% 정도를 차지하고 있다. 메뉴(③)(INOTI, NEW & EVENT, BRANDS, CHAIN STORE, FRANCHISE, 가맹점 전용)는 로고 바로 아래에 검은색 메뉴바 형식으로 하여 위치하였다. 슬로건과 심벌 형식의 텍스트(④)는 이미지 중앙에 위치시켰는데 꺽쇠를 주어 강조를 하였고, 아래의 텍스트는 양끝 맞추기를 하였다. ‘INOTI 통합포인트 조회’의 서브메뉴(⑤)는 좌측 상단에, 각종 SNS 등의 아이콘(⑥)은 우측 상단에 위치해 있다.
이안경 메인 화면을 살펴보면 심벌로고(①)는 상단에 있는 회색바 내 좌측에 네가티브 형식의 화이트로 자리 잡고 있다. 이미지(②)는 좌우 블리드 형식에 상단에 여백을 주며 전체 화면의 90% 정도를 차지하고 있다. 메뉴(③)(이 안경원, Lindberg, 제품, 렌즈 홀릭, 커뮤니티)는 로고와 동일한 회색바 내 우측에 위치해 있다. 텍스트(④)는 영어로 이미지 내 좌측 제일 아래에 있다. TOP, Lindberg, Lee Optical 등의 서브메뉴(⑤)는 회색 메뉴바 아래 중앙에 자리 잡고 있다.
결 론
본 연구는 국내 프랜차이즈 안경원 웹사이트의 메인 화면에 있는 심벌로고, 이미지, 메뉴, 텍스트, 서브메뉴, 아이콘 등의 구성요소를 중심으로 레이아웃 특성을 분석하였다.
분석에 따르면 심벌로고는 좌측 상단과 다음으로 중앙 상단 위치가 많았지만 우측 상단에 위치한 레이아웃도 있었다. 대부분은 기본형 색상이었지만 네가티브 형식의 화이트 색상도 있었다. 이미지는 대부분이 사진이었으며 화면 좌우 블리드 기법에 상하로 여백을 주거나, 화면좌우 블리드 기법에 하단에 여백을 준 레이아웃이 많았고 대부분 화면의 80~90%를 차지하고 있었다. 화면을 가득 채운 풀사이즈의 이미지도 보였지만 좌측 여백에 우측만을 블리드 처리하고, 좌우 여백에 아래만을 블리드로 처리한 이미지도 있었다. 메뉴는 좌측 상단과 좌측 가운데 위치도 보였지만 중앙 상단과 우측 상단의 위치가 유사하게 가장 많은 레이아웃이었다. 메뉴바를 만들어 안에 위치시킨 웹사이트도 있었다. 텍스트는 한글이 대부분이었고 한글 영문 혼용도 있었다. 대부분의 텍스트는 이미지 내 중앙에 위치해 있었으며 가운데 정렬(
)이 많았다. 서브메뉴는 우측 상단 위치가 제일 많았으며 중앙 상단과 중앙 아래, 그리고 화면을 폭넓게 사용 분산된 레이아웃도 있었다. 아이콘은 우측 상단 위치가 가장 많았고 화면 여러 위치로 분산된 레이아웃도 나타났다.
위와 같은 레이아웃 특성 분석을 바탕으로 안경원의 웹사이트 메인화면의 차별화된 레이아웃을 위한 시각요소 중심에 몇 가지 제안을 하고자 한다.
첫째, 웹사이트의 메인 화면은 심벌로고와 함께 안경원의 얼굴이므로 안경원 브랜드 디자인 아이덴티티를 기반으로 디자인 컨셉과 계획에 따라 체계적이며 일관성 있게 접근해야 한다. 메인화면에서도 안경원 브랜드의 웹아이덴티티를 확고하게 인지시키는 역할로[5] 레이아웃이 되어야 한다.
둘째, 웹사이트의 메인 화면은 안경원과의 첫 만남이다. 첫 만남에 깔끔하고 산뜻한 인상을 주려면 정보를 질서정연하게 정리하여 구역을 형성하고 내용의 전달과 이해력을 높이는 배치가 되어야 한다. 높고 낮게, 좁고 넓으며, 강약조절 등의 다양한 면적 대비 원리가 구현되어야 하는데, 이러한 면적 대비는 통일과 변화, 균형과 강조 등의 레이아웃 원리가 바탕이 되어야 한다.
셋째, 정보의 용이성 획득, 내용의 비중과 콘텐츠의 중요도를 고려해 심벌로고, 이미지, 메뉴, 텍스트, 서브메뉴, 아이콘 등의 구성요소 우선순위를 먼저 정해야 한다. 중요도에 따른 대표적 구성요소가 화면의 중심을 잡고, 다른 구성요소와 화면에 변화를 주어야 한다. 배열과 배치의 시각적인 흐름과 동선을 고려하여야 한다.
넷째, 메인 화면에서 심벌로고와 안경원의 텍스트를 삭제하더라도 어느 안경원의 브랜드인지 알 수 있도록 안경원 브랜드간의 뚜렷한 차별성이 있어야 한다. 차별화된 시각적 아이덴티티가 나타나도록 CI 또는 BI 응용시스템의 시각적 체계성을 바탕으로 구성요소들이 레이아웃에 적극 반영되어야 한다.
웹디자인에서 메인 화면의 레이아웃은 단순히 사이트 화면 하나를 디자인하는 차원이 아니다. 웹사이트 전체 구조의 핵심에 네비게이션과 인터페이스의 출발이고 기업 활동의 정보와 내용을 알리는 첫 단계의 시각화 작업이다. 고객이 필요로 하는 정보의 욕구를 충족시켜 주고 기업의 시각적 스타일 형성과 정보 제공으로 고객과 안경원 모두에게 만족감을 줄 수 있는 메인화면 레이아웃이 되어야 한다.
Acknowledgments
본 연구는 2021년 경운대학교 교내학술지원비로 연구되었습니다.
References
- Kim YS. Strategies in web design visual elements for boosting accessibility and satisfaction in websites for cosmetics. Journal of Basic Design and Art. 2015;16(2):71-86.
-
Jeong HY. An analysis of design for a branding strategy of online shopping mall for women in their 20s focusing on the main homepage. Journal of the Korea Fashion and Costume Design Association. 2018;20(4):131-146.
[https://doi.org/10.30751/kfcda.2018.20.4.131]
-
Ha S, Lee J. A basic study on web development of reuse design for sustainable space design -focus on in-depth interviews with experts. Journal of the Korea Institute of Spatial Design. 2020;15(3):139-148.
[https://doi.org/10.35216/kisd.2020.15.3.139]
- The Korean Optical News Web Site. http://www.opticnews.co.kr, (01 February 2021).
-
Hong SI, Son JS. A study on the design identity of optical shop brands. J Korean Ophthalmic Opt Soc. 2014;19(4):435-443.
[https://doi.org/10.14479/jkoos.2014.19.4.435]
-
Hong SI, Son JS. A study on the brand name type of optical shop -centric on optical shop in Daegu region. J Korean Ophthalmic Opt Soc. 2015;20(4):415-423.
[https://doi.org/10.14479/jkoos.2015.20.4.415]
-
Lee WS, Ye KH. The analyzing market boundary around the country by optical store distribution(based on do province by density and rental price). J Korean Ophthalmic Opt Soc. 2017;22(3):191-204.
[https://doi.org/10.14479/jkoos.2017.22.3.191]
-
Lee JK, Cha JW. A study of the impact of sense of values on select stores and satisfaction -centered on eyeglasses stores. J Korean Ophthalmic Opt Soc. 2014;19(4):419-427.
[https://doi.org/10.14479/jkoos.2014.19.4.419]
- Lee YI, Shin DS, Kim JH, et al. A study on starting a small optician's store at the residential area in Gyeonggi province. J Korean Ophthalmic Opt Soc. 2008;13(1):1-4.
- Choi ES, Chun YD. A research on portal mobile app interface design in Korea -mainly on layout. Journal of Korean Society of Communication Design. 2015;24(0):169-178.
- Kim M, Seo H. Study the website design elements expression analysis -focusing on the theme park homepage. Korean Journal of Communication Studies. 2015;52:193-208.
- Cho YJ, Kwon MG, Ahn SS, et al. The dictionary of contemporary design, 2nd Ed. Seoul: Ahngraphics, 2003;342.
-
Wei XZ, Song MJ. A study on relationship between cosmetic home page design and brand concept. A Journal of Brand Design Association of Korea. 2020;18(1):83-98.
[https://doi.org/10.1852/bdak.2020.18.1.83]
- Zhao S. A study on the color design of cosmetic websites for enterprise image -centers on the top 5 Korean cosmetics in Chinese market. MA Thesis. Chungang University, Seoul. 2011;2-9.
-
Kim YS. A study on comparative analysis between brand color and web site main screen color. Journal of Korea Design Knowledge. 2015;(34):215-225.
[https://doi.org/10.17246/jkdk.2015..34.020]
- Grand prix glass. PB introduction, 2013. http://www.gpeye.co.kr, (01 February 2021).
- Glass baba glass. PB introduction, 2021. http://www.glassbaba.com, (01 February 2021).
- Glass box glass. PB introduction, 2015. http://iglassbox.com, (01 February 2021).
- Glass story glass. PB introduction, 2018. http://iglassstory.com, (01 February 2021).
- Davich glass. PB introduction, 2018. https://www.davich.com/main/main.php, (01 February 2021).
- Look optical glass. PB introduction, 2011. https://www.lookoptical.co.kr, (01 February 2021).
- Mooguk glass. PB introduction, 2009. https://www.mooguk.com, (01 February 2021).
- See channel glass. PB introduction, 2017. https://www.seechannel.co.kr/main(01 February 2021).
- Eye gentry glass. PB introduction, 2014. http://www.eyegentry.com/main/main.php, (01 February 2021).
- Ankyung nara glass. PB introduction, 2017. http://aknara.co.kr, (01 February 2021).
- Optical manager glass. PB introduction, 2015. http://www.opticalmanager.co.kr/page/main.html, (01 February 2021).
- 1001 optics glass. PB introduction, 2021. http://1001optics.co.kr, (01 February 2021).
- Inoti glass. PB introduction, 2021. http://www.inoti.co.kr/new, /(01 February 2021).
- Lee optical glass. PB introduction, 2021. http://leeoptical.co.kr/default, /(01 February 2021).
