본문 바로가기

일상/개발 일지

카카오톡 자동응답 템플릿 제작중..

현재 github에 올라가 있는 카카오톡 자동응답의 경우에는 css를 거의 적용하지 않아서 디자인적인 측면을 거의 고려하지 않고, 단순히 기능 구현에만 치중하였다.


https://github.com/humit0/kakao_auto_reply/issues/1


여기에서 UI가 너무 딱딱하다는 말을 보고, UI를 좀 더 새롭게 꾸며보자라는 측면에서 템플릿을 제작하기 시작했다.


처음에는 Bootstrap을 사용해서 디자인을 꾸밀까도 생각을 해보았는데, 이왕이면 다른 라이브러리를 사용해보는 것이 어떨지 생각을 해서 사용을 한 것이 Materializecss이다.


구글의 디자인패턴인 Material을 구현하는데 편리하다는 장점이 있으며 Bootstrap에 비해서 좀 더 지원을 해주는 component가 많다는 점이 있다. 하지만 Form에 있어서 약간의 취향이 갈릴 수 있는데, Materializecss의 경우에는 input form이 상자가 아닌 밑줄로 되어 있어서 호불호가 갈릴 수 있는 디자인이다.


어쨌든 Materializecss로 UI를 수정한 것이 아래와 같다.


1. 로그인 화면


2. 버튼 추가하기 화면



3. Home Keyboard 설정 화면



4. 파일명 찾기 화면



5. 자동 응답 테스트 화면



대강 이렇게 해서 템플릿 제작은 마쳤고 이제 이 템플릿을 맞게 적용을 하기만 하면 된다.


'일상 > 개발 일지' 카테고리의 다른 글

네이버 블로그 이미지  (1) 2016.09.19
네이버 로그인 뜯어보기  (0) 2016.08.11
카카오톡 자동응답 템플릿 제작중..  (4) 2016.08.10
  • 심심이 2016.10.03 16:17 신고 댓글주소 수정/삭제 댓글쓰기

    배포계획은 없으신가요?

  • 궁금해 2017.10.06 15:10 신고 댓글주소 수정/삭제 댓글쓰기

    깃허브 최신 버전이 MaterializeCSS 적용된건가요? 아닌거 같아서요.
    강좌는 주사위 이후 더 없네요.
    강좌 이어서 해주실 계획 있으신지요?
    날씨정보 연동하기 부분이 궁금한데 부탁 드립니다.

    • 네 적용이 된 파일입니다. 참고로 MaterializeCSS는 관리자 페이지에서만 할 수 있도록 해놓았습니다.

      그리고 현재 군복무중이라 강좌는 오래 걸릴 것 같습니다 ㅠㅠ..