[논문]인터페이스 구조에 따른 프로토타입의 반응형 웹

장승영

doi:10.13067/jkiecs.2018.13.3.609

인터페이스 구조에 따른 프로토타입의 반응형 웹
Responsive Web of Prototype based on Implementation Structure 원문보기

한국전자통신학회 논문지 = The Journal of the Korea Institute of Electronic Communication Sciences, v.13 no.3, 2018년, pp.609 - 616

장승영 (전남과학대학교정보전산원)

초록
AI-Helper

본 논문은 인터페이스 구조를 근거로 프로토콜타입의 웹 사이트 설계 방식에 대한 반응형 웹의 설계에 필요한 기술들을 두고 서술하게 되었다. 반응형 설계는 프로토콜 타입의 요구사항을 인터페이스 기반사항에 근거로 분석하여 개발과정에 적용하는 프로세서를 의미한다. 개발에 있어서 우선원칙에 의한 설계방식을 수립하고 디자인공식에 의한 유연성과 가변성을 설정하여 사용자중심의 제1원칙과 제2원칙으로 나누어 인터페이스 구조로 정립해 나갔다. 그리고 압축기술을 논의를 통해 비동기적 스크립트를 결합방식의 방법을 모색하여 웹의 프로토콜 타입에 맞게 확장시킬 수 있는 방법을 찾게 되었다. 오늘날 웹 사이트나 웹 애플리케이션에 대한 필요성은 장치에 관계없이 적응하고 접근할 수 있어야 한다. 이러한 해결방안으로 반응형 웹 사이트 설계방식에서 찾게 되었으며 반응형 웹 사이트 설계방식에 대한 인터페이스 구조와 이를 근거로 한 프로토콜 타입의 웹 사이트 설계방식에 대한 중요기법들을 마련하게 되었다.

Abstract ▼ AI-Helper

The purpose of this study is to describe the technologies necessary to design responsive web with the use of the responsive website based on implementation structure as a prototype. Responsive design means the process of analyzing prototype requirements on the basis of implementation and applying the analysis results to development. The design method based on the principle of priority in development was established, and then flexibility and variability through design formula were set up. After that, the user-oriented primary principle and secondary principle were drawn to establish implementation structure. In the way of discussing compression technologies, a method of combination was searched for, and then a method of asynchronous script scalability in line with a web prototype was found. Today, a website or a web application needs to be adopted and accessed regardless of device types. As a solution, a responsive website design method was found. Important technologies for the implementation structure for the responsive website design method and its relevant prototype website were came up with.

주제어

AI 본문요약
AI-Helper

* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.

문제 정의

본 논문은 다양한 장치에서 사용자 경험에 영향을 미치지 않은 웹 사이트를 개발하기 위한 목적으로 반응형 웹 사이트 설계방식에 대한 인터페이스 구조와 이를 근거로 한 프로토콜 타입의 웹 사이트 설계방식에 대한 반응형 웹의 개발에 필요한 중요기법들을 논의하고자 한다.
웹 디자인에 설계의 목표는 사용자 경험과 콘텐츠에 영향을 최대한 살려 다양한 기기에 웹 페이지를 제공하는 것에 있다. 웹 콘텐츠들의 자원 등을 확대·축소하지 않고 더 나은 사용자 환경에서 완벽하게 렌더링할 수 있는 구조로 반응형 웹을 구현할 수 있었다.
이 논문의 주요 목적은 반응형 웹의 인터페이스 구조에 대해 논리를 검토하고 연계하여 프로토타입(Pro totype)의 반응형 웹을 구현하는데 있다. 또한 인터페이스 구조에 적합한 개발방식으로 웹 페이지를 디자인하여 융통성 있고 반응성 있게 구현하는 방식에 초점을 두었다.

제안 방법

