아날로그 + 디지털 + 스톱워치 만들기 (CSS 중심)

 

아날로그+디지털+스톱워치 영상

 

라이트/다크모드 디자인

 

 

 

 

# 1 구상

---

 

 

과제의 기본 요구 사항

 

 

1. 실시간으로 초 단위로 시간이 업데이트되는 시계를 생성해야 합니다.
2. 1초마다 현재 시각으로 업데이트될 수 있도록 해야 합니다. (setInterval)
3. 형식은 ' 🕖 현재 시각은 00시 00분 00초입니다.' 로 작성해 주세요.
4. stop 버튼을 클릭하면, 시계가 정지해야 합니다. (clearInterval)
5. 정각이 되기까지 몇 분이 남았는지 표시하도록 해야 합니다.
6. 형식은 '정각까지 00분 남았습니다!'로 작성해 주세요.

   🔴 : 다른 방식으로 구현

   🟢 : 요구사항에 만족

   🔵 : 응용하여 구현

 

 

이번 과제는 요구사항에 잔디를 심었다!🍀

과제의 테마가 명확했던것도 그렇고, 간단한 과제라서 저기서 더 응용할 수가 없었던것도 있다.

 

그래도 단순히 디지털 시계만 구현하는거는 뭔가 재미없다고 생각했고

아날로그 시계도 같이 만들어보자는 생각이 들었다. (디자인하면 아날로그 시계가 더 이쁘기 때문)

 

살면서 아날로그 시계에 대한 관심이 없었다보니, 멋있는 디자인을 본적이 없어서

오늘도 역시나 디자인 레퍼런스 + 강의 영상을 찾아보았고

유튜브 아날로그 시계 코딩 강의 영상

 

전체적인 틀은 다 똑같기때문에 아무거나 들어가서 강의영상을 시청했다.

 

시계바늘이 돌아가는 원리는 현재 시간 정보를 실시간으로 받고, 시 , 분, 초를 각도랑 연산하는 구조처럼 보였다.

수학은 잘 못하지만, 코딩은 오픈북이기 때문에 도분초 수식은 쉽게 정보를 얻을 수 있었다 ..

 

항상 과제 한번하는데 CSS에 너무 고집을 부려서 기능구현을 다 하지못하고

새벽늦게 자곤했기 때문에, 조교님의 조언을 듣고 간단한 마크업 후, 기능구현부터 시작했다.

 

 

 

 

 

 

 

# 2 기능 구현 시작

---

 

<div class="container">
    <div class="clock">
        <label style="--i: 1"><span>1</span></label>
        <label style="--i: 2"><span>2</span></label>
        <label style="--i: 3"><span>3</span></label>
        <label style="--i: 4"><span>4</span></label>
        <label style="--i: 5"><span>5</span></label>
        <label style="--i: 6"><span>6</span></label>
        <label style="--i: 7"><span>7</span></label>
        <label style="--i: 8"><span>8</span></label>
        <label style="--i: 9"><span>9</span></label>
        <label style="--i: 10"><span>10</span></label>
        <label style="--i: 11"><span>11</span></label>
        <label style="--i: 12"><span>12</span></label>
    </div>

    <div class="indicator">
        <span class="hand hour"></span>
        <span class="hand min"></span>
        <span class="hand sec"></span>
    </div>
</div>
<div class="mode">
    <div class="mode-switch">Dark Mode</div>
    <div class="mode-stop">Start</div>
</div>

<div class="on-time">
    <div>Current Time : <span class="time-digital-now"></span> </div>
    <div>
        <span class="time-left-min"></span>min left, &nbsp;&nbsp;&nbsp;
        until <span class="time-left-hour"></span>o'clock
    </div>
</div>

.clock label {
    position: absolute;
    inset: 20px;
    text-align: center;
    transform: rotate(calc(var(--i) * (360deg / 12)));
    color: var(--black-color);
}

.clock label span {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 200;
    text-align: center;
    color: var(--primary-color);
    transform: rotate(calc(var(--i) * (-360deg / 12)));
}

