• 디자인융복합연구
• /
• 제14권4호
• /
• pp.181-192
• /
• 2015

디자인 요소에서 레이아웃은 전체 정보 구조를 결정하는 중요한 요소로서 정보의 배치, 연결, 구분을 비롯해 사용자의 행동유도 및 정보 인지 등의 구조적 기능을 포함하고 있다. 최근 웹 인터페이스 디자인의 레이아웃은 전통적 Z레이아웃 개념에서 점차 F레이아웃으로 변화되다가 최근에는 Z레이아웃의 변형인 분할레이아웃 형태로 점차 변화되어가고 있다. 그러나 이런 변화 이유에 대한 객관적 근거가 부족하다고 할 수 있다. 따라서 F레이아웃과 Z레이아웃 사이에서 기능적 차이가 사용자 경험에 어떠한 영향을 미치는지에 대한 연구가 필요하다고 할 수 있다. 본 연구에서는 웹사이트의 제품설명 웹페이지를 중심으로 F레이아웃과 Z레이아웃 웹사이트에 대한 사용자 테스트를 진행하여 유형별 레이아웃이 사용자 경험에 미치는 영향을 조사하였다. 실험 결과 F레이아웃보다 Z레이아웃을 기반으로 한 분할 레이아웃에서 사용자가 느끼는 호감도가 큰 것으로 나타났다. 또한 효율성, 접근성, 몰입성 등 Z레이아웃에서 사용자의 호의적인 태도를 형성하는데 더 유리한 것으로 나타났다. 본 연구의 결과는 Z레이아웃을 기반으로 한 분할레이아웃으로 변화되어가는 웹디자인 추세와 일치하는 것으로서 사용자 평가를 통해 효과적인 웹디자인 레이아웃의 객관적인 근거를 제시하였다.

• 한국정보처리학회:학술대회논문집
• /
• 한국정보처리학회 2012년도 춘계학술발표대회
• /
• pp.525-528
• /
• 2012

최근 무선 인터넷 서비스의 활성화와 함께 모바일 환경에서 브라우저의 사용이 급증하고 있으며, 모바일 사용자들은 PC 수준의 품질을 요구하고 있다. 이에 따라 모바일 웹브라우저도 WAP 방식이 아닌 풀브라우징(full browsing) 방식으로 전환되고 있다. 하지만, 모바일 단말 환경에서 웹브라우저의 성능에는 많은 제약사항이 존재하며, 부족한 메모리, 저 사양의 CPU, 낮은 네트워크 속도, 그리고 브라우저의 엔진 문제 등으로 인해 여전히 사용자들의 브라우저 로딩에 대한 체감 속도는 낮은 편이다. 본 논문에서는 저사양 휴대 단말 환경에서의 브라우저 로딩 속도를 개선할 수 있는 방안을 제시한다. 제안 방식에서는 텍스트와 이미지 등 데이터 타입을 분류하여 부하가 적게 걸리는 텍스트 레이아웃을 먼저 보여줌으로써 사용자의 체감속도를 향상시키고, 아울러 이미지가 커서 렌더링(rendering) 시간이 오래 걸리는 경우 이미지를 축소하거나 화질을 낮추는 방식으로 렌더링 부하를 줄여서 페이지 로딩 시간을 단축시키는 방법을 사용한다. 실험 결과, 제안 기법을 사용하는 경우 현재 사용하는 방법에 비해 이미지가 적은 Web 페이지의 경우 1st drawing 77.04%, full drawing 5.47%, 이미지가 많은 페이지의 경우 26.32%의 로딩 시간을 단축시킬 수 있음을 확인하였다.

• 한국콘텐츠학회:학술대회논문집
• /
• 한국콘텐츠학회 2004년도 춘계 종합학술대회 논문집
• /
• pp.566-574
• /
• 2004

