SUZ!E

Full Moon

풀문은 노트 작성 앱입니다.
오늘 했던 생각들을 기록하며 한달을 보내보세요.
어떨땐 적는것 만으로도 많은것이 바뀐답니다.
한 달을 가득 채운 날, 어떤 변화가 일어날지 몰라요!

Go to demo & Github repo

Design

Color

풀문의 프라이머리 컬러는 '블랙'입니다. 엄밀히 말하자면 블랙 앤 화이트라고 할 수 있죠. 풀문에서 블랙은 스케치북의 스프링 부분을, 화이트는 스케치북의 도화지 부분을 나타냅니다. 검은 스프링이 달린 흰 도화지에 그림을 그리듯 지금 머릿 속에 있는 생각들을 마음껏 적어보면 어떨까요?

Responsive Design

풀문은 반응형 웹디자인으로 만들어졌습니다. pc버전에서는 캘린더와 함께 두개의 열로 이루어져있는 노트들을 볼 수 있고, 모바일 버전에서는 심플한 모습의 풀문을 볼 수 있습니다.


Development

Syncing data across page

edit 페이지에 입력한 내용이 자동으로 저장이되고, index 페이지에 동기화 된다면 어떨까요? 저장 버튼을 누르고, 새로고침을 하는 번거로움이 사라질 수 있도록 말입니다. 그렇게 하기 위해서는 탭 간의 동기화가 필요합니다. 탭 사이 동기화는 어떻게 할 수 있을까요?

edit 페이지 간의 동기화

                notes-edit.js
                
window.addEventListener('storage', (e) => {
    if (e.key === 'notes') {
        notes = JSON.parse(e.newValue)
        note = notes.find((note) => note.id === noteId)

        if (!note) {
            location.assign('/index.html')
        }

        titleElement.value = note.title
        bodyElement.value = note.body
    }
})
                
            

index페이지와 edit페이지의 동기화

                notes-app.js
                
window.addEventListener('storage', (e) => {
    if (e.key === 'notes') {
        notes = JSON.parse(e.newValue)
        renderNotes(notes, filters)
    }
})
                
            

검색과 정렬

노트앱은 기록하는 것이 목적인 만큼, 시간이 지날 수록 많은 기록이 쌓이게 됩니다. 쌓인 노트들 중 찾고 싶은 노트가 있다면 어떻게 해야할까요? 검색 기능을 사용하면 노트의 타이틀을 검색하면 해당 노트가 나타날 수 있습니다. 그렇다면 알파벳 순으로 노트들을 보고싶다거나, 수정된 노트들 순으로 보고싶을땐 어떻게 해야할까요? 이번에는 정렬 기능을 사용해서 원하는대로 노트들을 정렬할 수 있습니다. 검색과 정렬 함수를 어떻게 만들 수 있을까요?

검색 기능

                notes-app.js
                
document.querySelector('#search-text').addEventListener('input', (e) => {
    filters.searchText = e.target.value
    renderNotes(notes, filters)
})
                
            

정렬 기능 (세가지 방식)

                notes-function.js
                
const sortNotes = (notes, sortBy) => {
    if (sortBy === 'byEdited') {
        return notes.sort((a, b) => {
            if (a.updatedAt > b.updatedAt) {
                return -1
            } else if (a.updatedAt < b.updatedAt) {
                return 1
            } else {
                return 0
            }
        })
    } else if (sortBy === 'byCreated') {
        return notes.sort((a, b) => {
            if (a.createdAt > b.createdAt) {
                return -1
            } else if (a.createdAt < b.createdAt) {
                return 1
            } else {
                return 0
            }
        })
    } else if (sortBy === 'alphabetical') {
        return notes.sort((a, b) => {
            if (a.title.toLowerCase() < b.title.toLowerCase()) {
                return -1
            } else if (a.title.toLowerCase() > b.title.toLowerCase()) {
                return 1
            } else {
                return 0
            }
        })
    } else {
        return notes
    }
}
                 
            

Review

2019년 4월 잘 쓰고 있던 구글 플러스 서비스가 종료되었다. 블로그, 소셜미디어, 다이어리 등 여러가지 기록할 수 있는 앱은 많다. 하지만 내가 아이디어를 기록할 때 구글 플러스를 자주 이용했던 이유는 두가지이다. 첫번째 이유는 작성한 여러개의 노트를 한 화면에서 한 눈에 볼 수 있기 때문이고, 두번째 이유는 작성한 글을 단어로 검색해서 찾아 볼 수 있기 때문이다. 두 기능은 사소해 보이지만 나에게는 무척 중요한 기능이라는 것을 앱이 종료되고 나서야 깨달았다.

그래서 내가 내린 결론은 ‘직접 만들자’ 였다. 그렇게 만들게 된 노트 앱을 만들면서 중점에 둔 부분은 아래의 다섯가지다.

투두 앱을 만들 때에도 노트앱을 만들 때에도 ‘날짜’ 를 표시하는 것의 중요성은 빠지지 않는다. 사실 날짜를 표시하기만 하는 기능은 쓸데 없다고 생각될 수도 있지만 기록을 할때에는 오늘이 무슨 요일인지, 한달의 중반부인지 후반부인지가 중요하다고 생각한다. 그렇기 때문에 더 발전시키고 싶은 부분에도 ‘날짜’가 포함된다.

아이디어를 기록할 때엔 ‘full moon’을 사용한다. 한눈에 아이디어를 훑어보기 편하기 때문이다. 하지만 역시 다이어리 처럼 작성하는데에는 한계가 있는 것 같다. 그 부분을 보완시켜서 아이디어를 작성하는 공간 뿐만 아니라 그 외의 기록들도 할 수 있는 앱을 만들고 싶은 소소한 소망이 있다. 그 앱이 만들어질때까지 풀문은 계속 됩니다. 화이팅!

Live Demo Github Repo