.container {
    position: relative;
}

/* .. 이하 생략 .. */

const updateTime = () => {
 	// 시간 정보를 date에 받아옴
	let date = new Date();
	
	const seconds = date.getSeconds(); // 초
	const minutes = date.getMinutes(); // 분
	const hours = date.getHours(); // 시
	
    // 초를 각도 단위로 변환
	let secToDeg = (seconds / 60) * 360;
    
    // 분을 각도 단위로 변환
	let minToDeg = (minutes / 60) * 360 + (seconds / 60) * 6;
    
    // 시를 각도 단위로 변환
	let hourToDeg = (hours / 12) * 360 + (minutes / 60) * 30;
	
    // 시계바늘에 연산된 각도를 반영
	secHand.style.transform = `rotate(${secToDeg}deg)`;
	minHand.style.transform = `rotate(${minToDeg}deg)`;
	hourHand.style.transform = `rotate(${hourToDeg}deg)`;
};

 

 

 

적당히 디자인 틀만 잡아놓은 모습 (의욕이 안난다)

 

 

 

 

 

 

 

정말 디자인부터 안하니까 만들 의욕이 안나는건 병인것 같다.

그래도 아날로그 시계의 로직은 완성했으니 요구사항인 디지털 시계도 스크립트를 짜보았다.

 

timeNow.textContent = `${hours}h ${minutes}m ${seconds}s`;
timeLeftHour.textContent = `${hours + 1}`;
timeLeftMin.textContent = `${60 - minutes}`;

 

말그대로 위에 미리 받아온 현재시각 정보를 템플릿 리터럴로 받아오기만 하면 된다 (매우 간단)

 

 

 

 

드디어 디자인 시작.

간단하게 제작할 예정이기 때문에 전체에 트랜지션을 걸어주자 (시계바늘 움직임부터 라이트/다크모드 전환도 한꺼번에 되서 편함)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    transition: all 1s ease-out;
}

 

 

 

 

:root와 body태그에 미리 뽑아놓은 컬러코드를 지정해주었다.

라이트/다크모드로 토글하는데 유용한 방식이다.

 

:root {
    --primary-color: #242526;
    --white-color: #fff;
    --black-color: #18191a;
    --red-color: #e74c3c;
    --shadow-color: #0000001a;
    --btn-hover:#a0392e;
    --back-drop-color: #ffffff00;
    --bg-img: url('https://getwallpapers.com/wallpaper/full/a/1/e/1471683-best-3d-water-wallpaper-3840x2160.jpg'); 
}

body.dark {
    --primary-color: #f6f7fb;
    --white-color: #18191a;
    --black-color: #fff;
    --red-color: #00ff55;
    --shadow-color: #00ff1e85;
    --btn-hover: #53fc8b;
    --back-drop-color: #ffffff00;
    --bg-img: url('https://getwallpapers.com/wallpaper/full/e/0/2/82268.jpg'); 
}

 

원리는 :root에 '--primary-color: #fff;' 형식으로 라이트모드 전용 컬러코드를 CSS 변수에 할당한다.

그리고 컬러코드를 할당해둔 변수를 디자인에 사용하면 된다.

 

.hand.sec {
    transform: rotate(0deg);
    background: var(--red-color);
    box-shadow: 0 0 5px 5px var(--shadow-color); /* 변수 사용 */
    z-index: 555;
}

.hand.min {
    height: 130px;
    width: 4px;
    transform: rotate(0deg);
    background: var(--black-color); /* 변수 사용 */
    box-shadow: 0 15px 5px 5px rgba(0, 0, 0, 0.09);
    z-index: 666;
}

