SUZ!E

Twenty Four

오늘 내가 얼마나 많은 시간동안 공부를 했지?
내가 집중을 잘 하는 시간대는 언제일까?
이런 질문이 든다면, 타이머 앱인 Twenty Four을 사용해보세요.
오늘 하루 어떤 시간대에 얼마 동안 집중했는지 알 수 있답니다.

Go to demo & Github repo

Design

Color

Twenty Four의 프라이 머리 컬러는 남색입니다. 그렇기 때문에 타이머 앱의 화면을 계속해서 띄워두어도 눈이 피곤하지 않습니다. 중요한 타이머 부분은 눈에 잘 띄일 수 있도록 프라이머리 컬러와 대조되는 흰색입니다. 시간이 기록되는 박스의 색은 흰색과 남색과도 잘 어울리는 연한 하늘색입니다.

더 나은 UI를 위하여

어떤 디자인과 색의 조합이 사용자가 사용할 때 편안함을 느낄까요? Twenty Four를 기획하고 디자인하며 가장 고민했던 부분은 어떤 색조합, 그리고 어떤 UI가 타이머 앱으로써 적합할지였습니다.

첫번째로는 색 조합에 대해 고민했습니다. 하루 동안 계속해서 확인해야하는 앱인만큼 어두운 색에 집중하자는 생각으로 컨텐츠 박스 색은 opacity로만 조절했습니다. 그러자 컨텐츠 내용이 한눈에 들어오지 않는다는 문제점이 생겼습니다. 그래서 시간을 기록하는 컨텐츠 리스트를 덮는 박스를 만들어 지금의 앱을 완성했습니다.

두번째로는 시간 기록을 할때에 카테고리를 작성하는 UI에 대해 고민했었습니다. 실제로 사용자가 (제가) 사용해보니 Todo list에도 적어놓은 일을 시간을 재기 위한 타이머앱에 기록하는것은 번거롭게 느껴졌습니다. 그래서 매번 무슨일을 할 것인지를 작성하는 부분은 없애고 대신 오늘 하루 얼마나 많은 시간동안 집중 했는지를 알려주는 전체 시간을 하단 부분에 디스플레이 했습니다.

더 나은 UI를 위한 고민

얼마나 많은 시간동안 집중 했을까?

Twenty Four은 언제부터 언제까지 집중했는지를 알 수 있게 해주지만, 오늘 하루 얼마나 많은 시간동안 집중했는지에 대한 사실 또한 알 수 있습니다. 하루가 끝나기 전, 오늘을 어떻게 보냈는지 전체 집중한 시간을 확인해보세요. 뿌듯한 마음으로 잠자리에 들면 기분좋지 않을까요?


Development

Development stack

Stop watch function

이 앱의 가장 중요한 기능은 바로 스탑워치 라고 할 수 있습니다.
시작 버튼을 누르면 초 단위로 숫자가 증가하고, 리셋 버튼을 누르면 다시 초기화 되는 기능은 어떻게 구현할 수 있을까요?

Set default values

                functions.js
                
// time value
let seconds = 0
let minutes = 0
let hours = 0

// display time value
let displaySeconds = 0
let displayMinutes = 0
let displayHours = 0

// hold stopwatch status
let status = false
            

Icrement next value

                functions.js
                
seconds++

if(seconds / 60 === 1) {
    seconds = 0
    minutes++

    if(minutes / 60 === 1) {
        minutes = 0
        hours++
    }
}
            

Display lap time stamp

얼마 동안의 시간이 걸렸는지 어떻게 알 수 있을까요?
리셋 버튼을 누르는 순간 화면에 디스플레이 되어있던 스탑워치의 시간을 전달받음으로써 그렇게 할 수 있습니다.

Default time value

                functions.js
                
let displaySeconds = 0
let displayMinutes = 0
let displayHours = 0
            

Create lap time stamp

                functions.js
                
const lapTime = () => {
    const lapTime = document.createElement('span')
    lapTime.classList.add('total-time')

    if(status === false) {

        if(displayHours.innerHTML = '00') {
            lapTime.innerHTML = displayMinutes + 'min ' + displaySeconds + 'sec'
            stampList.appendChild(lapTime)
        }

        if(Number(displayHours) > 0) {
            lapTime.innerHTML = displayHours + 'hr ' + displayMinutes + 'min'
            stampList.appendChild(lapTime)
        }
    }
}
            

display total spend time

오늘 하루 할 일을 모두 마쳤다면, 총 얼마나 많은 시간을 보냈는지 합계를 통해 볼 수 있습니다. 로컬 스토리지에 저장된 시간 정보를 불러와 배열에 담은 후 시간, 분, 초 단위로 나누어 각각의 누적값을 구해봅시다.

Get locastorage tem and make an empty array

                functions.js
                
const summary = getSavedTimes()
let hoursArr = []
let minutesArr = []
let secondsArr = []
            

Push each key’s values to array

                functions.js
                
for(let i=0; i<summary.length; i++) {
    hoursArr.push(summary[i].hours)
    minutesArr.push(summary[i].minutes)
    secondsArr.push(summary[i].seconds)
}
            

Get accumulate values of each array

                functions.js
                
let hoursSum = hoursArr.reduce((a, b) => a + b)
let minutesSum = minutesArr.reduce((a, b) => a + b)
let secondsSum = secondsArr.reduce((a, b) => a + b)
            

Review

프론트 엔드 개발자가 되고싶다는 생각으로 집에서 혼자 공부하기 시작하며 가장 중요하게 생각했던것은 시간 관리이다. 혼자서도 하루를 알차게 보낼 수 있는 방법을 고민하다가 스탑워치를 사용해 총 공부한 시간을 재보기로 했다. 그렇게 며칠간 아이폰에 내장되어있는 기본 어플로 시간을 쟀더니 몇가지 불편한 점이 발생했다.

이런 불편한 점을 개선하고자 직접 앱을 만들게 되었다. 타이머 앱을 만들면서 꼭 넣어야겠다고 생각했던 기능은 아래와 같다.

그렇게 생각하고 나서 탄생한게 지금의 타이머 앱이다. 혼자서 공부를 시작할 때부터 지금까지 든든하게 옆에서 나를 지켜주었다. 이 앱을 사용하면서 부터 내가 어느시간대에 집중을 잘하는지를 알게 되었는데, 아침의 공부 시간이 밤에 공부했을 때 보다 평균적으로 길었기 때문이다. (내가 아침형 인간이라는 것도 이것을 통해 알게 되었다.)

물론 아쉬운 점도 있다. 위의 ‘디자인 파트 - 더 나은 UI를 위하여’ 에서 작성했던 이야기이다. 나는 스탑워치를 사용하는 경우가 프로그래밍과 관련된 때일 뿐이지만 다른 사용자는 분명 스탑워치를 다양한 용도로 쓸 것이다. 예를 들어 이 앱을 하루 일과 기록용 처럼 쓴다면 카테고리를 입력하는 것이 더 알맞을 것이다. 그런 점을 생각해서 버전2는 나 말고도 다른 사람들도 편리하게 쓸 수 있는 타이머 앱을 만들어 보고 싶다.

Live Demo Github Repo