[To-do list]설계 1일차 2021-03-25

[naro-Kim]

오늘 진행 사항

• [x] 과제용 개인 repository 생성
• [x] To-do list app reference design research
• [x] To-do list app 개발 참고 자료 탐색
• [x] 와이어프레임 (화면 설계서) 작성

Next

• [x] 기능 학습
• [x] 개발 참고자료 탐색 심화!
• [x] 화면 별 기능 명세서 작성

Comment

제 개발 실력이 어떤 기술을 탐색해야 할지, 어떻게 적용할지 알아가는 병아리 단계이기 때문에 기본적인 기능만 남기고 디자인을 다 뺐습니다,,

To-do 기능 종류 알아내고 학습 열심히 하기!

[Lai-khan]

오오 디자인 멋지네요!!

질문

아직 설계가 다 되지 않았다는 걸 알지만 그래도 지금까지 써놓은 부분에서 궁금한 것 좀 물어볼게요.

1. Edit 버튼을 누르면 내용(contents라고 써있는 부분)부터 카테고리와 우선순위 그리고 삭제까지 전부 다 수정할 수 있는건가요?
2. 저 밑에 Add to-do 버튼을 누르면 어떻게 되나요? 폼을 입력하는 페이지로 넘어가나요? 만약 그렇다면 기존 페이지는 어떻게 유지할 건가요?
3. 카테고리는 종류가 정해져있고 그중에서 선택하는 방식인가요? 아니면 내용처럼 텍스트로 입력하는 방식인가요?
4. 우선순위는 맨 위에 예시로 '급한거'라고 되어있는걸로 보아 숫자형태는 아닌것 같고 마찬가지로 카테고리를 두고 그중에서 선택하면 우선순위 -> ㄱㄴㄷ순으로 정렬할 생각인가요??
5. 디자인으로 보아 PC보다는 모바일에 맞는 형태로 보이는 데 모바일 웹 형태로 만드실 생각인가요?

[naro-Kim]

피드백 주셔서 너무 감사합니다..! 생각치않았거나 빼먹었던 부분도 많았네요. 지금 생각한 상태에서의 답변을 드리겠습니다.

답변

1. Edit 버튼을 누르면 내용(contents라고 써있는 부분)부터 카테고리와 우선순위 그리고 삭제까지 전부 다 수정할 수 있는건가요?

• Edit 버튼의 기능을 제가 자세히 적지 않았는데요, 일단 현재까지 구상한 것으론 edit 아이콘을 누르면, 편집 대기상태로 페이지가 넘어가서
  1. Input란의 텍스트를 클릭해 바로 수정하는 기능
  2. 카테고리 / 우선순위 라벨을 클릭해 정해진 라벨 중에 골라 설정을 완료하는 기능
  3. Task 자체를 삭제하는 기능 이 세가지를 수행하는 것으로 생각했습니다.

2. 저 밑에 Add to-do 버튼을 누르면 어떻게 되나요? 폼을 입력하는 페이지로 넘어가나요? 만약 그렇다면 기존 페이지는 어떻게 유지할 건가요?

• Add-To-do버튼을 누르면, Add-to-do가 올라가면서 아래에 첨부한 이미지 처럼 Input 영역으로 전환되고, 키보드가 활성화되는 것으로 생각했습니다 *(키보드 활성화가 어떻게 가능한지 아직 판단이 안되지만 튜토리얼을 참고해 넣어보았습니다.. 남은 학습 기간동안 더 찾아보아야 할텐데 혹시 추천해주시는 키워드가 있으면 해당 키워드로 찾아보겠습니다!)

3. 카테고리는 종류가 정해져있고 그중에서 선택하는 방식인가요? 아니면 내용처럼 텍스트로 입력하는 방식인가요?

   • 지금 단계에선 카테고리는 종류가 정해져 있고 선택하는 방식으로 생각했습니다! 추후 가능하다면 노션이나 깃헙 라벨처럼 직접 입력하고 저장할 수 있는 형태로 발전시키고싶습니다.

4. 우선순위는 맨 위에 예시로 '급한거'라고 되어있는걸로 보아 숫자형태는 아닌것 같고 마찬가지로 카테고리를 두고 그중에서 선택하면 우선순위 -> ㄱㄴㄷ순으로 정렬할 생각인가요??

   • 말그대로 급한 순위 (ex/ High - Medium - Low) 이런 식으로 정렬하고자 했습니다.

