스마트 카트 설계기 (2) - 웹 서비스 코딩의 시작

🔨

 

웹 서비스 코딩의 시작

내가 맡게 된 기능들 중 웹 서비스 코딩을 먼저 구현하기 시작했다. 아무래도 생전 처음 보는 NFC보다는 웹사이트 구현이 더 쉽기도 하고, 본 작품의 핵심적인 기능이라 생각됐기 때문이다.

 

Flask의 활용

웹 개발을 하기 위해서는 우선 어떠한 프로그램으로 웹 서비스를 구현해야 할지 정해야 했다. 과거 Flask를 이용하여 라즈베리파이를 조작하는 특강을 받은 적이 있어서, 웹서버 구동 프로그램으로 Flask를 사용하기로 했다.

 

비록 약 6개월도 더 된 기억 속에서 당시의 Flask사용 기억은 그렇게 많이 떠오르지 않았지만, 사용 언어가 나름 사용하기 쉬운 언어중 하나인 Python이었고, 인터넷에는 이미 수많은 예제가 나와 있어서 사용에 큰 무리는 없었다. Flask를 사용해서 구현하면 충분하겠다는 확신을 하였다. 그리고  웹 사이트의 특징을 먼저 정한 후, 할 일들을 차례대로 꾸준히 해 나갔다.

 

Flask 로고

 

여담이지만, 이번에는 작업을 진행하면서 코드가 점점 복잡해져서 혹시나 모를 사고에 대비해 여태껏 잘 사용해보지 못했던 깃허브도 사용해 보았다. 특정 기능이 만들어질 때마다 브런치를 만들었다. 익숙지 않은 깃허브였지만, 코드가 차곡차곡 쌓여간다는 기분이 들어서 좋았다.

 

차곡차곡 쌓여간 브런치와 커밋

 

설계할 웹 사이트의 특징

웹 사이트를 설게 하기 전, 내가 설계할 웹 사이트의 특징을 다시 한번 살펴보았다.

 

• 스마트 쇼핑 카트는 대형 마트에서 이용이 가능하며, 대형 마트의 물건들을 표시하기 위해서는 데이터베이스를 사용할 필요성이 있다.
• IoT의 필수적인 기능 중 보안성을 위해서 암호화 기술을 사용할 필요가 있다.
• 오직 NFC와 웹 브라우저를 통해서 접속을 하며 MAC 주소 등으로 장치를 구분하기 힘드므로, 다중 사용자를 관리하고 사용자들의 악용을 막을 장치가 필요하다.
• 웹 사이트는 Wi-Fi나 LTE등의 셀룰러 네트워크를 통한 외부에서 접속이 가능해야 한다.
• 사이트는 처음 보는 사람도 쉽게 이해할 수 있을 정도로 간결하고 깔끔해야 한다.

내가 생각하는 웹 사이트의 특징 및 기능

 

Flask와 Database

학교에서 Database 관련 수업을 거의 들어보지 못했기 때문에, 매일 밤 9시부터 문제가 해결될 때까지 인터넷의 예제를 찾아가면서 하나씩 완성해 나갔다. Flask는 다행히 Database 기능을 손쉽게 사용할 수 있도록 도와주는 Flask-SQLAlchemy라는 프로그램을 제공하였고, 나에게 필요한 설명이나 예제를 인터넷에서 쉽게 찾을 수 있었다. ^[각주:1]

 

본 스마트 쇼핑카트 웹 서비스에서 필요한 데이터베이스의 항목은 아래와 같았다.

 

• ID: 기본 키
• productname: 물품 이름
• company: 물품 제조사명
• locationx: 물품의 x위치
• locatoiny: 물품의 y위치
• locationz: 물품의 z위치^[각주:2]
• price: 물품의 가격
• status: 물품의 상태 (품절인지, 할인 중인지…)

 

