CGI 프로그램으로 드롭다운 상자 데이터 전달하기
드롭다운 상자(Dropdown Box)는 선택 가능한 옵션은 많지만 사용자가 실제로 하나 또는 소수의 항목만 선택하는 경우에 유용하게 사용되는 UI 요소입니다. 예를 들어 과목 선택, 지역 선택처럼 여러 항목 중 하나를 고르는 상황에 적합합니다.
1. 드롭다운 상자가 포함된 HTML 폼 작성
다음은 드롭다운 상자가 하나 포함된 폼의 예시 HTML 코드입니다.
<form action = "/cgi-bin/dropdown.py" method = "post" target = "_blank">
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
<input type = "submit" value = "Submit"/>
</form>
이 코드를 실행하면 Maths와 Physics 두 개의 옵션을 담은 드롭다운 목록과 Submit 버튼으로 구성된 폼이 화면에 나타납니다. 기본 선택값은 selected 속성이 지정된 Maths입니다.
2. 드롭다운 값을 처리하는 CGI 스크립트
아래는 웹 브라우저에서 전송된 입력값을 받아 처리하는 dropdown.py 스크립트입니다.
#!/usr/bin/python
# CGI 처리를 위한 모듈 임포트
import cgi, cgitb
# FieldStorage 인스턴스 생성
form = cgi.FieldStorage()
# 필드에서 데이터 가져오기
if form.getvalue('dropdown'):
subject = form.getvalue('dropdown')
else:
subject = "Not entered"
print "Content-type:text/html\r\n\r\n"
print "<html>"
print "<head>"
print "<title>Dropdown Box - Sixth CGI Program</title>"
print "</head>"
print "<body>"
print "<h2> Selected Subject is %s</h2>" % subject
print "</body>"
print "</html>"
3. 코드 동작 방식 설명
- cgi.FieldStorage(): 폼으로 전송된 데이터를 파싱하여 딕셔너리 형태로 접근할 수 있게 해주는 객체입니다.
- form.getvalue('dropdown'): HTML의
select태그에 지정한 name 속성값인 'dropdown'을 키로 사용해 선택된 값을 가져옵니다. - 조건 분기: 값이 존재하면 해당 값을 subject 변수에 저장하고, 없으면 "Not entered"라는 기본 문자열을 할당합니다.
- Content-type 헤더 출력: CGI 프로그램은 반드시 응답 본문보다 먼저 Content-type 헤더를 출력해야 하며, 이후 빈 줄(\r\n\r\n)로 헤더와 본문을 구분합니다.
사용자가 Physics를 선택하고 제출하면, 브라우저에는 "Selected Subject is Physics"라는 문구가 표시됩니다.
참고 사항
파이썬의 cgi 모듈은 Python 3.13부터 표준 라이브러리에서 완전히 제거되었습니다. 따라서 새로운 프로젝트에서는 Flask, Django와 같은 웹 프레임워크를 사용하는 것이 권장됩니다. 다만 레거시 시스템 유지보수나 CGI 동작 원리 학습에는 위 예제가 여전히 좋은 참고 자료가 됩니다.