5. 디자인으로 보아 PC보다는 모바일에 맞는 형태로 보이는 데 모바일 웹 형태로 만드실 생각인가요?

   • 네, 일단은 첫 프로젝트인지라 저한테 디자인 + 튜토리얼이 익숙한 모바일 웹 형태로 만들 생각입니다,,

++ 수정) 그런데 5번 질문에 대해 가만 생각해보니 시작부터 탄탄히 웹 개발쪽에 파고드는게 나중에 만들고픈 서비스에 더 도움이 될 것 같은데..또 앱을 토대로 iOS개발도 배워두고 싶고 선택의 기로인 것 같네요.. (˚ ˃̣̣̥᷄ω˂̣̣̥᷅ ) 내일까지 학습을 더 진행한 후, 더 확실하도록 업데이트 하겠습니다!

[Lai-khan]

Add-To-do버튼을 누르면, Add-to-do가 올라가면서 아래에 첨부한 이미지 처럼 Input 영역으로 전환되고, 키보드가 활성화되는 것으로 생각했습니다 *(키보드 활성화가 어떻게 가능한지 아직 판단이 안되지만 튜토리얼을 참고해 넣어보았습니다.. 남은 학습 기간동안 더 찾아보아야 할텐데 혹시 추천해주시는 키워드가 있으면 해당 키워드로 찾아보겠습니다!)

• 키보드 활성화는 그냥 input 영역을 클릭하면 되지 않나요?? 어떤 걸 구현하고 싶으신걸까요?ㅎㅎ

그런데 5번 질문에 대해 가만 생각해보니 시작부터 탄탄히 웹 개발쪽에 파고드는게 나중에 만들고픈 서비스에 더 도움이 될 것 같은데..또 앱을 토대로 iOS개발도 배워두고 싶고 선택의 기로인 것 같네요.. (˚ ˃̣̣̥᷄ω˂̣̣̥᷅ ) 내일까지 학습을 더 진행한 후, 더 확실하도록 업데이트 하겠습니다!

• 뭐 엄밀히 말하자면 모바일 웹이라는 것은 앱과 같은 말이 아닙니다. 앱은 구글플레이스토어나 애플앱스토어에서 다운받아서 스마트폰 어플리케이션 형태로 설치할 수 있는 것을 말하고, 모바일 웹은 그냥 스마트폰에서 브라우저를 통해 해당 웹사이트에 접속을 했을 때, 더 편하게 사용할 수 있도록 모바일 화면 크기에 맞도록 구현한 웹사이트를 말합니다. (안그러면 모바일에서 PC버전 보듯이 불편하거든요.)
• 모바일 웹도 웹입니다. 다만 모바일 화면에 특화되어있다고 보시면 됩니다. (예시: https://m.naver.com/)

[naro-Kim]

• 인풋 영역 onclick만으로 키보드가 올라오나요..!? 디자인으로 작업할 때에는, 키보드 영역이 올라오기 전 후의 페이지를 모두 만들어야 했어서 onclick시 키보드가 위로 올라오면, 인풋 영역도 같이 올라가는 등.. css 수정을 해야하지않나 생각했었습니다..! 그럴 필요가 없이, input 클릭만으로 UI정리가 되나요..? 제가 생각한 화면 변화는 아래와 같습니다! (이 부분은 저도 더 찾아보겠습니다)

• 네네! 모바일웹이 앱과 다르단 것은 알고 있지만, UI나 UX에 있어서 PC 웹과는 차이가 있어서 답변할 때 앱과 가까운 개념으로 제가 용어를 혼재해서 쓴 것 같네요. 구체적인 예시까지 들어주셔서 감사합니다! 반응형으로, PC와 모바일 둘 다 커버할 수 있게 조절해보겠습니다.

[Lai-khan]

• 저 Add To-do 버튼을 눌렀을 때, input 영역으로 바뀌는 부분은 별도 JS 처리가 필요해보이네요.
• 그 외에는 저기 contents 부분과 input 사이가 html 상으로 비어있는 부분이라면, input을 클릭했을 때 자동으로 위로 올라갈 것 같습니다. 저도 이 부분은 직접 구현에 들어가봐야 정확히 알 수 있을 것 같네요.