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


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


어느덧 날씨가 더워지는 5월!

대학생들에게 5월에 빼놓을 수 없는 행사 중 하나는 대학 축제죠?

그래서 우리 서울시립대학교 멋쟁이사자처럼에서는 축제 안내사이트를 제작해보았습니다.


먼저, 완성된 사이트는 아래 주소를 클릭하시면 됩니다.!


http://uos.likelion.org


웹으로 보시는 분들은 이게뭐지..? 할 수도 있어요 :'(

간단하게 정보를 제공받고, 확인하기 위해 모바일에서 보았을 때 이쁘도록 제작되었기 때문에 모바일로 확인하시는 것을 추천드립니다!






해당 사이트를 개발하면서, 저는 전체적인 기획 및 총괄, 백엔드 구성, 행사화면 제작을 담당하였습니다.

초기에 개발에 참여하고자 인원들을 신청받고, 개발 목표와 의도, 범위 등을 설정하였습니다.

이에 대한 전체적인 내용은 아래, 축제 사이트 개발 github 을 통해 확인하실 수 있습니다 :)


https://github.com/doorBW/UOS_festival


처음에는 어떤 구조로, 어떤 디자인으로 할지 너무나 막막했으나, 우리 멋쟁이 사자처럼 6기들과 함께 이야기하고, 아이디어를 주고 받으며 기초적인 구조를 잡았습니다.

이후 초기 프론트 담당인원들이 세부적인 디자인을 기획하고, 백엔드 담당인원들은 각 페이지 구성을 진행하였습니다.

시간이 지나고 보니 백엔드 분야로 처리할 것이 거의 없어서, 백엔드 인원을 모두 프론트로 참여시켜서 개발을 진행하였습니다.

인원당 하나의 페이지를 만들고, 만들어진 페이지를 백엔드 담당인원이 받아서 전체적으로 연결시키는 등의 방식으로 개발이 진행되었습니다.


사이트 내에서 엄청나게 대단한 기술이나, 효과는 없지만 처음으로 실질적으로 배포되는 서비스 페이지를 개발하는 멋쟁이 사자처럼 6기 인원들에게는 매우 큰 도움이 되었을 것이라고 생각합니다. :)


물론 저도 오랜만에 오랜시간동안 함께 협업함으로써 서로 이야기하고, 아이디어를 나누며 개발하는 일을 하게 되어서 너무나 신나게 작업하였습니다.


개발에 참여한 멋쟁이 사자처럼 6기 모두 수고하셨습니다 :)


- 추가적으로 사이트 자체 또는 사이트 개발에 대한 모든 문의는 댓글을 달아주시거나 공지사항을 통해 저의 개인 이메일 또는 카카오톡을 통해서 연락주세요!


블로그 이미지

Tigercow.Door

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

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

4월 2일에 페이지 제작 실습(2)를 포스팅을 한 이후에 오랜만에 정리하는 것 같네요.

그 동안 서울시립대학교 멋쟁이사자처럼에서는 수업을 진행했으나, 새로운 걸 배우기 보다 그 동안 배웠던 내용을 토대로 특정 웹페이지들을 선정하여 그대로 만들어보고, 더 나아가 새롭게 JQuery를 적용해 보는 등의 수업을 진행하였습니다.

이전의 포스팅들에서 모두 다루었던 내용들이기 때문에 따로 포스팅은 하지 않았습니다.


그리고 4월 8일 일요일수업에서는 Ruby on Rails 수업을 시작하였습니다.

아직은 local(자신의 컴퓨터) 자체 환경에서 진행하지 않고, Cloud9 이라는 서비스를 이용하여 진행합니다.

따라서 해당 포스팅은 아래와 같은 순서로 진행될 예정입니다.


- Ruby on Rails 이란

- MVC pattern

- Cloud9 이용하기

- Ruby on Rails 버전 확인 및 버전 변경

- Ruby on Rails 기초



1. Ruby on Rails 이란



Ruby on Rails 이란 쉽게 말해서 Ruby 라는 프로그래밍 언어를 기반으로 한 MVC패턴의 프레임워크입니다.

