1. 결과물 URL

https://auddnjs2008.github.io/To-Do-List---NomadCoder-Contest-/

 2.자기소개 

안녕하세요~! 이제 대학교 4학년 올라가는 26살 남학생입니다. 저는 컴퓨터공학과는 아니고 전자정보 쪽 과를 전공하고 있습니다. 아무래도 재수를 하고 성적에 맞추어 과에 들어오다 보니 진정으로 제가 뭘 하고 싶은지 몰랐습니다... 그래서 작년 1년 휴학을 결정했었습니다. 휴학 중 우연치 않게 유트브로 긴머리의 니코 선생님을 만나게 되었고 한번 해볼까? 라는 궁금증에 첫 html 페이지에 사각형을 그리고 animation을 적용시켜보면서  

너무 신기했고 내가 원하는 걸 이렇게 만 들수가 있구나 라는걸 느꼈습니다. 그 뒤로 어느새 저도 모르게 지금까지 니코 쌤 강의 들으면서 부족한 건 따로 찾고 계속 사이드 프로젝트를 하고 있네요... ㅎㅎㅎ! 지금은 웹프론트앤드 개발자가 꿈이 되었습니다. 물론 백앤드 지식도 어느정도 보유하고 있는!!      

3. 서비스 소개 

  사실 to do list를 어떻게 만들지 고민한 시간이 정말 길었습니다. 좀 색다른 to dolist를 만들고 싶었어요 그러다 제가 만든 사이드 프로젝트에서 영감을 받아 (https://admiring-shockley-9428b5.netlify.app/#/, 포켓몬 게임) 3d로 만들어 보면 재밌겠다 싶어서 만들어 보았습니다.   

처음 정보란에 들어가면 캐릭터와 이름을 설정할 수 있고 들어가면 밑의 화면이 나오는 걸 확인 할 수 있습니다.   

********* 설명서 *********  

  조작키는 게임과 비슷하게 방향키로 움직이면 되구요 밑에 사진에서 땅바닥에 있는 

아이콘들과 콘텐츠들 근처로 가면 색깔이 바뀌게 되는데 그 때 SpaceBar를누르면  

해당 기능을 사용 하 실 수 있습니다. (마우스 클릭은 불가능합니다....시간부족..)  

Write Plan => 계획추가 창이 뜬다. 

메세지 아이콘 => 캐릭터가 말하는 메세지 리스트를 수정하는 창이 뜬다.  

Dark Mode => 다크모드 기능을 껐다 켰다 할 수 있다.

화살표 아이콘 => 슬라이더 기능  

Write Plan이나 메세지 아이콘 근처에서 Space Bar를 누르면 다른 창이 나오는데  

그창을 ESC로 닫거나 close(마우스 click)로 닫으면 다시 캐릭터를 이동 할 수 있습니다.

-- 로그인하고 들어오면 보이는 화면 -- 

-- 메세지 아이콘근처에서 SPACE 누르면 보이는 화면-- (ESC나 close버튼으로 나간다) -- 위의 리스트들을 랜덤으로 캐릭터가 말을 해준다. 

 -- Write plan 에서 SPACE 누르면 보이는 화면 -- (ESC나 close 버튼으로 나간다)

4. 개발 과정

  3d 화면을 구현해야 하다 보니 일단 3dcss 에서 약간 애를 먹었습니다. 트랜스폼하는각도라든지 옆면과 뒷면이 찌그러지지 않고 잘 맞추어져야 하는지.. 그리고 무엇보다 

keydown 이벤트들이 많다 보니 이벤트들이 얽히고 얽혀서 꼬이는 경우도 많았습니다.

제일 어려웠던 점은 나의 캐릭터와 각각의 아이콘 또는 다른 요소와 근처인지를 판단하는 코드를 짤 떄 어려웠는데 3d transform이 시각적 효과로 이루어지다 보니까 각각의 dom들의 절대적 위치와 나의 캐릭터의 절대적 위치 (window를 기준으로 한) 사이를 구하기가 어려웠습니다. 지금도 약간 불확실 하다고 생각됩니다....ㅜㅜ 그래도 최대한 저의 수준선에서 맞추어 보았습니다..       

그리고 최대한 반응형으로 만들어 보았으나 이 부분도 좀 부족하다 생각됩니다. 

모바일 환경에서는 불가능하구요..

5. 앞으로의 계획 

아마 학교를 다시 다니게 되면서 바빠지겠지만 계속 꾸준히 할 생각입니다. 그리고 이번 to dolist를 만들면서 기본이 얼마나 중요한지 다시 느끼게 되었습니다. 다시 기본기를 공부할 필요가 있다고 느끼게 되었습니다....^^  

부족한 글 읽어주셔서 감사합니다.  

모두 만드시느라 고생많으셨고 모두 새해복 많이 받으세욥!!!!!