구현에 있어 프로그램 툴로 Dreanweaver를 사용하였다. Drean weaver버전 CS를 사용하여 Dreanweaver에서 자동으로 지원하는 웹 플랫폼을 활용 해 새로운 HTML5프로젝트을 생성하여 구현을 시작했다. 그림 4와 같이 웹 사이트의 기본폴더 구조로 자동생성 되게 된다.
모바일의 화면너비는 데스크 탑 모드의 너비에 비해 평균 70~80% 정도 적기 때문에 데스크 탑 모드나 태블릿 모드처럼 화면 구조상 레이아웃을 구성할 수 없다. 그래서 가로 방향과 세로 방향 모두를 계층 열 방식으로 표현하여 설계한다. 레이아웃 영역을 1, 2, 3, 4번 모두 수직 순서로 정렬하고 여백 모두를 제거하여 전체 레이아웃의 시각적 확보에 중점을 두었다.
이 논문의 주요 목적은 반응형 웹의 인터페이스 구조에 대해 논리를 검토하고 연계하여 프로토타입(Pro totype)의 반응형 웹을 구현하는데 있다. 또한 인터페이스 구조에 적합한 개발방식으로 웹 페이지를 디자인하여 융통성 있고 반응성 있게 구현하는 방식에 초점을 두었다.
HTTP캐싱은 웹 페이지의 응답시간을 개선시킬 수 있는 또 다른 사용자방식에 속한다. 사용자의 빠른 응답을 위한 방법으로 모든 최신 브라우저를 통해 보편적 채택방식을 적용한다. 일반적으로 서버로드 감소를 줄이기 위해 웹 자원을 사용자 자신에게 복사 해 저장하고 필요할 때 서버를 요청하지 않고 저장한 자원을 검색하여 활용할 수 있게 한다.
전체 요건을 이행한 후 웹 페이지를 테스트 해 보았다. 웹 페이지의 일반적 테스트는 최신 브라우저를 공급업체별 브라우징을 각 모드 별 화면크기에 따라 실시하여 그 결과 값을 얻게 되었다.
이 연구에서는 반응형 웹 페이지를 설계하는 디자인 요소 및 방식, 구현기법, 설계구현에 대한 여러 논의를 통해 구현하게 되었다.
“대응적 설계적용 → 최신 HTML5및 CSS5 기술적용 → 디자인(레이아웃) 사용성 원칙적용 → 모든 디바이스지원 구성설계”순차로 분석을 실행한다. 이러한 요구사항의 분석은 본 논문에서 제시한 기술적인 요소들을 근거로 인터페이스에 적합한 사용자 중심의 구조로 적용되어 레이아웃 설계에 반영한다.
이처럼 다양한 콘텐츠 영역을 화면 해상도에 관계 없이 설계를 구현하여 모든 컨테이너가 단일 열에 형식으로 웹을 연출하는 레이아웃의 구성을 적용했다. 태블릿 모드, 모바일 모드 두 모드는 메뉴항목을 화면의 효율성을 감안하여 기본적으로 영역 내에 숨겨 클릭하거나 터치하는 이벤트가 발생할 때 비로소 확장을 갖게 했다.
전체 요건을 이행한 후 웹 페이지를 테스트 해 보았다. 웹 페이지의 일반적 테스트는 최신 브라우저를 공급업체별 브라우징을 각 모드 별 화면크기에 따라 실시하여 그 결과 값을 얻게 되었다.
태블릿 모드는 그림 2와 같이 평균해상도를 600픽셀에서 1024픽셀까지 정하고 데스크 탑 모드와 달리 세로와 가로의 구분을 두어 레이아웃을 설계한다. 세로 모드에서는 동적 웹 페이지 영역을 조정하여 1, 2, 3, 4번 전체 영역을 지원할 수 있도록 설계한다.
해상도 기준조건에 따라 미디어타입과 같이 디바이스의 특성을 이용해 스타일 시트의 적용 범위를 제한하여 기준 폭의 조건 기본식으로 구성된다. 화면의 최소너비가 320픽셀이고 최대 너비가 600픽셀의 화면구성은 모바일 및 소형 태블릿 모드범위로 적용하고 600픽셀부터 1024픽셀은 데스크 탑 모드로 지정해 각 디바이스에 대한 유연성을 갖게 했다.