Ruby, MVC패턴, 프레임워크.. 모두 처음 들어보셨을텐데요, 하나씩 간단하게 알아보도록 하겠습니다.


먼저, Ruby란 프로그래밍 언어의 하나입니다.

혹시 C, Java, Python 등에 대해서 들어보셨나요? 모두 프로그래밍 언어들 입니다. 즉 우리가 사용하는 언어가 한국어, 영어, 일본어 등 여러개가 있듯 컴퓨터에게도 컴퓨터가 이해할 수 있는 여러가지 언어가 있습니다. 그리고 Ruby 는 그 중 하나인 것입니다.

재미있는 점은, Ruby 언어의 철학 중 하나가, 스트레스 없는! 즐거운 프로그래밍이라는 것입니다. 나중에 직접 사용해보시면 느끼시겠지만 이러한 철학대로 루비는 매우 직관적이고 이해하기 쉬운 문법 구조를 가지고 있습니다.

따라서 코딩을 처음하시는 분들, 비전공자 분들도 쉽고 빠르게 익히실 수 있는 장점이 있습니다.

또한 세계적으로 정말 많이 사용하는 언어이기도 합니다 :)


그럼 MVC전에, 프레임워크에 대해서 알아볼게요.

프레임워크(Frame-work)란, 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조이며, 소프트웨어 개발에 있어서 하나의 큰 뼈대역할을 해준다. 라고 나무위키에 나와있습니다.

쉽게 말해서, 우리는 웹 어플리케이션을 만드려고 하고있죠?

이러한 상황에서 프레임워크는, 우리가 웹 어플리케이션을 만드는데 보다 쉽고 빠르고 멋있게 만드는데 도움을 주는 녀석이라고 생각할 수 있습니다.

예를 들어보면, 여러분들이 발표자료를 만들 때 PPT를 처음부터 다 디자인하고 만들면 물론 좋겠지만, PPT가 처음인 분들에게는 매우 어렵고 낯선 작업일 수 있습니다. 이럴때 우리는 보다 쉽게 만들기 위해서 템플릿이라는 것을 통해 만들어 내곤하죠? 쉽게 생각해서 프레임워크가 이러한 템플릿역할을 한다고 생각하시면 됩니다.

웹 어플리케이션을 아예 처음부터 만드는데에는 보안이나 구조등에 대해서 매우 신경쓸일이 많고 작업해야 할 것들도 매우 많습니다.

따라서 우리는 고급개발자분들께서 만들어 놓은 프레임워크를 이용하여 빠르고 쉽게 웹 어플리케이션을 만들게 됩니다.


그럼 다시한번, Ruby on rails 는 뭘까요?

처음에 말씀드렸듯이 Ruby on rails는 Ruby 라는 언어를 기반으로 한 프레임워크입니다. 즉, Ruby 언어를 이용해서 웹 어플리케이션을 보다 쉽게 만들수 있도록 돕는 것이라고 할 수 있겠습니다.


우리 멋쟁이사자처럼에서는 Ruby 언어에 대한 문법수업을 따로 진행하지 않고, Ruby on Rails 를 이용하며 웹 어플리케이션을 만들면서 그때 그때 필요한 문법들을 공부해볼거에요.

위에서 말씀드렸듯이 Ruby는 매우 직관적이고 이해하기 쉬운 문법 구조를 가졌기 때문에 너무 걱정하지 않으셔도 괜찮습니다.



2. MVC pattern



전체적인 MVC패턴을 나타내면 위의 그림과 같습니다.


저의 블로그를 예시로 한번 생각해볼게요.

먼저 제 블로그의 메인화면으로 오려면 우리는 주소창에 

http://doorbw.tistory.com/

이라는 URL을 입력합니다.

이것이 요청을 보내는 것입니다.

'서버야, 나한테 http://doorbw.tistory.com/ 주소를 가진 웹 어플리케이션을 보여줘!' 라는식으로 요청을 보내는 것이죠.

해당 요청을 받은 서버에서는 주로 MVC(Model View Controller)패턴으로 이루어져 있습니다.


