이 글을 온라인 타임캡슐을 개발하면서 기록한 매우 주관적인 관점에서 작성된 글입니다. 기술적인 내용은 정확하지 않을수도 있으니, 재미로만 읽어주세요~~😀
개발 기간: 2주
사용한 기술: PHP, MariaDB, Python, Linux
아이디어 폭💥발!
다시 보니 약간 부끄럽네요 ㅎㅎ
갑자기 아이디어가 떠올라 친구에게 어떤지 물어보고 친구의 반응이 괜찮아, 구상을 하기 시작했다.
원래는 특별한 날에 열리도록 하려고 했지만 유저의 자유도를 위해 유저가 직접 메시지 열리는 날짜를 선택하도록 바꾸었다.
프론트엔드 개발🖥️
학교 방학 내에 빠르게 개발해야했기때문에 프론트엔드 개발에는 애니메이션이나 부가적인 기능들도 추가하고 싶었지만 못했다.
다른 외부 프레임 워크를 사용하지 않고 순수 CSS 개발하는게 익숙하여서 순수CSS로 프론트엔드를 개발하였다.
가입페이지✉️
입력 필드를 다 나누기!
유저가 가입을 하려고 버튼을 눌렀더니 입력필드가 5개가 있다면 그 유저는 부담스러워 할 것이다. 이어서 중도 포기 즉, 이탈률이 증가 할 것이다.
저가 그래요.. 입력 필드가 너무 많으면 가입을 꺼려지게 되더라구요 ㅎㅎ
그래서 가입 과정을 위와 같이 다 나누어 디자인 하였다.
DB 설계📦
이런 소셜 웹 애플리케이션 DB 설계를 한 경험이 없어, 어떻게 해야할지 몰라 고민을 많이 하였다.
https://aquerytool.com/?demo=y
위 웹사이트를 이용하여 DB 설계를 하였더니 수월하게 진행되었다
여러분들도 한번 이용해보시길.. SQL도 자동으로 만들어주네요
인증 테이블
인증번호 5자리 랜덤 숫자를 생성하여 저장하는 테이블이다.
인증 테이블은 이메일 인증번호 또는 어떤 내용의 이메일을 보냈는지 기록 하는 테이블로 하였다
메시지 저장 테이블
메시지 잠금해제, 메시지 내용, 이미지 주소 등등 메시지에 관한 정보를이 저장 되도록 하였다.
유저 정보 테이블
말 그대로 아주 매우 소중한 유저 정보가 저장되는 테이블이다.
백엔드 개발 시작!
이제 DB 설계를 했으니, 백엔드 개발을 시작하였다.
백엔드 개발은 PHP로 개발하였다.
백엔드 개발은 딱히 어려움이 없었지만 보안적인 부분에서 고민 하였다.
사용자로부터 받는 정보는 절대로 신뢰하지 말라는 말을 들어, 사용자로부터 데이터를 받는 부분에 이 데이터는 올바른 데이터인지 아닌지 확인하는 로직을 추가하였다.
여기서 정규식이 사용되었는데 아직 정규식 다루는 방법을 알지 못해 우리의 구원자이신 GPT를 통해 해결하였다.
SMS 문자 보내기
평소 자주 이용하던 가비아에 SMS 메시징 서비스가 있어 가비아의 메시징 서비스를 사용하였다.
먼저 메시지를 얼마나 보낼지 몰라, 가장 저렴한 문자 1000건을 신청하였다.
API 설정
가비아의 메시징 서비스가 유명하지 않아서 자료가 많이 없어 헤매었다.
SMS문자 보내기 기능은 매일 자정 12시에 전송할 것이기 때문에 자동화가 되어야하기 때문에 파이썬으로 작성하였다.
import requests
import mysql.connector
import base64
from datetime import date
# DB 연결
mydb = mysql.connector.connect(
host="#",
user="#",
password="#",
database="#"
)
# 오늘 날짜 얻기
today = date.today()
# SQL 실행하여 데이터 가져오기
mycursor = mydb.cursor()
sql = f"#"
mycursor.execute(sql)
# 가비아 SMS ID 와 API키
sms_id = '#'
api_key = '#'
authorization = base64.b64encode(f'{sms_id}:{api_key}'.encode('utf-8')).decode('utf-8') # Base64로 인코딩하여 API 서버로 전송
headers = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': f'Basic {authorization}'
}
# 토큰 발급 (TTL: 3600)
response = requests.post('https://sms.gabia.com/oauth/token', headers=headers, data = {'grant_type':'client_credentials'})
if response.status_code != 200:
print(f'Request failed with status {response.status_code}')
else:
access_token = response.json()['access_token']
rows = mycursor.fetchall()
# Output data of each row
for row in rows:
Calling_Number = "발신번호" # Sender number
Receipt_Number = "수신번호" # DB에서 가져온 유저의 수신번호
Message = f"메시지 내용"
# 토큰과 SMS ID를 Base64로 인코딩하여 API 서버에 전송
authorization_sms = base64.b64encode(f'{sms_id}:{access_token}'.encode('utf-8')).decode('utf-8')
headers_sms = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': f'Basic {authorization_sms}'
}
data_sms = {
'phone': Receipt_Number,
'callback': Calling_Number,
'message': Message,
'refkey': '[[RESTAPITEST1549847130]]'
}
# 90바이트 이상인 경우 LMS로 전송
response_sms = requests.post('https://sms.gabia.com/api/send/lms', headers=headers_sms, data = data_sms)
if response_sms.status_code != 200:
print(f'SMS send failed with status {response_sms.status_code}')
else:
print(response_sms.text)
mydb.close()파이썬 코드를 작성하는 과정에서 몇 가지 놓친 것을 발견했다.
오늘 메시지를 잠금 해제한 유저를 데이터베이스에서 가져올 때, 가비아 SMS ID와 관리자 탭의 API 키를 Base64로 인코딩하고 서버에 전송해야 하는데, 처음에는 인코딩하지 않고 전송하여 이를 인지 하지못하고 많은 시간을 소비하였다.
또한, 토큰의 TTL이 3600초라서, 스크립트를 실행할 때마다 새로운 토큰을 발급해야한다. 따라서, 토큰을 발급받아 메시지를 보내는 과정으로 코드를 구성하였다. 발급받은 토큰과 SMS ID를 Base64로 인코딩한 후, 발신번호, 수신번호, 메시지 내용을 API 서버에 전달하면 메시지 전송이 된다!
이 스크립트를 크론탭을 통해 하루에 한번씩 실행되게 하였다.
아쉬웠던 점 & 앞으로의 계획
(PC로 접속하는 유저들은 생각 안 할꺼야?)
반응형으로 개발을 했었어야 했는데 개발 속도에만 집중하다보니 모바일만 신경쓰게 되었다.
학기가 시작하기 전에 반응형 개발을 시작해야겠다.
3줄 요약🗂
- 프론트엔드는 빠르게 개발해야했기 때문에 비교적 익숙한 순수 CSS를 사용하였다.
- DB 설계는 경험이 없어 어려웠었지만 https://aquerytool.com/ 을 이용하니 수월하게 진행되었다.
- SMS 메시지 전송부분은 Base64로 인코딩하여 전송하는 것을 몰라서 많이 해매었다.
- 사용자 데이터 검증부분은 정규식을 이용했는데 정규식을 잘 다룰 줄 몰라, 우리의 구원자이신 GPT의 도움으로 해결하였다.
정리!📒
자신의 타임캡슐을 만들어 친구들과 공유한다.
친구들은 타임캡슐에 메시지를 남기고 잠금 해제 날짜를 설정한다.
그리고 그 잠금 해제 날짜가 도래하면, 타임캡슐의 만든이에게 문자 메시지가 전송된다!
피드백 부탁드려요!
최대한 부정적으로 봐주세요 그래야 문제점이 나오거덩요 ㅎㅎ
이런 글을 쓴 경험이 별로 없다보니 글 퀄리티가 못 볼 꼴이네요... 읽어주셔서 감사합니다!😀
