어떤 분야의 전문가가 되기 위해서는 최소한 1만 시간의 훈련이 필요하다는 법칙으로 알려진 '1만 시간의 법칙'에서 아이디어를 착안하여, 유저가 직접 희망하는 분야와 훈련시간을 기입하면 하루 훈련시간을 결과로 보여주는 페이지 입니다. 하루 훈련시간이 24시간을 넘어가면 경고창을 띄워줍니다.
결과 페이지에는 라이캣 캐릭터의 응원을 담은 모달창 띄워주기 버튼과 제작자의 훈련 기록이 담긴 블로그를 새 창에서 띄워주는 버튼이 있습니다.
응원을 담은 모달창에는 종료버튼이 있습니다.
(아래는 실제 서비스가 구현되는 깃헙 페이지 주소입니다.)
- 각각의 기기에 맞추어 반응형 웹을 구현하였습니다.
- 기능적인 부분은 추후 학습을 한 후에 구현하도록 레이아웃 작업만 해두었습니다.
- 상단에 보여지는 시계의 이미지를 구조적으로 의미가 덜하다고 생각되어 CSS로 배경처리 하였습니다.
- 한 줄을 위한 웹 폰트의 사용이 불필요하다고 느끼어 figma상에서 직접 이미지로 추출하였습니다.
- 실제로 서비스되는 실제감을 구현하기 위하여 파비콘을 적용하였습니다.
- 기능구현을 위해 결과를 나타내는 부분의 class추가와, input에 id를 추가하였습니다.
- 입력값을 받아 실제로 결과 화면을 띄워주는 기능을 구현하였습니다.
- 최종 결과 페이지인 모달 창 구현을 완료하였습니다.
- 모달 창에서의 폰트 사용이 반복되어 '텍스트 이미지' 추출에서 다시 웹 폰트 적용으로 교체하였습니다.
- 아래는 저의 작업물을 직접 캡쳐한 화면입니다.