브라우저의 발달과 플래시의 발달로 최근에는 동적인 화면과 인터페이스에 대한 두려움이 일반 사용자들에게도 많이 줄어들고 있다. 또한 플래시의 발달함에 따라 이제 웹은 사용자들의 참여를 유도함으로써 웹만의 고유한 인터렉티브(interactive)하고 동적인 디자인이 부각되고 있다. 따라서, 이 논문을 통해 이러한 인터렉티브한 사이트들의 레이아웃에 대해 유형별로 분석하여 현 실태를 파악하고 디자인적 방법론과 플래시의 유용성에 대해 알아보고자 한다.

• 한국컴퓨터정보학회:학술대회논문집
• /
• 한국컴퓨터정보학회 2014년도 제49차 동계학술대회논문집 22권1호
• /
• pp.361-363
• /
• 2014

본 논문에서는 디지털 기기를 나타내는 모바일과 아날로그를 나타내는 팝업북을 통해 각 지역의 유명한 광관 명소나 지역적인 정보를 표현하는 컨텐츠를 제시하고자 한다. 팝업북 각각의 페이지에는 그 지역의 지형을 아웃라인으로 만들고 그 안의 평면에 3D로 지형을 구현한다. 사람들이 가지고 있는 모바일로 관광책자 Application을 실행한 뒤 데이터베이스에 저장된 해당 지역 데이터를 전송받아 지역 페이지로 실시간으로 바뀌게 되고 Application 안에는 명소가 있는 지역이나 건물이 담겨있어 버튼을 터치하면 그 명소가 팝업북 안에 프로젝션 맵핑으로 보여지고 그 옆에는 교통수단 및 특산품 등 다양한 정보를 담을 수 있다. 이러한 프로세스를 통한 새로운 관광 책자로 사용자들은 제한적인 정보를 담고 있는 책자를 넘어 3D로 실시간으로 볼 수 있어 더 효과적으로 여행 정보를 얻을 수 있다.

• 한국정보과학회:학술대회논문집
• /
• 한국정보과학회 2007년도 가을 학술발표논문집 Vol.34 No.2 (C)
• /
• pp.216-221
• /
• 2007

웹에는 방대한 양의 정보가 있지만 현재 그 활용은 제한적이다. 본 연구는 기존에 PC를 통해서만 접근 가능했던 웹 정보를 TV나 모바일 기기를 통해서 볼 수 있게 함으로써, 사용자로 하여금 시공간의 제약으로부터 자유로운 정보 환경을 제공하려는 취지에서 수행되었다. 현재의 웹 정보를 TV나 모바일 기기와 같은 일상적인 매체를 통해서도 활용할 수 있기 위해서는 각 디바이스의 화면에 적합하게 필터링과 요약을 통해 재구성하는 기술이 요구된다. 본 논문에서는 자연어처리 기술에 기반하여 온라인 뉴스 페이지를 개인 디바이스에 적합한 형태로 내용과 레이아웃을 재구성하는 시스템인 ONASys(Online News Adaptation System) 에 대해 소개한다. ONASys는 공간적, 내용적 속성을 이용하여 웹페이지 상의 중요 정보를 선별하는 #컨텐츠 필터링 모듈#, 패턴의 분석과 공기 정보를 통한 문법적 주 요소 인식을 통해 문장을 하는 #문장 요약 모듈#, 제목과 문장의 연관성을 통하여 문장의 중요도를 판단하는 #중요도 결정 모듈#로 구성된다.

• 한국콘텐츠학회논문지
• /
• 제19권4호
• /
• pp.556-563
• /
• 2019