먼저 요청을 받은 Controller는

'그래, 잠깐만! Model아 http://doorbw.tistory.com/ 주소에 맞는 모델을 찾아줘' 라고 Model 한테 요청에 대한 결과 값을 찾도록 지시합니다.


즉, Model은 Controller의 요청에 따른 데이터를 찾아서 알맞은 데이터를 Controller 한테 보내줍니다.

'Controller야 너가 요청에 대한 데이터 여기있어!'

이때 Model 은 데이터베이스, 변수, 초기화 값 또는 이런 데이터를 가공하는 컴포넌트를 이야기합니다.


그럼 해당 데이터를 받은 Controller는 이것을 View에게 전달합니다.

'View야 여기 사용자가 요청한 데이터야!'


이렇게 해서 데이터를 받은 View는 실제로 사용자에게 시각적으로 http://doorbw.tistory.com/에 대한 화면을 응답으로 나타냅니다.


이것이 전체적인 MVC 패턴의 과정입니다.

우리는 그동안 HTML과 CSS, JavaScript를 공부하면서 시각적인 프론트엔드(Frontend)를 배웠습니다.

그리고 이제 Controller 와 Model에 대해서 배워 볼 것인데 이것을 Ruby on rails라는 프레임워크를 통해서 배워볼 것입니다.



3. Cloud9 이용하기



우리는 위에서 설명드린 Ruby on Rails 를 이용하기 위해 Cloud9 IDE 서비스를 이용합니다.

Cloud9 IDE 서비스는 간단하게, 가상컴퓨터, 가상환경을 제공해주는 서비스라고 생각하시면 됩니다.

우리의 노트북, 컴퓨터도 있는데 이런 서비스를 이용하는 이유는, Ruby on Rails가 윈도우환경에서는 설치하는 작업등이 약간 까다롭기 때문입니다.

그럼 Cloud9 에서는 쉽나요?

네, 쉽습니다. 우리가 Cloud9 IDE에서 하나의 가상환경을 만들때 Ruby on Rails 를 이용할 것이라고 명시해주면 Ruby on Rails를 이용할 수 있는 기본적인 환경을 다 셋팅해주기 때문에 매우 간편합니다.


그런데 작년기준으로 aws에서 Cloud9(이하 c9)을 인수하게 되어서 현재는 aws c9 과 기존 c9 두개의 서비스가 존재하고 있습니다.

기존 c9유저는 그대로 이용가능하나 신규가입은 불가합니다.

이와 다르게 aws c9은 신규가입이 가능하지만 워크스페이스를 1개 밖에 못만든다는 단점이 있습니다.


현재 멋쟁이사자처럼에서는 aws c9을 이용하여 수업을 진행하고 있는데, 저희 서울시립대학교 멋쟁이사자처럼에서는 기존의 c9을 이용합니다.

신규가입이 불가능하지만, 기존 유저가 c9에서 pro로 업그레이드하며 매달 결제를 하면 기존유저뿐 아니라 신규유저를 초대하여 함께 이용가능합니다.

따라서 본 포스팅에서는 기존 c9을 이용합니다.

(aws c9을 이용하시는 분들도 내용에 있어서는 차이가 없지만, 새롭게 워크스페이스를 만드는 것이 불가할 뿐입니다.)


현재 서울시립대학교 멋쟁이사자처럼 6기분들에게는 uos_likelion이라는 팀 이름으로 초대메일이 갔을 것입니다.

해당 메일을 확인하고 링크를 통해 c9에 가입하시길 바랍니다.


가입후에 아래와 같은 화면이 뜨게 됩니다.



좌측에 있는 파란색 목차중에 uoslikelion이라는 팀이 있는 걸 확인하세요.

(서울시립대 분들 중 해당 항목이 나타나지 않는 분들은 연락바랍니다.)


팀을 확인했으면, Workspaces에서 + 버튼을 눌러 새로운 워크스페이스를 만듭니다.



