SUZ!E

DODO

두두는 투두리스트 앱입니다.
‘해야 되는’이 아닌 ‘하는 것’에 의의를 둔 두두는 오늘 하루를 얼마나
성취감 있게 보내느냐를 강조합니다.
한가지씩 완료할때 채워지는 프로그래스 바를 보며
오늘 하루 성취감을 느껴보면 어떨까요.

Go to demo & Github repo

Design

Color

두두의 프라이머리 컬러는 청렴함과 용기를 상징하는 ‘파랑’입니다.
서브 컬러인 피치는 요일과 월, 년도를 알려주는곳에 쓰입니다.
또다른 서브 컬러 스카이 블루는 삭제 버튼과 프로그래스바의 바탕 부분을 담당합니다.

Responsive Design

두두는 반응형 웹디자인으로 만들어졌습니다. 미디어 쿼리를 사용해, pc 버전에서는 멋진 바탕 그라데이션을 볼 수 있습니다. 다시 모바일 버전으로 돌아오면 그라데이션은 사라집니다.

Display today’s date & achievement

우리는 우리가 실제로 본 것만 믿고 그것이 실제라고 믿는 경향이 있습니다. 우리가 아무리 많은 일을 하루에 했더라도 그것을 단순히 나열만 한다고 해서 어느 정도의 일을 했는지 시각적으로 알 수 있기란 어렵습니다. 바쁜 현대 세상을 살아가다 보면 오늘이 며칠인지, 무슨 요일인지조차 잊고 사는 일이 허다합니다. 두두에서는 상단에 나타난 날짜와 요일을 계속해서 보며 오늘 하루 어떤 일을 했는지 프로그래서 바에서 바로 확인할 수 있습니다. 날짜 확인과 진행 상태를 시각적으로 확인하는 것을 중요하게 여기는 사람에게는 안성맞춤입니다.


Development

Development stack

Get Saved todo lists

브라우저가 새로 고침 된 이후에도 계속해서 저장한 리스트를 보고 싶을 때에는 어떻게 해야 할까요? 저는 이 시점에서 좌절감을 맛보았는데, 프론트 엔드 개발자가 되고자 했지만, 데이터를 저장할 수 없다는 말은 즉 제대로 된 앱을 스스로의 힘으로 만들 수 없다는 뜻이었기 때문입니다. 정말 백 엔드의 도움 없이 데이터를 저장할 수 없을까? 늘 그랬듯, 답은 있었습니다. ‘로컬 스토리지’를 사용해 데이터를 저장해봅시다.

Fetch existing todos from local storage

                todo-functions.js
                
const getSavedTodos = () => {
    const todosJSON = localStorage.getItem(‘todos’)

    try{
        return todosJSON ? JSON.parse(todosJSON) : []
    } catch(e) {
        return []
    }
}
            

Push text key’s value

                todo-functions.js
                
const todos = getSavedTodos()
document.querySelector(‘#new-todo-container’).addEventListener(‘submit’, (e) => {
      e.preventDefault()

      todos.push({
          id: uuidv4(),
          text: e.target.elements.text.value,
          completed: false
      })
      saveTodos(todos)
      renderTodos(todos)
    
      e.target.elements.text.value = ‘’
})
            

Save todos to localStorage

                todo-functions.js
                
const saveTodos = (todos) => {
    localStorage.setItem(‘todos’, JSON.stringify(todos))
}
            

Progress bar

오늘의 할 일들을 하나씩 체크해갈 때 마다 프로그래스 바는 채워집니다.
어떻게 해야 투두리스트의 체크 박스와 프로그래스 바를 연결할 수 있을까요?

Get the DOM elements for complete todo Dom

                todo-functions.js
                
const generateCompleteTodoDOM = (completeTodos, totalTodos) => {
    const completeSummary = document.createElement(‘span’)
    completeSummary.style.width = `calc(${(completeTodos.length / totalTodos.length) * 100}%)`

    return completeSummary
}
            

Render todo Dom

                todo-functions.js
                
const renderTodos = (todos) => {
    const completeTodos = todos.filter((todo) => todo.completed)
    const totalTodos = todos.filter((todo) => todo.completed + !todo.completed)
    const totalPercent = document.createElement(‘span’)

   document.querySelector(‘#percentage’).appendChild(generateCompleteTodoDOM(completeTodos, totalTodos))
}
            

Review

프론트 엔드 개발자의 기본 관문이라고 할 수도 있는 투두 앱을 만들어보았다. 이번 앱을 만들면서 가장 중요하게 여겼던 부분 몇 가지가 있다.

내가 쓰려고 만든 만큼 위의 네 가지 부분은 나에게 필수 항목이었다. 프론트 엔드 개발이 매력적으로 느껴졌던 이유 중 하나는 내가 원하는 대로 만들 수 있다는 점이었다. 자바스크립트를 공부하고 처음으로 내 힘으로 처음부터 끝까지 만들어본 이번 앱은 누군가에게는 진부하고, 간단한 앱일 수 있다는 생각이 든다. 하지만 이번 프로젝트를 하면서 나는 어떻게 프로그래스 바를 표현 할 것인지, 카테고리 기능은 있는 게 좋을지 없는 게 좋을지부터 어떻게 하면 불필요한 클릭 횟수를 줄일지까지 많은 생각을 거쳤다.

일례로 아래의 사진은 카테고리 기능을 넣자고 생각했을 초기의 디자인이다. 내가 사용자의 입장이라면 빨리 오늘 내가 할 일을 적어 넣고 싶지 카테고리를 꼭 먼저 등록하고 싶지는 않을 것 같다는 생각이 들었다.

카테고리 기능은 어쩔 수 없이 불필요한 추가 이벤트를 불러 일으킨다.

결론적으로 지금 버전의 투두 앱을 나는 사랑한다. 훨씬 더 직관적이며 가장 중요한 건 사용자의 입장으로서 나쁘지 않은 경험을 선사한다는 것이다. 실제로 나는 매일같이 사용하고 있으며 꽤 만족한다! 물론 내가 원하는 대로 만들었기 때문이지만.

물론 아쉽거나 더 발전시키고 싶은 부분들도 있다.

아쉬운 부분들을 기록해두었다가 버전 2, 버전 3의 두두의 기능에 추가하고 싶다. 점점 더 나의 (사용자의) 기준에서 발전될 모습이 기대된다. ✌️

Live Demo Github Repo