본 연구는 최근 확산되고 있는 언택트 서비스의 대표 사례인 패스트푸드점의 키오스크를 대상으로 고령자의 사용경험 향상을 위한 연구를 수행하였다. 먼저 문헌 연구를 통해 키오스크 디자인 분석 기준에 대해 고찰하고 현재 우리나라 패스트푸드점 중 키오스크가 제공되고 있는 맥도날드, 롯데리아, 버거킹의 햄버거 구매 UI 화면을 컬러, 레이아웃, 버튼으로 나누어 분석하였다. 그 다음 고령자들을 대상으로 사용성 평가와 설문을 통해 현 키오스크의 인터페이스 디자인 문제점을 발견하였다. 그 결과 고령자들은 아웃라인이 없는 버튼을 버튼으로 인지하지 못한다는 점, 화면의 레이아웃이 변하거나 시선이 흐름이 복잡하면 오류가 발생하는 점이 발견되었다. 또한, 가로 형태의 내비게이션과 세로 형태 배열의 메뉴가 오류가 적었으며 버튼의 디자인은 같은 기능에 있어서 동일한 컬러인 것이 오류가 적었다. 연구 결과 고령자들이 선호하는 키오스크 UI 디자인은 다음과 같다. 첫째, 아웃라인 또는 솔리드 형태의 버튼이 권장된다. 둘째, 이미지와 텍스트가 결합된 버튼의 세로 결합 형태가 권장된다. 셋째, 화면 레이아웃에 있어서는 시선 흐름과 조작의 방향이 일관성이 있어야 하며, 메뉴 수와 안내 정보가 증가하는 것을 피해야 한다. 넷째, 페이지 내비게이션은 가로 형태가, 메뉴 배열은 세로 형태가 권장된다. 마지막으로 버튼은 동일한 기능을 수행하는 버튼은 동일한 컬러를 사용하는 것이 효율적이고, 서로 다른 기능인 경우 보색 관계의 컬러를 적용하는 것이 혼란을 줄일 수 있을 것으로 연구결과가 도출되었다.

• 디지털융복합연구
• /
• 제19권1호
• /
• pp.343-348
• /
• 2021

본 연구는 재사용 가능한 디자인 시스템 구출을 위한 프레임워크 제안을 위해 아토믹 디자인 시스템을 기반으로 블록을 구성하여 조합하는 방법에 대해 알아보았다. 그를 위해 디자인 시스템의 필요성과 스노우화이트, 스큐어모픽 디자인, 플랫디자인 및 머티리얼 디자인의 사례를 우선적으로 살펴보았다. 또 화학의 원리를 메타포로 사용하는 아토믹 디자인의 분자, 원자, 유기체, 템플릿 그리고 페이지를 문헌 연구를 통해 정의하였다. 새로운 프레임 워크를 구현하기 위해 인터페이스 인벤토리를 구성하고 그 중에서 폰트, 컬러, 이미지와 컨트롤 요소를 핵심 시각 요소로 추출하여 가이드라인을 정의하였으며 그를 바탕으로 분자 요소를 분류하고 원자로 구성할 수 있었다. 블록은 콘텐츠 인벤토리에서 가장 많이 사용되는 디자인 패턴을 기반으로 블록 형태고 구성되도록 하여 블록의 조합을 통해 시각적 그리드를 바탕으로 레이아웃을 구현하고 페이지를 디자인하도록 프레임워크를 구성하였다. 새로운 프레임워크는 블록의 재사용으로 팀의 일관성과 협업을 도우며 파일의 공유와 업데이트를 지원한다는 것에 본 논문의 의의가 있다.

• 지식경영연구
• /
• 제23권2호
• /
• pp.193-210
• /
• 2022

