>> ps note 만들기 대작전 << 프로젝트를 시작했습니다!
이번 프로젝트는 처음부터 차근차근 개발기를 기록해보기로 결심했습니다. 이러면 마지막에 프로젝트 회고할 때도 도움이 될 것 같아서요😚
제발 작심3일이 되지 않기를 바라면서 ...
─── ･ ｡ﾟ☆: *.☽ .* :☆ﾟ. ───
이 프로젝트가 왜 탄생했냐면요 ..
제 7월 목표 중 하나가 바로 '사이드 프로젝트 기획하기'였습니다. 그런데 전 정말 창의성이 꽝💥인 사람이거든요,, 아무튼 마음에 쏙 드는 아이디어를 떠올리는 게 쉽지 않았습니다. 전 웹 사이트를 개발할 때 늘 제가 쓰고 싶고, 실제로 사용할 만한 사이트여야 애정도 생기고, 열정을 쏟아부을 수 있는 것 같아요! (거기에 실제로 유저를 모을 수 있는 아이디어라면? 완전히 만족 100퍼센트.) 마치 아이디어 자체가 에너지원이 되어주는 느낌이랄까요?! 그리고 개발하면서 이것저것 사소한 아이디어를 붙이는 걸 좋아하는데, 그런 아이디어도 도메인에 관한 애정이 있어야 잘 나오는 것 같더라구요.
노션으로 관리하던 출석부의 한계
아무트으으은! 그렇게 열심히 아이디어를 고민하던 와중에!
7월부터 학교 사람들과 함께하던 주 4회 ps 스터디에서 기가 막힌 아이디어를 발견하게 됩니다!
기존에 저희는 노션으로 ps 문제 정보, 풀이 방법을 입력하면 수식을 통해 자동으로 해당 요일에 출석이 되는 방식으로 출석을 관리하고 있었는데요, 아니 글쎄! 어느 순간부터 수식이 제대로 작동하지 않게 됩니다,, 여기서 문제는 출석이 100% 수식으로만 관리되기 때문에 강제로 실제 요일에 체크를 할 수도 없다는 것이죠🤔
이런 문제를 해결하기 위해 만약 수식으로 자동화하지 않고, 매번 누군가가 직접 체크하는 방법을 채택하는 건 어떨까요? 첫 번째로 귀찮음 문제가 있을 것이고, 두 번째는 사람이기 때문에 스터디원이 많아질수록 실수가 발생할 수밖에 없고, 세 번째는 벌금 제도가 있기 때문에 믿음의 문제 또한 발생할 수 있습니다. 따라서 출석부를 자동화해주는 웹사이트를 만들면 어떨까?! 라는 생각을 하게 되었고, 스터디장 친구에게 바로 카톡을 날렸습니다. 다행히(?) 좋은 아이디어라고 해주었고, 이 능력자 친구가 백엔드를 담당해주기로 하였습니다.😏
그리고 기존에는 출석과 ps DB가 나뉘어져 있어 내가 이번 주, 어떤 요일에 어떤 문제를 풀었는지 확인하기 불편한 시스템이었기 때문에 이 문제 또한 함께 해결하는 사이트를 만들고 싶었습니다.
따라서 MVP를 정리해보자면,
1. 유저가 ps 노트를 올리면 -> 해당 요일 출석을 자동화 및 관리
2. 유저는 이번 주에 푼 문제와 출석, 벌금을 한 눈에 확인
입니다.
처음 기획할 때는 ps 노트는 노션을 유지하면서,, 노션이 올라오면 웹사이트에 출석이 연동되는 식으로 생각하였으나 친구와 기획을 하다보니,, 애매하게 ps 노트와 출석을 노션, 웹사이트로 나눠서 관리하는 게 오히려 더 헷갈리고 복잡할 수 있겠다는 결론을 내렸습니다.
따라서 노션으로 관리하던 ps 시스템 자체를 사이트로 구현하기로 하였고! 'ps 출석부' 프로젝트에서 'ps note' 프로젝트가 되었습니다🤧 (오히려,, 좋아,, 인가? ㅋㅋ,,)
개발자에게 디자인은 고통이ㄷㅏ...☆
부족하지만 제가 직접 디자인한 결과물입니다.
디자인 2회차,, 점점 피그마 사용 스킬만 늘어가는 것 같아요,, 오히려 좋아? 디자인 경험도 쌓고.. 어디에 써먹을 수 있을진 모르겠지만! 다 경험이겠쥬,, 피그마로 이력서 만드는 그 날까지,,
캡디 프로젝트 디자인을 맡으면서도 느꼈지만 정말 디자인은 재능의 영역이 맞는 것 같습니다. 그리고 전 디자인에 재능이 정말 0.000000000001도 없는 것 같아요. 3일 동안 열심히 해본다고 했는데 고통스러운 시간이었습니다,, 정말 포인트 컬러를 몇 번을 갈아엎었는지 몰라요,,
그래도 핀터레스트 뒤져가며 열심히 해본 만큼! 나름대로 디자인 설명을.. 해보겠습니다!
앗 그리고 주로 ps를 풀고, 바로 솔루션 업로드를 하기 때문에 일단은 pc 퍼스트입니다. 나중에 차차 모바일 버전도 디자인하고, 개발도 해볼 계획!
0. 나름 디자인 테마이자 컨셉
테마가 없는 것 같지만 나름 있습니다. 저희 스터디에는 1주에 '면제 티켓'이 하나씩 주어지는데요! 1주마다 면제 티켓을 하나씩 쓸 수 있기 때문에 주4회 스터디랍니다! 아무튼 면제 티켓의 '티켓'에서 영감을 떠올려서 뭔가 티켓 -> 비행기 티켓 -> 하늘과 비행기?! 컨셉이 되었어요. 비록 비행기도 없고.. 어디가 하늘..인지도 모르겠지만..
아무튼 '하늘' 키워드에서 따와서 하늘색으로 배경 컬러를 하고, 포인트 컬러를 파란색으로 주었습니다. 그리고 카드 색상도 무지 고민하다,, 하늘엔 역시 구름이 있어야겠지! 란 생각으로 하얀색을 pick!했습니다. 뭔가 선명하고 깔끔한 느낌을 주고 싶어서 포인트 컬러를 뭘 해야할지 정말 고민이 많았었는데 파란색이 생각보다 마음에 들어서 뿌듯하네요. 빨리 개발하고 싶어요ㅎㅎ (UI 개발할 때 제일 두근거리는 1인,,)
1. 메인 페이지
메인 페이지(/)의 주요 기능은 유저 카드를 통해 유저들의 이번주 출석 현황과 벌금을 한 눈에 파악할 수 있는 것입니다. 가장 중요한 출석 현황은 바로 파악할 수 있게 Progress bar로, 벌금은 텍스트로 구현했습니다! 이게 사이트를 만들게 된 핵심이기도 하고, 유저에게도 핵심 기능이니까 어떻게 해야 깔끔하면서 쉽게 파악할 수 있을까 많이 고민했습니다.
이외에 문제 추천, 오늘의 PS 섹션은 이미 노션에 있던 기능들을 가져왔어요. 문제 카드는 최대한 간단하게 만들어 봤습니다. 특히 티어는 일부러 보이지 않게 했어요! 티어에 의존하지 않고 좀 다양한 난이도의 문제를 풀어보고 싶은.. 저의 다짐이 담겨있는 디자인입니다.
로그인을 하면 헤더에 '면제 티켓', '체크인' nav가 생겨나고, 이번 주에 이미 면제 티켓을 사용한 유저라면 해당 nav를 disabled할 예정입니다! 체크인은 /post 페이지로, 면제 티켓은 모달을 통해 2-step으로 처리할 예정이에요. 한 번 더 물어보는게 인지상정! 이니까요! ㅋㅋ
2. 유저 별 출석 페이지
유저 별 출석 페이지(/attend?name=ㅇㅇㅇ)에서는 자신의 이번 주 출석, 벌금 현황과 날짜를 클릭하면 그 날에 자신이 푼 문제를 볼 수 있어요. 처음엔 로그인이 개발될 줄도, 이렇게 큰 프로젝트가 될 지도 생각을 못했어서 이 페이지만 생겨날 줄 알았어요(ㅋㅋ) 문제 카드를 누르면 /problem/id 페이지로 넘어가게 됩니다.
이 페이지에 month/week 단위로 보기 기능도 넣어보고 싶은데, 진짜 너무 커질 것 같아서 일단 MVP부터 개발하고 이후에 천천히 추가해 볼 계획입니다. 이 페이지가 이 프로젝트를 시작하게 된 핵심이나 마찬가지라서 좀 더 많은 기능을 디벨롭해보고 싶은데 생각처럼 잘 아이디어가 떠오르지를 않네요🤔 개발하고, 사용해보면서 아이디어를 수집해야겠어요!
3. 문제 별 솔루션 모아보기 페이지
사실 이 페이지는 생각도 못했었는데요,, 같은 문제를 여러 명이 푸는 경우 즉, 한 문제에 여러 개의 솔루션이 생기는 경우를 고려해서 만들게 된 페이지입니다! 이 페이지에서는 간단히 문제에 관한 정보와 등록된 솔루션 목록을 확인할 수 있어요. 번호를 누르면 바로 백준 사이트로 연결되게 할 예정이에요. 다른 분들은 어떻게 풀었는지 솔루션을 참고할 때가 종종 있는데, 특정 언어로 푸신 분의 풀이를 바로 보고 싶을 때가 많았어요. 그래서 솔루션 property에 기존 노션에는 없던 '언어'를 추가했습니다! property가 3개뿐이라 좀 허전하긴 하네요,,
그래도 확실히 노션보다 솔루션 찾아보기에는 편할 것 같아요! 여기에 작성하다보니 문제 검색 기능도 만들면 좋겠네요! 후딱 추가해야겠어요,, (이렇게 또 프젝 규모가 커져가는 ...)
4. 체크인 페이지
기존 노션에서는 위에 보이는 것처럼 백준 번호, 문제 이름, 난이도, 문제 분류 등..을 직접 기록했어야 했는데요! 이번 프로젝트에서는 백준 번호만 입력하면 문제 정보는 크롤링을 통해 가져오도록 할 예정입니다! 유저 입장에서 정말 엄청난 편리함일 것 같습니다. 저는 난이도랑 문제 분류 하나하나 입력하는 게 정말 귀찮았거든요...... 기존에 있던 코멘트, 정답 코드 입력 란은 마크다운 UI 라이브러리를 사용할 예정입니다. 근데 얘를 솔루션 페이지에 어떻게 보여줄 지는 좀 더 생각해 보려구요! 마크다운 라이브러리는 처음 써보는 거라... 제법 설렙니다><
디자인을 저렇게 하게 된 이유나 계기를 설명하려고 했는데 어쩌다 보니 세미 기능명세서가 된 것 같은 느낌이네요! 그래도 다시 한번 기능들을 정리하면서 MVP와 기획 의도에서 벗어나지는 않았는지, 좀 더 필요한 기능은 없는지 확인하는 계기가 된 것 같아요. 나중에 이 글을 보면서 '아~ 이래서 이렇게 디자인했었는데'라는 생각이 든다면 이 글의 목적은 대성공이겠군요!
다음에는 개발 스택과 선택한 이유, 프로젝트하면서 이루고 싶은 목표나 성장 등등..에 대해 적어볼게요!
그럼 봐주셔서 감사합니다!
*｡*.。*∧,,,∧
ヾ(⌒(_=•ω•)_