earticle

영어

Background Recently, Responsive Web is being used to ensure that the resolution and layout of a variety of devices are converted and optimized in a wide variety of devices. Research on the composition of the grid is needed to coordinate and visualize the elements of these variable layouts in the responsive web. Methods In the design of the responsive Web Grid, we wanted to propose a way to design a visual center in order to visualize the layout of the layout elements. We looked at the types and patterns of the grid and, then established the relationship between the theoretical visual centers and the actual visual center, and set the formula to derive the visual center coordinates. Based on the set formulas, we calculated the coordinate values of the actual visual centers of the web sites according to the conversion times of Media Query, and compared them to see how well the final values were produced in the theoretical visual center. Result The actual visual centers of websites compared to the above were not consistent with the theoretical visual centres that should be located in the upper left-hand corner. Thus, deigning a reponsive web site to the smallest of the values will be designed to match the visual center of visual perception theory, which will satisfy the user's gaze and attention. Conclusion This study suggests how to apply the principle of visual center to this layout in designing Responsive Web design and by doing so, it will be possible to design an interface that guides the user's gaze correctly and does not cause confusion.

한국어

연구배경 최근 다양한 디바이스의 스크린 환경에서 해상도 및 레이아웃 등이 유동적으로 변환되어 최적화될 수 있도록 제작하는 반응형 웹이 사용되고 있다. 반응형 웹에서 이러한 가변적 레이아웃의 요소들을 조화롭게 시각화하기 위해서는 그리드의 체계적 구성에 대한 연구가 필요하다. 연구방법 반응형 웹의 그리드 설계시에 레이아웃 요소를 조화롭게 시각화시키기 위해서 시각 중심을 고려하여 디자인할 수 있는 방법을 제시하고자 하였다. 먼저 그리드의 유형과 패턴에 대해 살펴본 후, 이론적 시각 중심과 실제 시각 중심에 대한 관계를 정립하여 반응형 웹에서 시각 중심을 도출할 수 있는 수식을 설정하였다. 설정된 수식을 바탕으로 반응형으로 제작된 웹사이트들의 실제 중심점의 좌표값을 미디어 쿼리의 변환 시점별로 도출하였다. 그 결괏값이 이론적 시각 중심점과 비교하여 얼마나 적합하게 제작이 되었는지를 알아보았다. 연구결과 비교한 웹 사이트들의 실제 시각 중심점들은 왼쪽 상단으로 위치해야 한다는 이론적 시각 중심점들과 일치되지 않았다. 그래서 그 차이 값이 가장 작도록 반응형 웹을 구축하면 시지각 이론의 시각 중심점에 맞게 설계된 것으로 볼 수 있고 이렇게 하면 사용자의 시선과 주목성을 만족할 수 있을 것이다. 결론 본 연구는 반응형 웹 디자인 설계시 이러한 레이아웃에 시각 중심점의 원리를 적용하는 방법을 제시함으로써 사용자의 시선을 올바르게 유도하여 혼돈을 주지 않는 인터페이스 설계가 가능할 것이다.