그리고 위의 내용처럼, 워크스페이스의 이름을 작성해주시고(주황색이 뜨면 안됩니다. 첫번째 글자는 숫자가 불가하다는 등의 규칙이 있습니다.) 그 아래 Team에서 uoslikelion을 선택하고, 아래 템플릿을 고르는 곳에서 Ruby를 선택해주시길 바랍니다.

이후 아래에 있는 초록색 버튼을 눌러 워크스페이스를 생성합니다.

약간의 시간이 소요될 수 있습니다.



워크스페이스가 생성되면 위와 같은 창이 뜨게 됩니다.

좌측에 보면 다양한 폴더와 파일들이 있을 텐데, 한번에 다 설명드리는 것보다 필요한 것들에 대해서 그때그때 설명드리려고 합니다.

이렇게 해서 Ruby on Rails 기반의 c9 워크스페이스 생성을 진행했습니다.



4. Ruby on Rails

    버전 확인 및 버전 변경


여러분께서 이용하시는 특정 프로그램에도 버전이 있듯이, Ruby on Rails 라는 프레임워크에도 당연히 버전이 있습니다.

그럼 방금 우리가 생성한 워크스페이스의 Ruby on Rails의 버전을 확인해보겠습니다.

워크스페이스에서 아래부분(기본적으로는 파란색)을 보시면 bash 라는 탭이 눌러져 있습니다.

해당 탭은, 우리가 윈도우에서 사용하는 cmd(맥에서는 터미널), 프롬프트와도 같은 것입니다. 여기에 특정 명령어들을 입력해서 몇가지 작업을 합니다.

bash 창이라는 이름을 기억해두시길 바래요.


이제 버전확인을 위해서 bash창에 아래와 같은 명령어를 입력합니다


rails -v



명령어를 입력하면 위와 같이 Rails 4.2.5 라고 버전을 알려줍니다.

(aws c9을 이용하시는 분들은 5.~ 버전이 나올 것입니다. 추가적인 버전 변경없이 그대로 사용하셔도 되고 버전변경 하셔도 상관없습니다.)


이제 이 Rails의 버전을 5.0.6 으로 올려야 합니다.

최신버전은 더 높지만, 현재 멋쟁이사자처럼 메인강의에서 5.0.6버전으로 진행하기때문에 해당 버전으로 올리도록 하겠습니다.


워크스페이스 좌측 폴더 및 파일 목록에서 Gemfile 이라는 파일을 더블클릭합니다.




그럼 위와 같은 코드가 작성된 파일이 열립니다.

여기서 5번째줄을 보시면 gem 'rails', '4.2.5' 라고 적혀있을텐데 이것을 위의 그림의 코드처럼 gem 'rails', '5.0.6' 으로 바꿉니다.

그리고 컨트롤+s (맥: 커맨드+s) 를 눌러서 저장합니다.

위 그림에서 탭칸쪽을 보시면 Gemfile이라는 파일 옆에 회색 동그라미가 보이는데 이것은 수정되었지만 저장되지 않았다를 표시해주는 것입니다.


저장을 하고 난 후에 bash 창에 아래와 같은 명령어를 입력합니다.


bundle update



해당 명령어를 입력하면 무언가 계속 진행됩니다.

약간의 시간이 소요되니 잠시 기다리면 됩니다.

기다리고 나서 다시 입력할 수 있는 상태가 되면 아래와 같이 버전을 확인해봅니다.



레일즈의 버전이 5.0.6으로 변경된 것을 확인할 수 있습니다.



5. Ruby on Rails 기초


이제 Ruby on Rails 의 기초를 배워보겠습니다.

우리가 위에서 MVC 패턴에 대해서 알아보았는데, 이제 직접 컨트롤러를 만들어보고 약간의 확인해보도록 하겠습니다.

컨트롤러를 만들때는 bash 창에 아래와 같은 명령어를 입력해서 만듭니다.


rails generate controller home index


위의 명령어는 home 이라는 이름을 가진 controller 를 생성하는 명령어입니다. 이때 home 은 단순히 컨트롤러의 이름이기 때문에 여러분들께서 편하신대로 설정하셔도 됩니다. 또한 그 뒤에 있는 index 를 함께 만들어주는 옵션입니다. index에 대해서는 추후 공부해볼 것이니 일단 그대로 써줍니다.



