TigerCow.Door

안녕하세요. 문범우입니다.


최근 장고를 활용하면서 재밌는 아이디어 없을까 하다가..

졸업과 취업을 앞두고 있는 제가 생각나면서

학교 졸업 가능 여부를 일일이 확인하던 모습이 보였습니다.


이에 따라서 교내 행정정보시스템에서 성적표를 .xls파일로 다운 받고, 단순히 그 파일과 영어성적 입력으로 졸업가능 여부를 확인해주는 사이트를 개발하였습니다.


먼저 사이트 주소는 아래와 같습니다.


www.uos-info.com


해당 사이트는 django(2.0 version)를 이용하여 개발되었습니다.


aws ec2와, 도메인 설정을 위해 aws route53을 이용하였습니다.



일단은 제가 속해있는 전자전기컴퓨터공학부에 한해서 서비스가 제공되고 있지만

혹여나 다른 과나 학부에 의한 요청도 들어오면 추가해보도록 하겠습니다.


학교에서 필요로하는 졸업요건은 쉽게 확인이 가능하지만, 각 학과나 학부별로 다른 졸업요건을 제가 일일이 확인할 수가 없어서 서비스에 대한 필요를 말씀해주시는 학과 및 학부에 대해 서비스를 추가할 예정입니다.


해당 서비스에서는 단순하게 여러개의 rule-based를 기반으로 졸업 여부를 확인해줍니다.

시립대 전자전기컴퓨터학부의 경우에는 특정 세부 분야로 지정된 교양을 듣거나, 전공과목을 들어야 하는 조건이 있는데 이에 대해서는 서울시립대학교에서 open API로 제공하는 서비스로 요청을 보내서, 성적표에 있는 수업의 세부분야를 확인하거나 몇학년 몇학기 수업인지 확인하여 졸업요건에 해당하는지를 체크하는 식으로 구성되어 있습니다.


해당 사이트에 대해 추가적인 문의사항이나 건의사항이 있으신 분들은 언제든지 자유롭게 댓글 및 이메일을 통해서 연락주시면 감사하겠습니다.


블로그 이미지

Tigercow.Door

Data-Analysis / AI / back-end / Algorithm / DeepLearning / etc

안녕하세요. 문범우입니다.

최근에 방학을 맞이하면서 블로그에 글을 올리는 일이 줄어들었습니다.

방학동안 어떤 공부를 할지 계획도 세우고, 오늘 설명드릴 구글 어시스턴트 어플리케이션 개발을 마무리하느라 블로그 신경을 많이 못썼습니다.



1. 개발 동기


오늘 설명드릴 것은 말 그대로 구글 어시스턴트 어플리케이션 개발에 대한 후기입니다.


아직 구글 어시스턴트에 대해서 많은 분들이 잘 모르고 계시는데, 구글 어시스턴트는 17년 하반기에 한국어 버전이 오픈되었고 아마 안드로이드 버전 6.0이상에서는 따로 설치없이 기본적으로 제공되는 것으로 알고 있습니다.


아직 iOS에서는 한국어 버전이 따로 지원되지 않으나 해외에서는 지원되는 상태고 구글에서도 올해 안에 iOS 한국어 버전 구글 어시스턴트 어플을 출시할 계획이라고 하니 조금만 기다려보면 좋은 소식이 있을 듯 합니다.


최근 많은이들이 챗봇등에 관심을 갖게되면서 사실상 한국인이 제일 많이 사용하는 카카오톡 서비스를 이용하여 많은 챗봇을 개발하고 있습니다.

그리고 많은 중고등학생, 대학생 개발자들이 공부를 하면서 학교 식당 메뉴를 알려주는 챗봇도 함께 개발되고 있습니다.


저 또한 서울시립대학교에 재학중이면서 작년 겨울에 비슷한 아이디어를 가지고 인공지능 챗봇을 개발하였지만 기타 다른 상황의 문제로 인해 실제 서비스를 배포하지는 못했지만, 현재 서울시립대학교 식당 메뉴를 알려주는 기능을 가진 챗봇이 약 2개이상 있는 것으로 알고 있습니다.


저 또한 해당 서비스들을 학기중에 편하게 이용하였습니다.