#DB 생성을 위한 구문
class storeproduct(db.Model):
 __table_name__ = 'storeproduct'
 id = db.Column(db.Integer, primary_key=True)
 productname = db.Column(db.String)
 company = db.Column(db.String, nullable=True)
 locationx = db.Column(db.Integer, nullable=True)
 locationy = db.Column(db.Integer, nullable=True)
 locationz = db.Column(db.Integer, nullable=True)
 price = db.Column(db.Integer, nullable=True)
 status = db.Column(db.String, nullable=True)

def __init__(self, productname, locationx, locationy):
 self.productname = productname
 self.locationx = locationx
 self.locationy = location

DB클래스 중 일부

 

Flask-SQLAlchemy를 이용하여 데이터베이스 파일을 만들고, 약 1주일에 걸쳐 데이터베이스 항목을 추가 및 수정하는 페이지를 만들었다. 데이터베이스를 추가 및 수정하는 페이지는 HTTP REST라는 기술을 이용해야 했다. 나는 인터넷에 떠돌아다니는 예제를 참조하여 검색 기능을 HTTP Post로 구현하였다.

 

여담으로, 여기서 얻은 HTTP REST에 관한 지식은 나중에 NFC의 URL 전송 기능을 이용한 로그인 기능을 만드는데 많은 도움이 되었다.

 

검색창의 모습

검색 결과의 모습

물품 선택 시 나오는 모습

처음 만든 검색 웹페이지의 모습들

 

웹페이지 전송 암호화

내가 설계한 스마트 쇼핑 카트 웹 페이지는 암호화가 되어 있지 않은 마트 내 공개된 Wi-Fi에서도 사용될 수 있었다. 공개된 Wi-Fi를 사용하면서 제 3자가 데이터를 가로채거나 웹사이트를 변조시키면 여러모로 큰 피해가 발생할 수도 있을 것이라 생각하였고, 그에 맞는 인증 및 암호화 기술을 추가하기로 했다.

 

어떻게 암호화 기술을 적용할지 수 차례의 고민 중, HTTPS라는 암호화 통신 프로토콜을 사용하면 이러한 문제가 어느 정도 해결될 수 있다는 것을 생각해 내었다. 하지만, HTTPS 프로토콜을 사용하려면 웹사이트가 사기 사이트가 아닌 실제 웹사이트 임을 증명하는 SSL 인증서라는 것이 필요했다.

 

그런데 SSL 인증서는 공인된 기관에서 발급된 것이 아닌 개인이 직접 만든 인증서는 웹 사이트 접속 시 웹 브라우저 상에서 인증서 확인 불가 경고를 표시하기 때문에, 공인된 곳에서 사용해야 했다. 비록 경고 창이 발생해도 웹 사이트 사용에 큰 문제는 없지만, 제3자가 사용하기에는 접근성이 떨어지기 때문에 공인된 기관의 인증서가 필요했다.

 

⚠️Warning: Potential Security Risk Ahead Firefox detected a potential security threat and did not continue to 127.0.0.1. If you visit this site, attackers could try to steal information like your passwords, emails, or credit card details.   127.0.0.1:5000 uses an invalid security certificate. The certificate is not trusted because it is self-signed. Error code: MOZILLA_PKIX_ERROR_SELF_SIGNED_CERT

OpenSSL로 만든 인증서를 사용할 경우 나타나는 경고

 

공인 기관에서 인증서를 발급 받기 위한 노력

공인된 기관의 인증서를 발급하기 위해서 아래의 두 가지가 필요했다.

 

1. 웹 사이트 도메인
2. 인증서 발급 비용

 

기본적으로 SSL 인증서는 사이트 도메인을 기준으로 발급이 되었다. 예를 들면 www.naver.com 이나 www.google.com 과 같은 웹 사이트의 주소를 소유하고 있다면 해당 도메인에서만 사용 가능한 인증서를 판매했다.

 

도메인을 사면 되지 않겠느냐? 라고 생각이 되었지만, 안타깝게도 졸업 작품 지원금에는 실물이 없는 물건의 구매를 제한하고 있었다.

