ABOUT ME

-

  • [ Desktop App ] Yume Note | 메모 & 일정 관리 데스크톱 앱
    Yume Dev Playground 2025. 9. 11. 00:25
    반응형

    electron + vue를 활용하여 만든 Desktop App이다.

     

    YumeNote는 메모와 일정관리를 할 수 있는 Desktop App이며,

    실제 서버를 사용하지 않고 만들었고, 사용자의 local에 데이터를 저장한다.

     

    윈도우의 스티커메모를 쓰다가 관리가 불편해서 좀 더 상위호환 느낌을 살렸다.

     

    주로 개인 노트북 혹은 회사에서 보안이 중요한 상황에 메모를 좀 더 쉽게 관리할 수 있도록 개발을 진행했다.

    현재도 지속적으로 계속해서 업데이트를 진행할 예정이며, 버전이 올라가면 왼쪽 하단에 New 표시가 나오며 원하면 업데이트 할 수 있도록 했다.

     

    아직 Desktop App은 처음 만들어봐서 서버를 사용하지 않고 자동업데이트를 하는 방법을 찾지 못해서 electron-update로 재설치하는 방식으로 구현하였다. 데이터는 사용자의 PC에 저장하고 있기에 저장 데이터는 pc 데이터를 삭제하지 않는 이상 남아있기에 재설치해도 문제가 없다.

     

    아래의 사이트에서 해당 다운받을 수 있다.

    https://yume-note.netlify.app/

     

    YumeNote - Notes and Schedule Management | 노트, 일정 관리 앱

     

    yume-note.netlify.app

     

    mac의 경우에는 개발자 계정이 필요하기에 설치를 할 수가 없어서 결국 빼기로 했다.

    window의 경우에는 개발자 서명이 존재하지 않기에 윈도우에서 보안체크를 하여 추가실행 -> 실행 을하여 해당 앱을 설치 할 수 있다.

     

    다크모드와 화이트모드 두가지의 모드가 존재한다.


    메모 기능

    1. 노트 관리

    YumeNote는 왼쪽 패널에서 새로운 노트를 추가해서 다양한 카테고리별로 노트를 정리할 수 있다.

    드래그로 순서를 바꿀 수 있으며, 최대 depth 1까지 자식 카테고리까지 넣을 수 있다.

     

    2. 메모 관리

    해당 노트별로 메모를 만들 수 있으며 각 메모의 색상도 변경이 가능하다.

    각 노트를 클릭하면 해당 노트를 오른쪽 패널의 에디터에서 메모 수정이 가능하다.

     

    이때 메모에 이미지도 추가가 되지만 붙혀넣기 하여 넣을 수 있는 방식으로만 구현했다.

     

    TipTap Editor를 활용하여 약간의 커스텀을 추가하고

    단축키와, 노션처럼 block별로 드래그해서 위치를 바꿀 수 있도록 구현 했다.

     

    태그를 추가하여 태그로 좀 더 관리를 할 수 있도록 관리에 중점을 두었다.

     

    3. 메모 검색

    헤더의 가운데에서 검색하면 해당 키워드가 있는 메모를 검색할 수 있으며

    검색창에 #을 붙혀서 태그로도 검색이 가능하다.

     

    또한 에디터 내에서 ctrl+f를 눌러 메모 내에서도 검색이 가능하다.

     

    4. 메모 삭제 관리

     

    메모를 삭제하면 휴지통에서 보관하여 복구 및 완전삭제가 가능하다.

    하지만 노트자체를 삭제하면 해당 메모는 전부 삭제가 된다.

     

     

     

     

     

     

     

     

     

     

     

     


    일정 관리

    1. 할일 저장

    헤더에서 왼쪽 두번째 아이콘을 클릭하면 내가 할일을 미리 등록할 수 있으며,

    여기서 해당 할일에서 캘린더 아이콘을 누르면 오늘 할일로 자동 등록된다.

     

    2. 일정 관리

    캘린더에서 각 날짜를 누르면 해당 날의 할일과 메모를 할 수 있으며 할일 완료 체크를 하면 해당 할일은 완료로 바뀌게 된다.

    추가로 각 날짜별로 추가 메모를 작성할 수 있으며 메모가 있는 경우의 날짜는 캘린더에 표시된다.

     

    3. 일정 등록

    일정은 해당 날짜의 할일 추가 버튼을 눌러서 할일을 등록할 수 있으며,

    단일, 범위, 반복, 다중 일정 등록이 가능하다.

     

    할일의 카테고리를 설정하고 날짜를 선택 후 보내기 아이콘을 클릭하면 할일이 등록된다.

    추가로 해당 할일에 메모를 적을 수 있으며, 메모가 있는 경우에는 할일에 따로 표시가 된다.

     

     

     

     

     

     

     

     

    4. 카테고리 관리

    왼쪽 사이드바에서 카테고리 관리를 누르면 카테고리들을 추가하거나 삭제 변경이 가능하다.

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    설정

    1. 언어변경

    언어는 영어와 한국어 두개를 사용할 수 있다.

     

    2. 휴지통 보관기간

    휴지통 보관기간을 설정할 수 있으며,

    해당 기간이 지나면 휴지통의 메모들은 삭제된다.

     

    3. 단축기 힌트

    헤더와 아이콘과 에디터의 아이콘에서는 단축키가 존재하며,

    마우스를 가져다 댈시 해당 단축키가 뭔지 나오는데,

    이 것을 볼지 말지 선택 할 수 있다.

     

    4. 폰트 크기

    폰트 사이즈는 작게 중간 크게 세종류가 존재한다.

     

    5. 메모리정리

    사용자 pc에 데이터를 저장하다보니 각 사용자의 pc사양에따라서 용량이 달라지므로, 메모리 정리나 메모리 삭제 기능이 존재한다. 메모리 정리의 경우에는 180일을 기준으로 180일동안 수정이 없는 메모들만 삭제하며, 메모리 삭제는 전체 데이터를 전부 삭제한다.

     

    더보기

    1인 개발로 진행하다보니 버그나 이상한 부분들을 놓쳤을 수도 있습니다.

    만약 사용하시다가 불편한점이나 기능 개선이 필요한 부분이 있다면 댓글이나 메일을 주시면 확인 후 지속적으로 업데이트를 진행해보겠습니다.

     

    아직 미숙한 점들이 많이 있지만,

    많은 사람들이 일할때 좀 더 메모 관리를 편하게 했으면 좋겠다는 생각과 보안이 중요한 회사의 경우에는 메모 관리가 더욱 힘들 것 같다는 생각으로 개발하였습니다.

    728x90
    반응형