그러던 와중 제가 아침마다 날씨등을 알기 위해 간편하게 음성인식을 통해 구글 어시스턴트 어플리케이션이라는 이용하면서, 이를 통해 그날의 메뉴를 알 수 있으면 조금 더 편리하지 않을까라는 생각을 하게 되었고, 바로 아는 후배와 함께 개발을 하게 되었습니다.

+ 구글 어시스턴트를 매우 많이 사용하는 동기놈의 압박도 있었습니다..:'( 



2-1. 구글 어시스턴트 사용 방법


아직 구글 어시스턴트에 대해서 잘 모르시는 분들께서는 그 편리함에 대해서 의문을 가질 수 있습니다. (아시는 분께서도 가지실 수 있으나.. 저와 친구는 특정 메신저에 접속하여 손으로 타이핑하는 것보다는 편하다고 생각하였습니다ㅎ..)


위에서 말씀드린대로 안드로이드 버전 6.0 이상에서는 구글 어시스턴트가 기본적으로 제공이 됩니다. 이를 이용하는 방법은 너무나 간단합니다.


초기 설정만 해두면 'Ok Google' 등의 음성으로 간편하게 호출할 수 있고 또는 홈버튼을 길게 눌러줌으로써 호출할 수 있습니다.

초기 설정이 필요하신 분들께서는 음성 호출은 불가하지만, 홈 버튼을 꾹 눌러주시면 구글 어시스턴트를 호출할 수 있습니다.


구글 어시스턴트에서 할 수 있는 다양한 기능은 작년 하반기에 한국어 버전이 출시되며 작성된 아래 글을 참고하셔도 좋습니다.


https://www.bloter.net/archives/290622


또한 최근에는 더 많은 기능들이 지속적으로 업데이트 중인 것으로 알고 있으니 사용해보시면서 구글 어시스턴트의 매력을 느껴보시면 좋을 것 같습니다.



2-2. 오늘학식 사용 방법


먼저 2-1 에서 설명드렸던, 구글 어시스턴트를 2가지 방법 중 아무것으로나 호출하면 다음과 같은 화면이 나오게 됩니다.

(초기 설정을 끝낸 상태입니다.)



모바일에서 위와 같은 화면이 뜨면 기본적으로 구글 어시스턴트의 기능을 사용할 수 있으며, 추가적인 구글 어시스턴트 어플을 사용할 수 있는 상태입니다.


이제 해당 화면에서 '오늘 학식'을 사용하기 위해서는 


오늘학식한테 말하기

오늘학식 불러줘

오늘학식에게 말하기


세가지 호출문을 사용하면 됩니다.


위의 호출문을 음성으로 말해도 되고, 좌측에 있는 키보드를 눌러 타이핑 하셔도 됩니다.


그리고 호출문이 입력되면 아래와 같이 '오늘 학식' 어플리케이션이 실행되는 것을 확인할 수 있습니다.



이제 여기서부터는 '오늘 학식' 어플리케이션에서 개발된 로직으로 사용자와 구글 어시스턴트가 대화하게 되는 과정입니다.


현재 '오늘 학식' 어플리케이션에서는 서울시립대학교의 건물별 식당 메뉴를 반환해주는 기능을 하고 있습니다.

보다 구체적으로는, 아래와 같이 식당이 있는 학생회관, 양식당, 대학본부, 생활관, 자연과학관의 엊그제, 어제, 오늘, 내일, 내일모레의 메뉴를 알 수 있습니다.


아직 개발 초기이기 때문에 부족한 점도 많을 수 있지만 지속적으로 개발을 이어나갈 예정이며 먼저 메뉴 반환에 대해 시간별로 나누거나, 메뉴 반환 이외의 다양한, 학생들의 편의를 위한 기능도 업데이트 예정 중에 있습니다.



3. 개발 후기


요새 많은 챗봇들에 대해 관심이 많아지면서 저 또한 작년 부터 관심을 많이 가졌습니다. 작년에 처음 인공지능 챗봇을 개발하면서 자연어 처리등에 대해 많은 어려움을 느꼈고, 아직은 어느정도의 규칙기반 틀에서 벗어날 수 없을 것이라고 생각했지만, 정말 짧은 시간안에 많은 부분들이 극복되며 매우 놀라운 챗봇들이 개발되고 있습니다.