위와 같이 명령어를 입력하면 bash 창에서도 뭐가 막 생기는 걸 볼 수 있고, 실제로 좌측 목록에서도 새로운 파일이나 폴더들이 생긴것을 확인할 수 있습니다.

혹시 컨트롤러의 이름을 잘못 입력하거나 잘못 만들었다 하시는 분들은 어떻게 할까요?

새로생긴 파일들을 하나하나 찾아서 지우는 것이 아니라 하나의 명령어로 간단히 지울 수 있습니다.

만약 컨트롤러를 지우고 싶을땐 아래와 같은 명령어를 입력합니다.


rails destroy controller home index


물론 home은 여러분께서 지우고자 하는 컨트롤러의 이름입니다.


이제 실제로 컨트롤러를 약간 사용해보겠습니다.

좌측 목록에서 app > controller > home_controller.rb 파일을 더블클릭합니다.



위와 같이 class 와 def 가 쓰여진 코드를 확인할 수 있습니다.

해당 파일은, home이라는 컨트롤러에 대해서 진행할 작업을 코드로 작성해주는 곳입니다.

구체적으로는 추후에 천천히 배우도록 하고 간단하게 Controller 에서 view로 변수를 전달해보도록 하겠습니다.

아래와 같이 위의 파일에 코드를 작성합니다.



코드에서도 쓰였듯이, local_var 와 @global_var 라는 것을 만들고 문자열을 대입해주었습니다.

의미상으로 정확히 지역변수, 전역변수와는 좀 다르지만 이해를 위해 일단 저렇게 네이밍을 해보았습니다.

이때 두 변수의 차이가 있는데 view에서도 사용되는 변수라고 되있는 변수는 이름앞에 @ 가 붙어있습니다.

우리가 컨트롤러 내에서 자체적으로 변수를 사용하여 작업할 때도 있지만, 당연히 컨트롤러에서 나온 데이터를 view 로 넘겨줘야할 때도 있습니다.

이럴때 view 로 넘기고자 하는 변수의 이름 앞에 @ 를 붙여야 합니다.


그럼 @ 를 붙인 변수를 사용해보도록 하겠습니다.

app > view > home > index.html.erb 라는 파일을 더블클릭합니다.



해당 파일을 열면 1번과 2번 줄의 코드만 작성되어 있습니다.

우리가 그동안 학습했던, 익숙한 html의 코드입니다.

이제 여기에 우리가 아까 컨트롤러에서 넘긴 변수를 사용해 볼 것입니다.

다시한번 파일명을 보시면 단순히 .html 로 끝나는 것이 아니라 그 뒤에 .erb 라고 되어 있습니다. 해당 확장자는 html 파일에서 ruby 언어를 알아들을 수 있도록 하는 것입니다.

그럼 어떻게 ruby 언어를 사용할까요?

위 그림의 3번째 줄을 보시면 


<%= @global_var %>


와 같이 작성되어 있습니다. 이 처럼 ruby 언어를 사용하기 위해서는 

<%=  %> 로 작성하고자 하는 ruby 코드를 묶어줘야합니다.

또한 추후에 배울 반복문(for 등)을 사용하기 위해서는 약간 다른,

<% %>와 같은 구조를 사용하는데 이건 나중에 더 자세히 다뤄보도록 하겠습니다.

위의 그림처럼 3번째줄에 코드를 작성하고, 실제로 잘 나오는지 확인해보도록 하겠습니다.


워크스페이스의 상단을 보시면 run project 가 있습니다.

해당 버튼을 누르면 아래 bash가 있던 창에 새로운 탭이 열리며 아래와 같이 뜹니다.



해당 창은 실행되고 있는 우리의 웹페이지를 일시적으로 배포해준 것에 대한 창입니다.

해당 창을 확인해보시면, Your code is running at ~

이라는 부분의 주소를 클릭하여 open 을 누릅니다.

그리고 주황색의 무슨 창이 뜨시면, open app 을 누릅니다.

(안떠도 상관없습니다.)

