현재 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
블로그 이미지

humit

평범하면서 주변에서 흔히 볼 수 있는 공대생

댓글을 달아 주세요