프로젝트 개요
간단한 웹 시계 사이트를 제작해 배포했습니다. 웹앱을 만들면서 어떤 방식으로 UI(User Interface)디자인을 진행했는지 정리했습니다.
사이트 이름은 'Bonfire Clock(반파이어 클락)'입니다. 모닥불을 보며 시간의 흐름을 관찰하듯 시간이 흐르는 것에 집중하고 여유롭게 분위기를 즐길 수 있도록 하고자 했습니다. 아래 링크를 통해 경험해 볼 수 있습니다.
이 프로젝트는 기존에 있는 여러 시계 웹앱의 일반적인 UI를 개선해보고자 시작한 프로젝트입니다. 필요한 기능에만 온전히 집중할 수 있도록 하는 UI 설계가 프로젝트 목표였습니다.
기본 GUI 체계
메인 콘텐츠에 집중할 수 있는 환경을 구축하기 위해서, 사이트에 접속하면 접하게 되는 기본 화면은 실질적으로 필요한 요소인 시계만 보이도록 하고 기타 레이아웃은 사용자의 필요에 따라 선택적으로 구성할 수 있게 만들었습니다.
기본 환경에서는 시계에만 집중할 수 있도록 기타 컨트롤이 가능한 부분은 사용자가 필요로 할 때만 드러낼 수 있도록 하는 UI가 필요했습니다. 마우스를 움직이면 숨겨져 있던 GUI(Graphic User Interface)가 나타나는 체계를 통해 요구 사항을 해결했습니다.
좌측 상단에는 사이트 로고가 있고 시계 아래에는 버튼 그룹이 있습니다. 로고는 새로고침 기능을 하고 나중에 다른 웹앱과의 허브가 되는 페이지로 연결될 수 있도록 확장성을 고려해 만들어두었습니다.
마우스를 움직이지 않고 몇 초 지나면 로고와 버튼은 다시 숨겨집니다. 이 때 마우스 커서도 같이 숨겨지도록 해서 시계 화면에 거슬리지 않도록 만들었습니다.
버튼 그룹 안의 각 요소는 순서대로 날짜, 다크 모드, 컬러 배경화면, 컬러 배경화면 자동 변경, 전체 화면, 날씨입니다.
버튼에는 투명도가 기본으로 들어가 있고, 마우스 커서를 호버링하면 투명도를 제거해서 현재 어떤 버튼이 선택되고 있는지 인식할 수 있도록 만들었습니다.
.png%3Ftable%3Dblock%26id%3Dd70ab72d-4dc6-4050-b2bb-64c4b4173249%26cache%3Dv2&w=3840&q=75)
사용자의 필요에 따라 날짜와 날씨 버튼을 눌러 구성요소를 선택 사항으로 추가할 수 있습니다.
전환 효과
다크 모드 버튼을 누르면 기본 색상을 반전시키고, 컬러 모드 버튼을 누르면 랜덤 색상으로 컬러 배경화면을 만들 수 있습니다. 이 때 화면의 전체에 걸쳐 나타나는 모습이 갑작스럽게 변화하면 사용자가 놀랄 수 있으므로 트랜지션 효과를 부여해 배경 색상 테마가 점진적으로 변화하도록 만들었습니다.
참여자
디자인, 프로그래밍
Share article