그러면 아래와 같은 화면이 뜹니다.


여기서 주소창 맨뒤에, /home/index 를 입력합니다.

저같은 경우엔 

https://review-0408-doorbw.c9users.io/home/index

가 되겠습니다.

그럼 아래와 같은 페이지가 뜨게됩니다.


우리가 컨트롤러에서 넘겨서 html 파일에서 사용한 @global_var 가 정상적으로 출력되어야합니다.


여기서, 첫 화면에서 위의 화면이 뜨지 않고 home/index 를 입력해야 하는 것은 route 설정과 관련되어 있습니다.

이에 대해서는 추후에 공부해보도록 하겠습니다.



이렇게 해당 포스팅부터는 새로운 back-end에 대해서, 그 중에서도 ruby on rails 에 대한 시작을 하였습니다.

해당 포스팅과 관련이 없어도 궁금하거나 의문이 생기는 부분이 있다면 언제든지 댓글이나 이메일을 통해 질문해주시면 감사하겠습니다 :)

블로그 이미지

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



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

지난 2017년 8월에 개발을 시작한

서울시립대학교 인공지능 챗봇, 우울한 코끼리가 곧 Beta service를 시작합니다.


저희 우울한 코끼리는 서울시립대학교 교수학습개발센터에서 진행되는 '2017 UOS 학습공동체' 라는 프로그램의 지원을 받으며 진행되었습니다.


위의 사진은 2017년 UOS 학습공동체의 공고문입니다.


우울한 코끼리팀은 서울시립대학교 컴퓨터과학부 2명, 수학과 1명, 그리고 전자전기컴퓨터공학부인 저를 포함하여 총 4명의 개발자로 이루어져 있습니다.


저희는 서울시립대학교의 학생들이 학생 식당의 메뉴를 알고싶거나 학교 근처 맛집 또는 학교 중앙 동아리 정보등을 보다 쉽게 얻을 수 있도록 인공지능 챗봇 개발을 기획하였습니다.

이에 따라 사람들이 많이 이용하는 카카오톡 플러스친구라는 채팅 앱을 기반으로 Django라는 프레임워크를 이용하였습니다.



여기서 인공지능 챗봇이라 함은, 그 동안의 '심심이'와 같은 일반 챗봇과는 답변 처리 방식에 있어서 다른점을 나타냅니다.

단순히, 'A'라는 텍스트를 받았을 때 'B'를 답변해! 라고 설정되는 것이 아니라, 'A'라는 텍스트의 의도를 분석하여 그에 맞는 답변을 해! 라고 설정되는 것입니다.

이러한 인공지능을 이용하면 다음과 같은 것이 가능합니다.

'오늘 학식 메뉴가 뭐야?', '오늘 학식은?', '오늘 메뉴 알려줘', '오늘 학식 메뉴 알려줘' 와 같은 다양한 말들에 대해서 우울한 코끼리는 동일하게 오늘 학생식당에 대한 메뉴를 답변합니다.

서로 다른 말들이지만 질문의 의도는 오늘의 학생식당의 메뉴를 묻는 것이기에, 인공지능을 이용하면 하나의 질문에 하나의 답변을 처리하는 것이 아니라 질문에 대한 의도를 분석하여 해당 의도에 대한 답변을 처리할 수 있습니다.



(출처: SKTechx 토크ON세미나)


인공지능 챗봇을 개발하는데는 위의 사진과 같이, 생각보다 많은 것들을 공부해야 했습니다.

우울한 코끼리 또한 아직 부족한 점이 많지만 하나씩 해결해 가면서 서비스를 보완하고 있습니다.

현재 가능한 기능 중 하나인 학식 메뉴에 대한 답변은, 먼저 사용자가 질문을 하면 사용자의 질문을 형태소 단위로 분석하여 각각의 의미를 캐치합니다. 그리고 각각의 의미를 통해 사용자의 질문 의도를 분석하고 그것이 학식 메뉴를 궁금해 하는 의도라면 실시간으로 서울시립대학교 홈페이지(uos.ac.kr) 에서 그날의 식당 메뉴를 크롤링하여 응답하도록 설정되었습니다.


