사실 프론트에 국한되는 내용은 아니고, 모든 개발 영역에서 신경써야 하는 내용입니다만 프론트 위주로 설명해 보겠습니다.
클릭 가능한 영역의 경우 cursor: pointer를 넣어서 "클릭 가능하다는" 걸 표현하는 것
버튼이 호버되었을 때 배경 색이 변한다면, transition 을 살짝 넣어 주는 것
전화번호 (혹은 주민번호, 카드번호) 입력의 경우 자동으로 하이픈이 들어가게 하고, 최대 길이가 넘어가면 더 이상 입력 안 되게 하는 것
저장, 삭제 등의 기능 이후 토스트 띄워주는 것
잘못된 url을 입력했을 경우 redirect하거나 404 페이지를 띄우는 것
리스트가 비었을 때 placeholder item 이미지를 넣어 주는 것
로딩 중일 때 로딩 뷰를 띄우는 것
엔터 (또는 cmd + enter) 치면 폼 제출 (저장이든 로그인이든 댓글 입력이든)되게 하는 것
폼 제출했으면 입력중인 폼 clear 또는 reset하는 것
일을 하다 보면 디자이너가 피그마로 디자인을 주고 기획자가 기획안을 주지만, 그럼에도 결국 결과물은 개발자 손으로 만드는 것이기 때문에 필연적으로 최종적인 디자인과 기능은 개발자가 결정하게 됩니다. 대부분의 회사는 아주 코어하지 않은 이상 스펙을 그렇게까지 상세하게 줄 여유가 있지 않습니다. 위 항목들 중 몇몇은 디자이너가 만들어 주겠지만, 없으면 개발자가 알아서 넣거나 - 아니면 디자이너에게 따로 요청해야 합니다.
학생 목록 없을 때 노아이템 뷰 어떤 이미지로 하면 될까요?
사실 위 내용들이 로직상 어려운 내용은 전혀 아니고, 보통은 한두 줄 추가해서 구현할 수 있는 내용이지만 그런 사소한 차이들 하나하나가 매우 중요하니 참고해 주세요!
사실 프론트에 국한되는 내용은 아니고, 모든 개발 영역에서 신경써야 하는 내용입니다만 프론트 위주로 설명해 보겠습니다.
cursor: pointer를 넣어서 "클릭 가능하다는" 걸 표현하는 것transition을 살짝 넣어 주는 것일을 하다 보면 디자이너가 피그마로 디자인을 주고 기획자가 기획안을 주지만, 그럼에도 결국 결과물은 개발자 손으로 만드는 것이기 때문에 필연적으로 최종적인 디자인과 기능은 개발자가 결정하게 됩니다. 대부분의 회사는 아주 코어하지 않은 이상 스펙을 그렇게까지 상세하게 줄 여유가 있지 않습니다. 위 항목들 중 몇몇은 디자이너가 만들어 주겠지만, 없으면 개발자가 알아서 넣거나 - 아니면 디자이너에게 따로 요청해야 합니다.
사실 위 내용들이 로직상 어려운 내용은 전혀 아니고, 보통은 한두 줄 추가해서 구현할 수 있는 내용이지만 그런 사소한 차이들 하나하나가 매우 중요하니 참고해 주세요!