그렇다면 인터넷에서 쉽게 구할 수 있는 무료 도메인을 사용하는 것은 어떨까? 라는 생각이 들기도 했지만, 무료 도메인은 뭔가 내키지 않았다. 도메인이 언제 사라질지 모르는 불안감, 도메인을 무료로 받아도 DNS 등록 비용을 내야 하는 경우도 있다는 점 그리고 만약에 DNS 등록이 무료라고 하더라도 웹 사이트 내에 불필요한 광고등의 요소가 삽입될 것 같다는 점이었다.

 

결국 사비로 도메인을 구입하는 것이 좋을까? 라는 생각도 들었다.

 

하지만, 뜻밖의 곳에서 도메인 문제를 해결할 방법을 발견했다. 내가 발견한 방법은 NAS 기능이 탑재된 아이피타임 공유기의 무료 DDNS 도메인을 이용한 방법이었다.

 

NAS 기능이 탑재된 아이피타임 공유기는 ipdisk.co.kr 이라는 NAS 접속 주소를 받을 수 있는데, 해당 주소는 사용에 추가적인 비용이 전혀 들지 않았다. NAS 제품을 파는 회사의 DDNS이니 믿을 수 있는 도메인이라는 생각이 들었다. 이렇게 첫 번째 문제가 해결이 됐다.

 

이제 남은 것은 두 번째 문제인 인증서를 구매할 비용에 관한 것이었다. 도메인과 마찬가지로 인증서 또한 졸업과제 작품 제작 지원금으로 구매 불가능한 품목이었다. 따라서, 무료 인증서를 찾아서 사용하는 것이 맞다고 생각했다. 인터넷 검색을 해 본 결과 내가 사용할 수 있는 무료 인증서는 크게 2가지로 Let’s Encrypt라는 기관, 또는 ZeroSSL.com 이라는 기관에서 발급을 받으면 됐다.

 

Let's Encrypt 로고

 

Let's Encrypt 사용기

두 가지의 기관 중, 첫 번째로 시도해본 것은 Let's Encrypt였다. 이유는 인터넷을 돌아다니면서 Let’s Encrypt 인증서를 종종 봐왔는데, 사이트 접속 시 별 다른 문제를 경험해보지 못했기 때문이다. 그리고 실제로도 많이 사용된다고 하니, 뭔가 써보고 싶었기도 했다.

 

하지만 해당 기관에서 인증서를 받는데에 실패했다. Let’s Encrypt를 사용하기 위해서는 웹사이트 인증을 해야 하는데, 인증에 필요한 프로그램인 Win-acme를 어떻게 다룰지 몰랐기 때문이다. 결국 한참을 헤매다가 결국 포기했다.

 

A simple Windows ACMEv2 client (WACS) Software version 2.1.7.807 (RELEASE, PLUGGABLE) ACME server https://acme-v02.api.letsencrypt.org/ IIS not detected Running without administrator credentials, some options disabled Scheduled task not configured yet Please report issues at https://github.com/win-acme/win-acme N: Create renewal (default settings) M: Create renewal (full options) R: Run renewals (0 currently due) A: Manage renewals (1 total) O: More options... Q: Quit Please choose from the menu:

Win-acme의 실행 모습 (본 화면은 발급을 받고 난 뒤의 모습이다)

그래서 두 번째 선택지인 ZeroSSL.com을 이용하여 도메인 인증을 발급했다. ZeroSSL.com은 Win-acme를 이용하는 것이 아닌, ZeroSSL.com 내에서 자체적으로 인증을 받을 수 있도록 설명이 되어 있어서 훨씬 쉬웠다. 그렇게 ZeroSSL.com 인증서를 성공적으로 받고 Flask 개발 서버에 적용시킬 수 있었다.

하지만, 기쁨도 잠시, 크롬에서는 인증서에 문제가 없는데, 파이어폭스에서는 해당 인증서에 문제가 있다며 페이지 경고 표시를 띄웠다. 해당 인증서에 잘못된 부분이 있다는 메시지가 나왔는데, 인터넷에서 해당 문제를 해결할 수 있는 방법을 찾을 수 없었다.

 