급속한 모바일 기술의 발전과 네트워크 속도 향상은 다양한 서비스 형태로 생활의 편의를 제공하고 있으며 모바일 쇼핑몰에서도 예외는 아니다. 빅데이터를 활용한 맞춤 추천, AI 기반의 특화된 개인화 서비스 등을 활용하여 기업들은 판매촉진에 큰 노력을 하고 있으나, 대다수의 모바일 쇼핑몰에서는 상품에 대한 정보를 담고 있는 상세페이지의 정보 구성은 동일한 레이아웃 형태로 제공되고 있다. 이러한 맥락에서 본 연구는 모바일 상품 상세페이지의 콘텐츠 배열 및 레이아웃이 소비자 성향에 맞게 제공되어야 한다고 판단하여, Higgins의 조절초점이론(Regulatory Focus Theory)을 바탕으로 소비자의 성향을 분류하여 두 가지 레이아웃 배열의 상품 상세페이지를 구성하여 제시하였다. 콘텐츠 레이아웃 배열이 F-shaped 패턴으로 제시되었을 때 정돈감(Organizedness)으로 정보가 인지되고, Z-shaped 패턴으로 제시되었을 때 생생함(Vividness)으로 정보가 인지되어 소비자의 성향에 따라 제품 태도와 구매 의도에 영향을 받는지에 대하여 알아보고자 하였다. 결과적으로 예방초점 성향의 소비자들은 콘텐츠 레이아웃 구성이 통일감 있고 정돈감(Organizedness) 있는 형태의 레이아웃 배열에서, 향상초점 성향의 소비자들은 생생함(Vividness)이 느껴지는 자유로운 레이아웃 배열로 제시되었을 때 제품 태도 및 구매 의도에 긍정적인 영향을 받는 것을 확인하였다.

• 정보처리학회논문지B
• /
• 제11B권1호
• /
• pp.35-44
• /
• 2004

작은 화면을 가진 이동 단말기에서 데스크탑 화면에 맞추어 제작된 웹 컨텐츠들을 브라우징 하는 것은 많은 어려움을 갖는다. 웹 페이지에는 이동 단말기용 브라우저의 제한된 기능으로 인해 표시할 수 없는 객체가 일부 포함되어 있는 경우도 있고, 브라우저에서 호환되지 않는 마크업 표준을 사용하여 브라우징 자체가 불가능할 수도 있다. 본 논문에서는 웹 페이지를 이동 단말기에 최적화된 형태로 변환할 수 있는 웹 클리핑 방식의 새로운 이동 인터넷 컨텐츠 적응 방법을 소개한다. 이 방법에서는 컨텐츠 제공자가 클립 편집기를 이용하여 설정한 클립 명세에 따라 원본 웹 문서가 자동으로 클리핑 되고 변환된다. 클립 편집기는 컨텐츠 제공자가 단일 클립, 그룹 클립, 다중 레벨 클립, 동적 클립을 설정하고, 문서의 레이아웃을 수정할 수 있도록 한다. 이렇게 설정된 클립 명세에 따라 원본 문서로부터 추출된 각 클립들은 먼저 중간 언어 형태의 문서로 변환되고, 이는 다시 이동 단말기를 위한 최종 마크업 문서로 변환된다. 또한 다양한 이미지 타입에 대한 변환기능을 제공한다.

• 전자공학회논문지CI
• /
• 제39권2호
• /
• pp.54-63
• /
• 2002

최근 들어 인터넷 접속을 위하여 웹 접근이 가능한 개인 장치들이 점점 더 이용 가능해 짐에 따라 PDA나 셀룰러 폰과 같은 휴대 장치로부터 인터넷에 접속하는 사용자들이 증가하고 있다. 그러나 웹 상의 대부분의 페이지들은 적어도 640×480의 해상도를 가지는 컬러 모니터의 데스크탑 컴퓨터에 디스플레이하기 위해 제작되어, 충분한 표현 능력을 가지고 있지 않은 휴대 장치들에 동일한 내용의 웹 컨텐츠를 다르게 표현해야 할 필요가 요구되고 있다. 따라서 웹 컨텐츠와 휴대 장치들간의 이러한 문제를 해결하기 위하여 다양한 웹 트랜스코딩 기술이 제안되고 있다. 본 논문에서는 semi-automatic 웹 트랜스코딩 방법을 사용하여 실시간 정보를 위한 웹 트랜스코딩 시스템(웹 프리즘)을 제안한다. 본 논문에서 사용한 semi-automatic 트랜스코딩 방법은 모바일 사용자들이 웹 페이지의 레이아웃이 빈번하게 바뀌지 않는 제한된 범위의 웹 페이지에 접근하기 위한 좋은 방법으로 제공되며, 또한 웹 프리즘을 데스크탑 PC에서 구현하여 실험한 결과 PDA에서 좋은 품질의 문서를 생성하였다.