그리고 그 가운데 구글 어시스턴트는 기본적으로 개발자에게 자연어 처리나 음성인식등의 기능을 제공해주고, 개발자는 아이디어를 생각하고 이를 구현하기만 하면 되었기에 생각보다 매우 수월하고 재미있는 경험이 되었습니다.


아직 익숙치 않은 자바스크립트로 개발을 진행해보았는데, 새로운 언어를 접해볼 겸 개발했던 것이 너무나 즐거운 경험이 된 것 같습니다.


현실상 해당 구글 어시스턴트 어플리케이션, 오늘학식을 매일매일 붙잡고 버그를 잡아내고, 업데이트를 할 수는 없겠지만 공부도 할겸, 조금이나마 학생들에게 편리한 서비스를 제공할겸 틈틈이 오류를 잡아내고 새로운 기능들을 업데이트 하려고 합니다.


발견되는 오류가 있거나 업데이트가 되었으면 하는 기능이 있다면 해당 어플 리뷰나 이메일로 의견 보내주시면 최대한 반영하여 빠른 시일내에 좋은 서비스를 제공해드리도록 하겠습니다.


또한 깊게 공부하며 엄청나게 어려운 것을 개발한 것은 아니지만 구글 어시스턴트 어플을 처음 개발하시는 분들께서 궁금하신점이나 잘 해결되지 않는 점이 있다면 언제든지 함께 고민해보도록 하겠습니다. 이메일이나 댓글로 남겨주시면 감사하겠습니다 :)



블로그 이미지

Tigercow.Door

Data-Analysis / AI / back-end / Algorithm / DeepLearning / etc


안녕하세요. 문범우입니다.

해당 포스팅은 서울시립대학교 멋쟁이사자처럼, 4월 1일 수업에 대한 내용입니다.


금일 수업에서는 그동안 진행했던 내용을 바탕으로 하나의 웹페이지를 그대로 따라 구현해보는 실습을 진행하였습니다.

따라서 해당 포스팅에 대한 순서는 아래와 같습니다.


- 지난 시간 복습

- 구현해 볼 웹 페이지 소개(HTML/CSS)

- Jquery 구현



1. 복습


지난 시간에는 주로 Jquery에 대해서 알아 보았습니다.

그 동안 html과 css로 구현한 웹 페이지는 정적인 형태였습니다.

이에 추가적으로 배워본 Jquery는 동적인 형태의 페이지를 구현하는데 사용됩니다.

예를 들어 메뉴 버튼에서 마우스를 가져간 항목의 글자가 더 찐해지거나 색상이 바뀌는 것, 무언가를 클릭했을 때 요소의 등장이나 사라짐등의 효과등을 구현합니다.


Jquery는 JavaScript기반의 라이브러리로써 우리가 단순히 JavaScript를 사용하여 동적인 페이지를 구현하는 것보다 더 간편하고 쉽게 동적인 페이지를 구현할 수 있도록 도와줍니다.

Jqeury에 대한 보다 자세한 내용은 지난 포스팅에 대한 내용을 참고하시길 바랍니다.

http://doorbw.tistory.com/119?category=697742



2. 구현해 볼 웹 페이지 소개(HTML/CSS)


이제 여러분들께서 그동안 배우고 공부해본 HTML과 CSS를 이용하여 하나의 페이지를 그대로 구현해 볼 것입니다.

Jquery를 이용해야 하는 부분도 있지만 그러한 것들은 잠시 내려두고 단순히 HTML과 CSS를 그대로 따라해봄으로써 우리가 웹페이지를 만들때 어떤식으로 구조를 잡아야하고 실제로 우리가 배운 속성들에 대해 연습해보는 경험이 될 것입니다.


우리가 보고 그대로 구현해 볼 웹 페이지는 아래와 같습니다.

http://themes.khaitawng.com/Regina/index.html


물론 처음 진행하시는 분들은 막막하고 어려울 수 있겠지만 그동안 배운 것들을 최대한 응용해보면서 구현하시면 가능할 것이라 생각됩니다.

서울시립대학교 멋쟁이사자처럼에서는 약 1시간30분동안 이것을 진행하였고 마처 완성하지 못한 부분은 과제로 진행하여 다음 수업까지 완성시켜서 오기로 하였습니다.