추가적으로 저희는 학교 주변의 맛집을 추천할 수 있는 기능을 생각하고 있습니다.

학식 메뉴를 물어볼때 답변의 하단에 학교 주변 맛집 하나를 랜덤하게 선정하여 추천해주고, 사용자가 학교 주변 맛집에 대해 궁금해하는 질문을 추가적으로 한다면 정문이 편한지, 후문이 편한지 또는 어떤 음식종류를 선호하는지 등에 대한 질문을 통해 학교 주변 식당을 추천합니다. 해당 기능은 학교 주변 식당을 우울한 코끼리의 데이터베이스에 저장하며 다양한 해시태그(#)를 함께 저장하고, 사용자가 선호하는 것에 대해 많은 해시태그가 포함되는 식당을 랜덤하게 추천하도록 구현될 예정입니다.


또한 학교 중앙동아리에 대한 소개 서비스를 구현할 예정입니다.

사용자가 취미를 추천받고 싶어하거나 직접적으로 학교의 동아리에 대한 궁금증을 가진 질문을 하였을때 우울한 코끼리의 데이터 베이스에 입력된 동아리들을 바탕으로 학교 주변 맛집 추천과 비슷한 과정을 통해 동아리를 소개할 예정입니다.


그리고 사진인식을 통한 추가적인 서비스도 고려하고 있습니다.

예를 들어 특정 건물의 사진을 찍어서 우울한 코끼리에게 전송하였을 때, 이미지 인식 기능을 통해 어떤 건물인지 인식하고 해당 건물에 대한 정보를 응답하는 기능입니다. 현재 우울한 코끼리에게 사진을 전송하였을 때, 아직 사진을 인식하는 기능이 없다고 답변이 되고 있습니다. 카카오톡 플러스친구 API를 통해 사용자가 보낸 메세지가 사진인지, 텍스트인지는 쉽게 구별할 수 있었습니다. 추가적으로 현재 학습중인 딥러닝 기반 이미지 인식에 대한 구현이 성공되면 위에서 말씀드린 건물에 대한 인식등을 비롯하여 이미지 인식 기능을 통해 더 많은 서비스가 제공될 예정입니다.


마지막으로, 현재 우울한 코끼리에서 진행되는 대화는 자체 데이터베이스상에 모두 기록됩니다.

즉, 누가 어떤말을 언제 하였는지 데이터베이스에 기록됩니다. 이렇게 설정한 이유는 차후에 이러한 데이터들을 통해서 더 많은 서비스를 제공할 수 있을 것이기 때문입니다. 예를 들어, 기록된 시간들을 바탕으로 현재 사용자가 연속된 대화를 진행중인 건지, 아니면 어느정도 시간이 지난 뒤에 대화를 새롭게 시작하는 건지 등의 판별이 가능해집니다.



우리 우울한 코끼리는 위와 같은 내용을 바탕으로, 현재 카카오톡 플러스친구에 검색하여 친구를 등록하면 서울시립대 학식 질문에 대한 답변이 가능합니다.

하지만 초기 개발시에 테스트를 위해 Cloud9 서비스를 이용하여 평상시에는 서버가 off 되어있고 수동적으로 서버를 켜줘야지 정상적인 답변이 가능해집니다.

24시간 동안 사용자들이 이용할 수 있도록 현재 네이버 클라우드 플랫폼을 이용한 서버이전을 진행중에 있습니다.


이러한 내용을 통해 우울한 코끼리는 2017 UOS 학습공동체팀 중에서 최우수팀에 선정되었고 1월 24일 총장님에게 상장을 수여받게 되었습니다.


마지막으로 우울한 코끼리 시연영상을 보여드리고 마치겠습니다.



- 우울한 코끼리 시연영상(1)




- 우울한 코끼리 시연영상(1)




이상 모든 사항에 대해 추가적으로 궁금한 점은 언제든지 댓글 및 개인 이메일(doorbw@outlook.com)을 이용해주시면 빠른 답변 드릴 수 있도록 하겠습니다.

블로그 이미지

Tigercow.Door

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