⚠️

대부분 크롬을 많이 사용하니 파이어폭스는 예외로 두는 것이 낫지 않을까? 라는 생각에 여러 고민을 하다가, 이왕 이렇게 된 김에 Let’s Encrypt를 이용하기로 정하였고, Win-acme 사용을 배워보기로 했다. Let’s Encrypt를 사용하기 위해 약 3일 동안 어떻게 써야 하는지 정보를 찾다가, 결국 웹서버 구동 프로그램인 윈도우용 Ngix와 공유기의 포트 포워딩을 이용해서 인증에 성공했다.

 

내가 사용한 방법은 공유기의 포트 포워딩으로 80번 포트를 Ngix 서버 PC로 포워딩해주고, Win-acme로 인증 옵션 중 ‘1: [http-01] Save verification files on (network) path’ 를 선택한 뒤 Ngix 설치 폴더의 웹 사이트 최상 폴더를 입력해주면 되었다.

 

여담이지만 이렇게 ZeroSSL.com을 Let’s Encrypt로 바꾼 것은 정말 좋은 선택이었다. 후에 알게 된 사실로, Let's Encrypt와 ZeroSSL.com은 사용하려는 도메인에 CAA record에 Let's Encrypt 관련 문구를 등록해줘야 사용할 수 있게 바뀌었다. 하지만, ipdisk.co.kr 도메인에는 해당 CAA record가 등록되어 있지 않고, 사용자가 수정할 수 있는 방법이 없어서 결국 무료 SSL 발급 서비스를 사용할 수 없게 돼버렸다. ^[각주:3]

 

어찌 됐든, 우여곡절 끝에 이렇게 HTTPS 작업이 끝났다.

 

app.run(
        debug=testmode,
        ssl_context=('cert.pem', 'key.pem'),
        host='0.0.0.0',
        port=5000
        )      

Flask 개발 서버에서 HTTPS를 적용시킨 모습

 

인증서 적용에 성공한 사진

 

사용자들의 악용을 막을 장치

사용자들의 악용을 막기 위해 아래와 같이 2가지를 구상하였다.

 

1. 로그아웃 기능과 일회용 암호 생성 및 인증 방법
2. 최대 사용자 수 제한 방법

초기 구상한 로그아웃 기능과 일회용 암호 생성 및 인증 방법 중 일회용 암호 생성 방법은 Python을 통해 무작위 문자와 숫자를 생성하는 방법을 통해 만드는 방식이었다. 그리고 암호 코드 인증 방법은 ‘https://***.ipdisk.co.kr/암호 코드/명령’ 형식으로 접속 시 암호 코드 부분이 이전 생성된 코드와 동일하면 정상적인 작동을 하고, 틀리면 에러를 출력하게 설계하려고 했었다.

하지만, 여기에는 몇 가지 문제점이 있었다. 첫째는 /암호코드/명령 형식으로 만들면 현재 몇 명이 접속을 했는지 알기가 힘들기도 하고 사이트의 모든 메뉴나 항목들의 주소에 ‘/암호 코드/’를 추가해 주어야 했다. 이는 너무 번거로우면서도 복잡한 방법이었다.

 

HTTP Session의 사용

 

🍪

 

좀 더 간단하면서도 괜찮은 방법이 없을까? 라는 생각에 검색을 하며 열심히 정보를 모았다. 그러다가 HTTP Session 이라는 것을 알게 되었다. 이것은 포털 사이트의 로그인 기능과 동일한 기능이었다. 작동 방식은 아래와 같았다.

 

