click
- HTML
- CSS
- Java Script
- EC2 Ubuntu
- Route 53
- ACM
- ELB
- NodeJS 모듈
- body-parser
- connect-flash
- ejs
- express
- express-session
- mongodb
- passport
- passport-local
- pbkdf2-password
2021.08.28 ~ 2022.01.10
- 공부를 좀 더 효율적으로 하기 위해 매시간 체크하는 pomodoro 타이머
- 명확한 목표를 설정하기 위한 TodoList
- 나의 안 좋은 습관을 체크하고 고치기 위한 Not TodoList
- 집중하는 데 도움이 되는 생활 소음
- '나'를 객관적으로 판단하기 위해 체크할 과거 기록
- 맘에 들지 않는 디자인
- 디자인과 기능 및 사용성을 모두 동시에 만족시키는 애플리케이션이 없었음
- 포모도로시간을 자동으로 기입해서 그 시간에 어떤 걸 했는지 한눈에 보고 싶었음
- 투 두 리스트 / 낫 투 두 리스트의
작성,수정,삭제기능이 직관적이었으면 좋겠음 - 마우스와 키보드의 멀티태스킹이 너무 잦아서 불편했음
- 여러 개의 창을 띄우고 공부해야 하는 상황에서 사소한 문제들로 인해 집중이 흐트러지는 경험을 했음
- 포모도로 타이머와 메모를 동시에 지원하지 않아서 기능마다 각기 다른 프로그램을 사용해야 했음
- 투 두 리스트 / 낫 투 두 리스트의 리스트를 범주에 따라 그룹화 / 시각화할 수 있는 기능이 부족했음
- 생활 소음을 듣기 위해 유튜브를 사용하면 광고 시청 또는 영상 길이 문제 등 공부의 흐름을 방해하는 요소가 많음
- 작성, 수정, 삭제가 자유롭다
- 자동화를 통해서 시간이 절약되며 집중하기 좋은 여건을 만들어줌
- 휴대폰으로 공부하는사람보다 노트북이나 데스크탑으로 공부하는 사람이 월등히 많다
- 디바이스를 통일해서 공부에 필요한 준비를 줄일 수 있음
매일 직접 사용하고 있는 프로그램들이기에 내 결과물을 사용자의 시선에서 좀 더 객관적으로 평가할 수 있고,
내가 만든 서비스를 통해 내역을 남긴다면 앞으로 공부를 지속하는데 많은 도움이 될 것이라고 생각함
-
포모도로 타이머
- 포모도로 타이머를 깜빡하고 시작하지 않거나, 시간 기록을 하지 않으면 흐름이 끊어지기 쉽고, 의욕 저하의 원인이 된다
- 위와 같은 실수를 방지하기 위해 자동화 (시간 자동 입력 + 텍스트 입력창 생성) 했다
- 포모도로 타이머를 깜빡하고 시작하지 않거나, 시간 기록을 하지 않으면 흐름이 끊어지기 쉽고, 의욕 저하의 원인이 된다
-
투두 리스트 / 낫 투두 리스트
- 투 두 리스트 / 낫 투 두 리스트는 시각화, 그룹화, 수정이 굉장히 빈번하게 발생하는 프로그램이다
- 자유롭게 리스트를 추가, 삭제, 드래그&드롭, 색상 변경할 수 있게 하여 그룹화 / 시각화 기능을 구현함으로써
- 노트보다 사용성이 훨씬 좋은 웹 애플리케이션을 만들고자 했다.
- 투 두 리스트 / 낫 투 두 리스트는 시각화, 그룹화, 수정이 굉장히 빈번하게 발생하는 프로그램이다
-
과거 기록
- 과거 기록을 통해 '나'를 객관적으로 볼 수 있다
- 기록 확인을 통해 객관적으로 '나'를 판단할 수 있고, 뿌듯함, 자신감, 지속할 수 있는 에너지 같은 작은 보상들을 얻을 수 있다
- 과거 기록을 통해 '나'를 객관적으로 볼 수 있다
-
오디오 프로그램
- 외부 프로그램을 사용하지 않고 하나로 통일해서 준비 시간을 줄일 수 있다
- 7가지 생활 소음을 제공하여 선택의 폭을 넓혔다
-
확장프로그램
- POMOTODO를 기본 화면으로 설정한다
- 왜? 일정관리프로그램은 자주 볼수록 경각심을 불러일으키기 때문에.
- POMOTODO를 기본 화면으로 설정한다
-
사용자들이 새 탭 버튼을 사용하는 이유
- 검색을 하기 위해서
-
그런데 새 탭 버튼을 통해 POMOTODO가 뜬다면 ?
-
검색을 위해 address bar를 직접 클릭하거나 즐겨찾기를 눌러서 페이지를 옮기는 등 사소하지만 굉장히 귀찮은 작업을 해야 하고 이로 인해 사용자의 의도를 방해하는 불편함을 주게 된다
- 사용자의 입장에서 키보드에 있던 오른손을 마우스로 옮겼다가 타이핑을 하기 위해 다시 키보드로 가져오는 일은 아주아주아주 귀찮은 일이다
-
-
그래서 어떻게 해결?
- 구글 검색창을 구현
- shift + tab
단축키를 통해 구글 검색창 -> adress bar로 포커스를 이동 - 검색창이 POMOTODO를 사용하는 데는 방해가 되므로 검색창 외부를 클릭하면 사라지도록 했다.
- shift+enter
단축키로 POMOTODO 어디서든 검색을 위해 마우스를 사용할 필요가 없게 했다
- shift + tab
- 구글 검색창을 구현
-
통일성 있는 디자인 (레이아웃, 폰트, 아이콘, 컬러 등등)
-
레이아웃
- 전체 레이아웃은 부드러운 느낌의 뉴모피즘 디자인을 적용해서 눈이 편하도록 했으며,
모달창이나 생성되는 리스트들은 글래스모피즘 디자인을 적용해서 시각적으로 차별화했다 - 비슷한 톤의 컬러를 사용해서 각 디자인 기법들이 조화롭도록 디자인했다
- 전체 레이아웃은 부드러운 느낌의 뉴모피즘 디자인을 적용해서 눈이 편하도록 했으며,
-
폰트
- 곡선과 직선이 균형 잡힌
IBM Plex Sans KR 폰트를 기본으로 사용하고,
영문은 개성을 주기위해ubuntu 폰트를 사용했다 - 각 폰트의 역할마다 두께를 달리했다
- 곡선과 직선이 균형 잡힌
-
아이콘
-
컬러
- 디자인에서 사용된 베이스 컬러와 어울리도록 채도가 톤 다운된 색상들을 사용했다
-
-
디자인에 맞게 버튼 구분
-
뉴모피즘 버튼
- 입체적인 뉴모피즘 디자인의 장점을 부각시키기 위해 그림자를 통해 눌리는 느낌 표현했다
-
일반 버튼
- 모든 버튼에 뉴모피즘 디자인을 적용하면 오히려 촌스럽고 사용성이 안 좋기 때문에
일반 버튼은 레이아웃 없이 텍스트나 아이콘으로만 만들었고,
hover, active 등의 이벤트가 발생할 때 버튼의 색상을 변화시켜 버튼임을 알 수 있도록 했다
- 모든 버튼에 뉴모피즘 디자인을 적용하면 오히려 촌스럽고 사용성이 안 좋기 때문에
-
-
버튼 위치
- 홈버튼
- UX를 위한 홈 버튼(좌측상단) & UI를 위한 홈버튼(네비게이션 바)
- 같은 버튼이라도 사용자의 경험, 디자인에 따라 다른 위치에 버튼이 필요한 경우가 있다
홈으로 가려면 웹 애플리케이션의 이름을 클릭하는 게 대부분이기 때문에 좌측 상단에 홈버튼이 있어야 하고,
홈과 기록을 왔다 갔다 하기 위해서 네비게이션 바를 사용하기 때문에 중앙 상단에도 홈버튼이 존재해야 한다.
- 같은 버튼이라도 사용자의 경험, 디자인에 따라 다른 위치에 버튼이 필요한 경우가 있다
- UX를 위한 홈 버튼(좌측상단) & UI를 위한 홈버튼(네비게이션 바)
- 로그인버튼
- 우측상단
- 다른 웹 서비스들을 이용했을 때 내가 익숙했던 위치를 생각해 본 뒤 로그인을 위한 버튼을 배치했다.
- 우측상단
- 홈버튼
-
효과음
- 타이머 시작과 종료시 서로 상반되는 효과음을 출력한다
-
사용자의 불편을 미리 예상해서 해결책 구현
- 검색창
- 접속시 자동생성 & 포커스
- 주소창으로 가기 편하게 하기 위한 구조화 [단축키 설명 & 주소창을 좀 더 명시적으로 ??]
- 외부 클릭시 숨기기
- 숨김 상태에서 마우스 없이 검색할 수 있도록 단축키(shift+enter)
- 모달창
- 외부를 클릭하면 모달창이 닫히도록
- 검색창
- 단순 웹사이트뿐 아니라 크롬 확장 프로그램을 통해 제공해서 리뷰를 쓸 수 있고, 더욱 편하게 사용할 수 있도록 했다
💡 jquery sortable 범위인식 문제 💡
💡 jquery ui touch punch 무반응 💡
💡 웹워커사용 💡
💡 db조회 및 출력시 발생하는 병목현상 💡
💡 로컬에서는 잘 작동하는데 도메인에서 안됨 💡
💡 502 Bad Gateway 💡
💡 조건에 따른 홈페이지 새로고침 💡
💡 신규가입계정 502 bad gateway issue 💡
처음 프로젝트를 시작하면서 내가 할 수 있을까 하는 걱정이 가장 앞섰다.
모든 생각을 적으려면 너무 길어지기 때문에 몇 가지로 나눠서 설명하려 한다.
시작하기 전부터 먼 미래의 일까지 생각하니까 너무 막막해서 손도 못 대는 경우가 많았다.
작은 단위로 기능을 쪼개서 필수 기능/부가 기능을 나누고 가장 간단한 일부터 시작해서 부담감이나 막막함을 줄일 수 있었고,
어떻게 시작해야 할지 순서를 정할 수 있었다.
일단은 현재 내 수준에서 해결할 수 있는 최선의 방법을 사용해서 구현하고, 추후에 업그레이드하면 된다고 생각한다.
현재 내 수준에 맞는 코드로 작성해서 퀄리티가 떨어지거나, 아예 구현을 못해서 개발 외적인 해결법으로 우회하기도 했지만,
시간이 지난 뒤에 보니깐 충분히 더 직관적이고 (사람이 보기에도, 컴퓨터가 보기에도), 리소스를 절약할 수 있는 방법이 보였다.
(예를 들어 DB를 처음 다루다 보니 어떤 식으로 데이터를 주고받고 해야 하는지 처음에는 어려웠지만 여러 가지 이슈를 해결하는 과정에 좀 더 직관적이고 간단하게 변경할 수 있었다.)
첫 기획은 완벽할 수 없고 기획이 바뀔 수 있다, 그럼 거기에 맞춰서 가장 좋은 해결법을 적용하면 된다고 생각한다.
유지 보수를 하려면 사용자의 다양한 의견이 필요하고 많은 사용자가 필요하다.
단순 개발하는 걸로 그치는 게 아닌 실제 서비스를 만들려면 마케팅도 염두에 두고 기획을 해야 했는가,
개발자가 사용자의 입장에서 생각해 보고 서비스를 제공할 수 있는가, 개발 외적인 부분에서 더 챙길 것은 없는가,
유지 보수하기 편하게 개발했는가 등등의 질문을 스스로 던져볼 수 있는 시야를 가지게 될 수 있었다.
처음엔 이 언어는 어떻게 공부할지?, 프로젝트를 어떻게 시작할지, 의미가 담긴 코드를 작성할 수 있을지 감이 안 잡혀서 어려웠고,
개발이 조금 진행된 후엔 앞에 작성한 코드와 어떻게 잘 연결하고, 예외 처리는 어떻게 할지가 어려웠다.
개발 막바지엔 어떤 로직으로 코드를 작성하면 서버나 db에 덜 부담스러운 코드를 작성할 수 있을지, 사용자 친화적인 ux/ui란 뭘까?라는 고민이 생겼고,
이런 고민들이 이번 프로젝트를 다 만들고 나니 이제는 어느 정도 해결법을 찾아갈 수 있게 된 것 같다.
서비스를 처음부터 끝까지 만들어봐야 내가 작성하는 코드가 어디서 어떻게 사용되고 어떻게 보완해야 더 좋을지에 대해서 알 수 있을 거라고 판단했다.
동일한 언어를 사용할 수 있는 환경을 만들기 위해 node.js를 선택했고 이를 통해 언어 공부에 시간을 절약할 수 있었으며 언어의 다양한 사용법을 알 수 있었다.
클라우드 컴퓨터를 사용해 보고 싶어서 AWS를 선택해서 EC2, ROUTE53, ACM, ELB, target group 등 다양한 기능을 사용해 보거나 개념을 익힐 수 있었고,
개발의 편의성을 위해 jQuery, ejs 템플릿을 써볼 수 있었다.
서비스를 처음부터 끝까지 만듦으로써 어떤 이슈가 발생했을 때 어디서 발생한 이슈인지 판단할 수 있었고 어떻게 처리하는 게 가장 좋을지에 대해서 고민해 볼 수 있었다.
서비스를 완성함으로써 공부를 위한 개발이 아니라 개발을 위한 공부를 할 수 있었고 보다 넓은 시야를 조금이나마 가질 수 있었다고 생각한다.
느낀 점 3번에서 이어지는 얘기인데 첫 프로젝트라서 마케팅을 생각하지 못하고 개발하기 시작했다.
사용자의 유입을 기다리는 것보다 나 자신이 쓰기 위한 서비스를 만들자고 생각했고,
사용자로서 내 프로젝트를 접했기 때문에 다양한 불편함을 마주했고 수정/배포할 수 있었다.
처음에는 이슈가 발생하면 원인을 알 수가 없어서 답답하고 힘들었다.
하지만 해결하기 위해 코드를 뜯어본다던가, 공책 하나 펴놓고 생각나는 대로 적어서 리스트 업 한 뒤 시도해 보고 틀린 방법이면 지워나감으로써 해결을 위한 길을 만들 수 있었다.
내가 만든 루틴은 다음과 같다.
- 기능 개발
- 만들고자 하는 것 추상화하기
- 필수 기능과 부가기능 나누고 부가기능도 중요도에 따라 순번 매기기
- 필수 기능을 가장 간단한 수준으로 개발하기
- 부가기능 순서대로 살붙이기
- 이슈 발생
- 문제 인식
- 문제의 원인 파악
- 해결 방법 고민하는 시간 가지고 리스트 업하기
- 하나씩 시도해 보고 틀린 방법이면 지워나가기를 통해 다음부터 확인 안 해도 되도록 표시하기
- 심적으로 이슈에 접근하기 쉬워졌다
- 어떤 문제든 해결 방법은 있다는 자신감도 생겼다
- 개발하기 위해 필요한 검색어가 명확해졌고 공부하는데 시간도 단축할 수 있었다
- 웹 개발이 처음이라 처음 작성한 코드와 마지막에 작성한 코드의 퀄리티가 차이 난다.
- 이슈 발생으로 인해 코드 수정 시 다른 코드에 문제가 생기지 않을지 체크하기 어려웠다.
- 사용자를 단기간에 모을 수 없어서 내가 쓸 프로그램을 만들었지만 어떻게 홍보할지 감이 안 잡혀서 아쉽다
- 기획 단계에서 마케팅도 고려하기
(도메인 선점, 시장조사 및 경쟁사 조사, 로직 구상 등 미리 구상해 보기) - 코드 작성
- 의미 있고 좀 더 자세한 변수명 사용하기
- 흐름을 생각하고 코드 작성하기
- 함수 하나에 하나의 기능만 하도록
- 비슷한 기능의 코드는 함수화하고 매개변수로 컨트롤하기
- css도 비슷한 코드는 묶어서 관리하고 개별적인 디자인은 각각 적용
- 컬러 변수, 언어 변수 등 변수를 통해 유지 보수하기 좋도록 작성하기
click
POMOTODO is a web application that combines various functions specialized in schedule management.
The function of POMOTODO.
- Google search.
- Pomodoro timer.
- TO-DO-list.
- Not-to-do-list.
- Visualize past records.
- Living noise that helps you concentrate.
- Chrome expansion program.
- You can google search it without having to go to another page.
- You can go to the browser address bar through shift+tab
shortening keywhile focused on the search box. - If you click outside the search box, the search box closes.
You can open the search box at any time through 'shift + center'shortening key
- When the Pomodoro timer is played, it alternately shows the working time/rest time.
- When the timer ends, the
timeandText input spaceare automatically generated.- You can write simple text through the
Text input space
- You can write simple text through the
- Enter TO-DO-list.
- Color change.
- Change the location to drag & drop.
- Completed mark/aligned.
- Delete.
- This is a list where you can write down what You have to do today.
- You can move through the
drag button - You can change the color by clicking
list - You can delete the list through the
delete button
- You can move through the
- This is a list where you can write what you shouldn't do today.
- It functions like TO-DO-list.
- Check the completed Pomodoro timer and mark it with color and text on the calendar.
- It shows the TO-DO-list and NOT-TO-DO-list of the date.
- look up DB and show you past records.
-
Playing audio files and pausing.
-
Audio file list.
- You can play audio that living noise that helps you concentrate.
- You can select one of the 7 audio files and play it.
https://chrome.google.com/webstore/detail/pomotodo/eiejppffpppelndcmldkpjleiojibopg?hl=ko.
POMOTODO
일정 관리에 특화된 여러기능을 한데 묶은 웹애플리케이션입니다.
- 다른 페이지로 이동할 필요 없이 구글 검색을 할 수 있습니다
- 검색창 외부를 클릭하면 검색창은 닫히고,
shift + enter단축키를 통해 언제든 검색창을 열 수 있습니다 - 검색창에 포커스 된 상태로 shift+tab
단축키를 통해 주소 검색창으로 이동할 수 있습니다
- 시간을 설정해서 작업 시간 / 휴식 시간 교차로 진행되는 포모도로 타이머입니다
- 타이머가 종료되면
시간과입력창이 자동으로 생성됩니다입력창을 통해 간단한 텍스트를 작성할 수 있습니다
- 투두리스트 입력
- 색상변경
- 위치변경
- 완료표시/정렬
- 삭제
- 오늘 해야 할 일을 작성할 수 있는 투두리스트 입니다
드래그버튼을 통해 이동이 가능합니다리스트를 클릭해서 색상을 변경할 수 있습니다삭제버튼을 통해 리스트를 삭제할 수 있습니다
- 오늘 하지 말아야 할 일을 작성할 수 있는 낫투두리스트입니다.
- 투두리스트와 같은 기능을 합니다
- 완료한 포모도로 타이머를 체크해서 달력에 색깔로 표시합니다
- DB를 조회해서 과거의 기록을 보여줍니다
-
오디오 파일 재생 및 일시정지
-
오디오파일 리스트
- 집중에 도움이 되는 생활소음을 재생할 수 있습니다
- 총 7개의 오디오파일중 하나를 선택해서 재생 할 수 있습니다
https://chrome.google.com/webstore/detail/pomotodo/eiejppffpppelndcmldkpjleiojibopg?hl=ko