무작정 세부적으로 코드를 구현하는 것 보다는, div을 통해 구조를 잡으면서 필요한 class와 id를 적절히 선언해두고 전체적인 구조가 잡히면 하나씩 세부화시키는 연습이 필요합니다.


HTML과 CSS가 완료된 코드는 아래와 같습니다.

꼭! 미리 확인하기 보다 먼저 코드를 작성해보시길 바랍니다.

HTML/CSS 코드 보기(클릭)




3. JQuery구현


꼭 위의 2번과정을 통해 HTML과 CSS를 완성시키고 JQuery를 구현하시길 바랍니다.

이번 내용에서 다루게 될 JQuery내용은 지난 시간 포스팅에서 진행했던 내용과 크게 차이점은 없습니다.


우리가 보고 따라한 페이지에서는 크게 두가지의 jQuery효과가 있을 것입니다.

하나는 메뉴에 마우스를 가져갔을 때 해당 메뉴의 글씨가 검정색으로 변하는 효과와, More out team-> 이라는 메인 문구에 마우스를 가져갔을 때 해당 div의 배경은 검정색, 글씨는 하얀색으로 변하는 효과입니다.

두 효과모두 지난 포스팅에서 배웠던 내용이고, 비슷하기 때문에 첫번째 효과에 대해서만 설명드리도록 하겠습니다.


먼저 script로 둘러 쌓인 태그 내에서 아래와 같은 코드로 JQuery 준비를 시작합니다.


$(document).ready(function(){


});


이제 해당 코드 내부에 JQuery를 구현합니다.

먼저 생각해볼 점은,

1. 메뉴는 원래 회색글씨 -> 기본 css에서 default로 지정되어야 하는 값

2. 마우스를 올리면 검정글씨 -> mouseover시 css 변경

3. 마우스가 내려가면 다시 회색글씨 -> mouseout시 css 변경

이렇게 됩니다.

1번은 기본 css에서 적절히 구현하셨을 거라 생각하기에 2번과 3번을 JQuery로 구현해보겠습니다.


2번에 대한 코드는 아래와 같습니다.


1
2
3
4
5
$(document).ready(function(){
    $('.about, .team, .work, .blog, .contact').mouseover(function(){
        $(this).css('color','black');
    });
});
cs


위와 같이 코드를 구현하면 웹페이지에 메뉴에 마우스를 올렸을 때 해당 메뉴의 글씨가 검정색으로 변하는 것을 확인할 수 있습니다.

위의 코드에서 this라는 것이 쓰였는데, this는 앞에 있는 요소들을 그대로 가져오는데 사용됩니다.

그리고 3번을 추가적으로 구현하면, 마우스가 해당 메뉴를 벗어났을 때 다시 메뉴의 글씨가 회색으로 변할 것입니다.

3번까지 구현된 코드는 아래와 같습니다.


1
2
3
4
5
6
7
8
$(document).ready(function(){
    $('.about, .team, .work, .blog, .contact').mouseover(function(){
        $(this).css('color','black');
    });
    $('.about, .team, .work, .blog, .contact').mouseout(function(){
        $(this).css('color','gray');
    });
});
cs


이렇게 해서 메뉴에 마우스를 가져갔을 때, 해당 메뉴의 글씨가 검정색으로 변하면서 highlight와 같은 효과를 구현할 수 있습니다.

또한 같은 효과를 다른 방식의 코드로써 구현할 수 있는데 이는 아래와 같습니다.


1
2
3
4
5
6
$(document).ready(function(){
    $('.about, .team, .work, .blog, .contact').hover(
        function(){$(this).css('color','black')},
        function(){$(this).css('color','gray')}
    );
});
cs


위에서는 hover라는 함수를 사용하여, mouseover와 mouseout을 동시에 지정할 수 있습니다.


이렇게해서 4월1일의 서울시립대학교 멋쟁이사자처럼에 대한 수업의 정리가 되었습니다.

해당 수업에서는 무언가 알려드리는 것보다, 여러분들께서 직접 구현해보고 코드를 작성해보시는 것이 중심이 되었습니다. 다른분들께서도 꼭 코드를 직접 구현해보시길 바랍니다.

블로그 이미지

Tigercow.Door

Data-Analysis / AI / back-end / Algorithm / DeepLearning / etc