전체 화면으로 현재 시간 보여주는 웹 시계 사이트 Bonfire Clock
 |
| Bonfire Clock 웹 시계 |
🔗사이트 링크: bonfire-clock.web.app
현재 시각을 보여주는 시계 사이트를 개설했습니다. 웹 브라우저에서 동작하는 초 단위 실시간 시계입니다. 웹사이트에서 바로 사용할 수 있고 전체 화면을 지원하니 따로 설치 과정이 필요하지 않습니다.
특별한 기능이라 할 것은 없지만, 보기에 깔끔하며 사용하기 편한 UI(User Interface)를 생각하며 제작했습니다. 하지만.. 예쁜 시계 사이트가 있으면 좋겠다는 생각도 있었습니다.
사이트 이름은 'Bonfire Clock(반파이어 클락)'이라고 정했습니다.🔥 모닥불을 보며 시간의 흐름을 관찰하듯 시간이 흐르는 것에 집중하고 여유롭게 분위기를 즐기기를 바라는 마음으로 지었습니다.
Bonfire Clock의 특징은 다음과 같습니다.
- 미니멀리즘 디자인
- 다크모드
- 컬러 배경화면
- 전체화면
- 반응형 디자인
미니멀리즘 디자인
 |
| Bonfire Clock 사이트 기본 화면 |
실용성을 위해 실질적으로 필요한 요소인 시간만 보이도록 하고 버튼 GUI(Graphic User Interface)는 감추었습니다. 사이트에 접속하면 지저분한 요소 없이 시계만 볼 수 있습니다.
 | |
|
마우스를 움직이면 숨겨져 있던 GUI가 나타납니다. 좌측 상단에는 사이트 로고가 있고 시계 옆에는 버튼 그룹이 있습니다. 마우스를 움직이지 않고 몇 초 지나면 GUI 요소가 다시 숨겨집니다. 이 때 마우스 커서도 같이 숨겨지도록 해서 시계 화면에 거슬리지 않도록 만들었습니다.
 |
| Bonfire Clock 사이트 GUI 버튼 |
버튼 그룹 안의 요소는 순서대로 다크 모드, 컬러 배경화면, 전체 화면입니다. 투명도가 기본으로 들어가 있고, 마우스 커서를 버튼 위에 가져가면 투명도를 제거해서 현재 어떤 버튼이 선택되고 있는지 잘 보이도록 만들었습니다.
다크 모드
 | |
|
다크 모드 버튼을 누르면 기본 색상을 반전 시킬 수 있습니다. 밤에도 컴퓨터 화면에 띄워 놓기 좋겠죠?
컬러 배경화면
 |
| Bonfire Clock 사이트 컬러 배경화면 |
컬러 배경화면 버튼을 클릭하면 색상 있는 배경화면을 만들 수 있습니다. 색상을 마음대로 지정할 수는 없고, 랜덤 컬러가 지정됩니다. 좋아하는 색깔이 나올 때까지 주사위를 굴려보세요.😎
전체 화면
전체 화면 버튼을 누르면 브라우저의 탭, 주소창, 북마크 바 등과 작업표시줄도 보이지 않게 전체 화면 모드를 사용할 수 있습니다.
반응형 디자인
 | |
|
스마트폰, 태블릿 PC 등 다양한 모바일 환경과 디스플레이 환경에서 사용할 수 있게 반응형으로 제작했습니다. 스마트폰처럼 작은 화면에서는 버튼 그룹이 아래로 내려가서 가로 정렬로 바뀝니다. 아이패드나 갤럭시 탭 등 태블릿 PC를 이용해 탁상용으로 쓰기도 좋을 것 같습니다.
Bonfire Clock 사이트는 계속 업데이트가 있을 예정이라 새로 생기는 업데이트 내용도 다음 콘텐츠에서 공유하겠습니다.
댓글
댓글 쓰기