데이터처리

”라고 이야기하게 된다. 구현에 있어 프로그램 툴로 Dreanweaver를 사용하였다. Drean weaver버전 CS를 사용하여 Dreanweaver에서 자동으로 지원하는 웹 플랫폼을 활용 해 새로운 HTML5프로젝트을 생성하여 구현을 시작했다.

성능/효과

이는 웹 사이트의 화면크기, 플랫폼 및 방향에 기초하여 사용자의 행동과 환경에 대응할 수 있도록 단순화시킨 인터페이스 설계방식을 의미한다. 또한 기기마다 다른 버전이 생성되는 기존의 설계 접근방식 대신 대응설계 접근방식을 선택함으로써 응답성이 뛰어난 웹 사이트를 구조로 접근성을 최적화시킬 수 있는 구현방식임을 내세우고 있다. 접근성은 결국 사용자 경험을 향상시키고 사용자가 찾고자 하는 콘텐츠를 쉽게 찾을 수 있도록 상호 연관된 방식을 보여줄 수 있게 되었다는 점에서 주목한다.
웹 콘텐츠들의 자원 등을 확대·축소하지 않고 더 나은 사용자 환경에서 완벽하게 렌더링할 수 있는 구조로 반응형 웹을 구현할 수 있었다. 또한 반응형 웹의 구현은 다양한 버전의 웹 사이트를 만드는 작업량의 부하를 최대한 줄이며 개발비용과 유지하기 위한 추가적인 비용도 감소시킬 수 있는 이점뿐만 아니라 추가적인 한계 값을 피하는 데 도움이 되었다.
셋째, “Media Query”는 화면의 공간(여백)을 이용할 수 있는 공간적 외양방식의 요소다.
웹 콘텐츠들의 자원 등을 확대·축소하지 않고 더 나은 사용자 환경에서 완벽하게 렌더링할 수 있는 구조로 반응형 웹을 구현할 수 있었다.
첫째, 반응형 설계에서 중요사항은 가변적선언의 우선원칙에 근간을 둔다. 유동적 구조인 Flexible grid 레이아웃 방식은 레이아웃의 비율을 콘텐츠 영역 내측에서 가변적 비율로 선언하게 된다.

질의응답

핵심어	질문	논문에서 추출한 답변
	디지털문화란?	모바일 성장세는 단순히 통화의 목적이 아닌 커뮤니케이션을 넘어선 ‘문화 인터페이스(Manovich, 2001)’의 기능을 수행하고 있음을 의미한다. 디지털문화의 의미란 “전통 미디어(책, 영화, 텔레비전 등)와 마찬가지로 문화형식을 접하는 새로운 ‘문화적 플랫폼’으로 창출 해 나가고 있다.”고 정의를 내린다[3].
	반응형 웹 페이지의 장점은 무엇인가?	반응적인 웹 디자인 원리는 World Wide Web의 새로운 동향 중 하나이며 현재 웹 페이지에 적절한 해결책을 제공할 수 있는 많은 이점과 기회를 가지고 있다. 웹 페이지의 유지관리에 대한 용이성, 저비용 및 작업부하 감소 등 여러 장점이 있지만 반응형 웹 페이지 설계 및 구현하기에 지루한 원칙들이 많다. 또한 반응형 웹은 배너나 팝업창이 필요인 콘텐츠를 제공하는 데 있어 제약이 있어 필요한 목표를 파악하는 것이 우선시해야 한다는 점들을 들 수 있다.
	반응형 웹 사이트 설계방식이 해결할 수 있는 기존 웹사이트 방식의 단점은?	일련의 문제과정을 통해서 해상도와 화면크기를 미리 결정하는 모든 기기의 웹 사이트를 각기 다른 설계방식으로 일관성 있게 설계하기란 개발자 입장에서 매우 어렵다. 오늘날 웹 사이트나 웹 애플리케이션의 필요성은 장치에 관계없이 적응하고 접근할 수 있어야 한다. 이러한 해결안으로 반응형 웹 사이트 설계방식에서 찾게 된다.