1. 사용자의 암호 코드가 서버의 암호 코드와 일치하는지 판단
2. 서버가 사용자의 암호 코드가 맞다고 생각될 경우 해당 Session-id를 기억, 사용자의 브라우저로 전송
3. 사용자의 브라우저는 Session-id를 쿠키라는 형식으로 저장, 웹 페이지에 접속 시 Session-id를 같이 전송
4. 서버는 Session-id가 정상적일 경우 웹페이지 조작을 허용
5. 사용자가 로그아웃 시 서버는 해당 Session-id 제거

 

HTTP Session을 이용한 방식은 접속 시 한 번의 성공적인 로그인으로 로그아웃 전까지 암호 코드의 통과 상태가 유지되었다. 그래서 모든 메뉴에 ‘/암호 코드/’ 구문을 넣어줄 필요도 없었다. 다만, 추가적으로 생각해야 하는 부분이 하나 있었다. 처음에 암호 로그인 부분을 어떤 방식으로 구현해 줄 것인가? 에 관한 것이었다.

 

다행히 이는 데이터베이스를 만들 때 익혔었던 HTTP REST 중 GET을 이용하면 쉽게 해결이 가능했다. GET은 구글이나 네이버등 검색엔진에 검색 시 사이트 뒤에 '?q=검색어'와 같이 물음표와 항목이 나열되는 것이었는데 이를 암호 코드를 이용한 로그인으로 이용하기로 했다.

 

예를 들면 passcode라는 항목의 값이 0851 이라면 ‘https://***.ipdisk.co.kr/?passcode=0851’ 로 접속한다면 자동으로 로그인이 되면서, 자동으로 로그 아웃 전까지는 ‘https://***.ipdisk.co.kr’에 접속하면 스마트 카트의 제어 페이지를 계속 사용할 수 있게 설계를 진행하였다.

 

최대 사용자 수 제한 방법

여담이지만, 이를 응용하여 최대 사용자 수를 제한하는 방법은 엄청 간단하게 구현했다. currentsession이라는 전역 변수를 추가하여 암호 코드로 접속한 사람이 생길 경우 해당 전역 변수의 값을 +1이 되게 정하였다. 그리고 로그아웃 시 해당 값은 0으로 되게 설정하였다.

이렇게 웹 기술과 파이썬 코딩을 활용하여 생각보다 효율적으로 사용자 제한 기능을 완성할 수 있었다.

 

@app.route('/logout')
def logout():
    global currentsession
    if secretdb in session:
        currentsession = 0
        session.pop(secretdb, None)
        resetsecretword()
        flash('You logged out!')
        print("Reset!")
    return redirect ('/')

로그아웃 시의 코드

 

웹 사이트는 셀룰러 네트워크를 통한 외부에서 접속이 가능해야 한다.

서버가 공유기 네트워크에 속해 있기 때문에, 개발 서버의 포트를 5000번으로 하고, 공유기의 포트 포워딩 기능으로 외부 접속 포트를 HTTPS의 기본 포트인 443으로 맞춘 뒤에 내부 IP주소를 서버 IP로, 포트를 5000번으로 해주면 됐다.

 

이 부분은 사실 HTTPS를 적용할 때 이미 거의 성공한 기능이었다. 특별히 고려해야 하는 점으로, Flask 개발 서버에서 외부 접속을 허용하기 위해서 host 값 설정을 0.0.0.0으로 해야 한다는 점, 그리고 HTTPS 인증서 적용을 하면, 기본적으로 HTTP로는 접속이 불가능하고, HTTPS로만 접속할수 있게 된다는 점이었다.

 

 

공유기의 포트 포워딩 메뉴 화면

 

사이트는 처음 보는 사람도 쉽게 이해할 수 있을 정도로 간결하고 깔끔해야 한다.

이미 만들어진 블로그 스킨을 조금씩 수정하는 것은 여러 번 해봤지만, 사이트를 처음부터 만들어본 경험은 없어서 어떻게 해야 할지 막막했다. 어떻게 만들면 좋을지 곰곰이 생각하던 중, 예전 블로그 스킨을 수정할 때 접했던 Bootstrap 프레임 워크라는 것을 이용해 보면 어떨까? 라는 생각이 들었다.

 