.hand.hour {
    height: 110px;
    width: 6px;
    transform: rotate(0deg);
    background: var(--black-color /* 변수 사용 */
    box-shadow: 0 15px 3px 3px rgba(0, 0, 0, 0.09);
    z-index: 777;
}

/* 이하 생략 */

 

이렇게 지정해두면 기본값은 :root의 컬러코드를 받아온다. (라이트 모드)

body.dark에도 :root에 지정해둔 같은 변수명에 다크모드 전용 컬러코드를 미리 넣어두고

토글 버튼 스크립트를 짜야한다.

if (localStorage.getItem('mode') === 'Dark Mode') {
	body.classList.add('dark');
	modeSwitch.textContent = 'Light Mode';
}

modeSwitch.addEventListener('click', () => {
	body.classList.toggle('dark');

	// .dark를 포함하고있으면 true, 없으면 false
	const isDarkMode = body.classList.contains('dark');

	// .dark가 true면 버튼텍스트가 "Light Mode", false면 "Dark Mode"
	modeSwitch.textContent = isDarkMode ? 'Light Mode' : 'Dark Mode';

	// .dark가 true면 로컬스토리지 value가 "Dark Mode", false면 "Light Mode"
	localStorage.setItem('mode', isDarkMode ? 'Dark Mode' : 'Light Mode');
});

 

이렇게하면 토글버튼을 누를때마다 각 클래스에 지정해둔 변수의 할당값에 따라 컬러가 바뀌게 된다.

 

 

 

 

 

 

##  어려웠던 점, 아쉬웠던 점

 

해결하는데 생각하는 시간이 오래걸렸던 버그(?)는

초침이 1회전이 끝나고나면 359도에서 0도로 확 되돌아가는 현상이었다.

(트랜지션을 걸어놓아서 더 도드라져보였다.)

 

말로 전달하려니 뭔소리지 싶겠지만 영상을 보면 바로 이해가 된다.

 

 

뭔가 역동적이긴한데 멋있는것 같기도하고..

수정을 안하려니 정상적인 아날로그 시계의 움직임은 아닌 것 같아서 어떻게 수정해볼까 고민에 빠졌다.

 

 

 

내가짠코드 특

 

 

 

그런데 전날도 새벽까지 공부하느라 뇌의 컨디션이 좋지 않았고 ㅠㅠ

도저히 방법이 떠오르지 않아서 조교님께 도움을 청해보았다.

(물음표 살인마라 항상 죄송합니다 조교님 ㅋㅋ)

 

 

 

대화내용 캡쳐본 그대로 조교님의 코드를 적용해보았고 정상적으로 작동하는 것 까진 확인했지만..

내 성격상 코드의 예외상황에 완벽하게 대응하고 싶었고

브라우저를 계속 켜두면 변수의 값이 무한히 증가한다는 문제점이 마음속에 계속 걸렸다.

 

만약, 실제 상용 서비스에 적용한다고 가정하면,

변수를 선언한 순간부터 메모리를 잡아먹음 > 값이 계속해서 할당됨 > 메모리에 부담이 되지않을까?

까지 생각이 미쳤고

 

그리하여 다른 좋은방법이 없을까 2시간 정도 생각을 해본것 같다.

생각에 생각을 거듭한 결론은,

 

초침이 되돌아가는 현상이 도드라져보이는 이유가 

'트랜지션'의 영향으로 바늘의 각도에 따른 움직임이 다 연결되어 보이기 때문이었다.

각도의 범위는 0도에서 359도까지 이므로,

 

0도가 되자마자 잠깐 트랜지션을 없애면 되지않을까?

라는 발상이 떠올랐고 바로 적용해보았다.

 

// 초침 돌아가는 버그 수정
if (secToDeg === 0) {
    secHand.style.transition = 'none';
    setTimeout(() => {
	secHand.style.transition = 'all 1s ease-out';
    }, 1000);
}

 

 

 

 

 

약간 움직임은 어설프지만 이 이상 좋은 방법은 다음날이 되어도 떠오르지 않았고,,

디자인은 멋있으니 한잔해~ 라는 마인드로

 

이대로 만족하기로 하고 제출해버렸다.

 

 

 

## GITHUB | CODE

Clock

 

GitHub - moriroKim/Clock