참고문헌 (13)

K. Developedia, Korea's 4TH Industrial Revolution, HansMedia, 2017.
Cisco. VNI, Visual Networking Index Global Mobile Data Traffic Forecast for 2013 to 2018, Cisco(R), 2014.
J. Lee, Digital culture, Communication Books, 2013.
G. Byun, "The Culture Marketing : An Expl oratory Approach to Its Concept and Dom ain," The j. of Woman & Management, vol. 3, no. 2, 2011, pp. 71-83.
B. Martin, Global Digital Future in Focus 2018, Cisco(R), 2017.
E. Marcotte, Responsive Web Design, alistapart, 2010, URL:http://alistapart.com/article/responsive-web-design.
G. Kim, "Design and Implementation of Ada ptive Interaction-based Video Syllabus," jkiecs. vol. 9, no. 9, 2014, pp. 991-998.
H. Sim, "The Developement of Smart TV and Smart Home Platform based on HTML 5," J. of the Korea Institute of Electronic Communication Sciences, vol. 12, no. 4, 2017, pp. 663-670.
J. Seo, C. Kim, "Design and Implementation of Web Contents Management System base d on RIA," J. of the Korea Institute of Electronic Communication Sciences, vol. 10, no. 10, 2015, pp. 1109-1114.

원문보기 상세보기
S. Hay, There is no Mobile Web, The haystack, 2011, URL: http://www.the-haystack.com/2011/01/07/.
S. Krug, Don't Make Me Think: A Common Sense Approach to Web Usability, New Riders Publishing, 2014.
J. Seo, "Implementation of Mobile Social Network System for Shared Contents of Public Service," J. of the Korea Institute of Electronic Communication Sciences, vol. 9, no. 9, 2014, pp. 1051-1056.

원문보기 상세보기
S. Sounders, High Performance Web Sites : Essential Knowledge for Front-End Engineers, ICT(R), 2007.

표제어: PCR

동의어: Packet Collision Rate

용어 설명 출처 목록 (6)

용어 설명: PCR은 세균 특이성이 있는 primer를 이용하여 적은 수의 세균이 있을지라도 쉽게 검출할 수 있는 유용한 방법이며, 이를 이용하여 구강 내 치면세균막이나 타액에서 직접 세균을 검출할 수 있게 되었다[8].

내보내기 구분	파일저장 인쇄 메일전송
구성항목	기본정보 상세정보 관리번호, 논문명, 저널/프로시딩명, 저자 , 발행년, 권, 호, 시작페이지, 끝페이지, 발행기관 관리번호, 논문명, 대등논문명, 저자 , 저널/프로시딩명, 발행기관, 발행년, 발행언어, 권, 호, 시작페이지, 끝페이지, ISBN, ISSN, 주제분야, 키워드, 초록(한글), 초록(영문), 저자(소속기관)
저장형식	Text(ASCII format) Excel format RefWorks Direct Export RIS format (for Reference Manager, ProCite, EndNote), Scholar's Aids, Mendeley
메일정보	받는사람 (필수) @ 보내는사람 (선택) @ 제목 내용 KISTI 검색결과 이메일 서비스
안내	총 건의 자료가 검색되었습니다. 다운받으실 자료의 인덱스를 입력하세요. (1-10,000) 검색결과의 순서대로 최대 10,000건 까지 다운로드가 가능합니다. 데이타가 많을 경우 속도가 느려질 수 있습니다.(최대 2~3분 소요) 다운로드 파일은 UTF-8 형태로 저장됩니다. 파일의 내용이 제대로 보이지 않을실 때는 웹브라우저 상단의 보기 -> 인코딩 -> 자동선택 여부를 확인하십시오. ~ Text(ASCII format) Excel format

연합인증