Bootstrap은 반응형 웹페이지를 쉽게 만들 수 있게 도와주는 라이브러리의 모음 같은 것이었는데, 워낙 유명한 프로그램이라서 그런지 인터넷에 예제가 상당히 많고, Bootstrap 공식 홈페이지의 설명도 괜찮아서 다루기도 쉽고 만드는 재미도 있었다. 그리고 덕분에 웹 페이지는 약 1주일 만에 완성할 수 있었다.

 

Bootstrap 프레임워크 로고

 

Bootstrap을 이용한 것은 좋았으나, 교내 와이파이를 이용해서 내가 만든 Bootstrap 페이지를 불러오면 메인 페이지를 접속하는데 거의 30초가 넘는 시간이 걸리는 문제점이 있었다.

 

해당 문제는 교내 인터넷망이 무슨 이유에서인지 Bootstrap 사용에 필요한 파일들을 외부 CDN 서버로부터 불러오지 못해서 발생하는 문제였다. 이를 해결하기 위해서 Bootstrap을 웹서버 PC에서 Flask를 통해 별도로 전송해 주는 방법이 필요해 보였다. 마침 Flask 서버 쪽에서 Bootstrap 지원을 도와주는 Flask-Bootstrap이라는 파이썬 모듈을 이용했다.

 

여기서 한 가지 주의해야 할 점은, 해당 모듈의 Bootstrap 프레임 워크 버전이 최신 버전이 아닌, 3.3 버전대의 과거 버전이어서 웹상의 예제를 사용할 때 안 되는 부분이 존재했다는 점이다.

 

어쨌든 Bootstrap과 Jinja2라는 Flask내의 동적 웹 생성 프로그램, 그리고 추가적으로 WTForms을 이용하여, 나름 깔끔한 웹 페이지를 만드는 데 성공했고, 남들에게 충분히 보여줄 만한 사이트를 완성했다. 이제 이렇게 완성한 웹 서비스와 NFC, 그리고 다른 팀원들의 프로그램과의 연동, 그리고 마지막 검토가 남았다.

 

	<div class="row">
    <div class="col-md-6">
	 <h2>물품 검색</h2>
      <form  action="" method="post" role="form">
        {{ form.csrf }}
        <div class="form-group">
			{{ wtf.form_field(form.select) }}
			{{ wtf.form_field(form.search) }}
		</div>
		   <br>											   
        <center>
		
          <button type="submit" class="btn btn-primary btn-block">검색</button>
        </center>
      </form>
	</div>

HTML로 작성된 물품 검색 버튼의 일부

 

거의 완성된 웹페이지 사진

 

여담

언제부턴가 티스토리 에디터에서 SVG 파일이 바로 올려진다. 그리고 대표 이미지로 지정도 가능해서 정말 좋아진 것 같다.

 

[SVG 파일]

 

Flask_logo.svg

0.07MB

Flask logo 출처: Armin Ronacher, Copyrighted free use, via Wikimedia Commons

 

le-logo-wide.svg

0.30MB

Lets Encrypt logo 출처: letsencrypt.org/trademarks

 

Bootstrap.svg

0.00MB

Bootstrap 프레임워크 로고 출처: Bootstrap, Public domain, via Wikimedia Commons

 

1. 참조한 예제는 Flask로 블로그를 만드는 방법을 설명하는 글인 opentutorials.org의 opentutorials.org/module/3669/22070, 음원 관리 페이지를 만드는 글인 www.blog.pythonlibrary.org/2017/12/15/flask-101-filtering-searches-and-deleting-data/ 였다. [본문으로]
2. 물품이 위치한 층수를 나타내는 항목이었지만, 층 구현이 어려워 실제로 사용되지는 않았다. [본문으로]
3. Win-acme 인증시 "type": "urn:ietf:params:acme:error:caa" ; detail": "CAA record for  ***.ipdisk.co.kr  prevents issuance" 에러가 난다 [본문으로]