비개발자에게 웹 구조 보여주기: 화면·서버·DB를 따라가는 데모

• 사내 교육
• Flask
• SQLite
• sql.js

비개발자 동료들에게 웹이 어떻게 돌아가는지 설명하는 세미나를 준비했다. 말로 "화면이 서버에 요청하고, 서버가 DB에 물어본다"고 하면 대부분 '서버'라는 단어에서 막힌다. 그래서 요청이 오가는 장면을 눈으로 따라가는 데모를 만들었다.

직접 눌러보기

아래 화면에서 따라하기 시작을 누르면 20단계로 진행된다. 데이터 200건은 전부 만든 가짜 데이터이고, 서버와 DB는 브라우저 안에서 흉내 낸다.

한 화면에 세 영역

영역 사이 화살표로 요청과 응답이 이동한다. 화살표 위 알약에는 GET, SQL, JSON처럼 실제로 오가는 내용이 표시된다.

세미나에서 짚은 네 장면

1. 고르기만 해서는 아무 일도 없다

공장 드롭다운에서 값을 골라도 서버와 DB는 흐려진 채 '요청 없음'이다. 드롭다운을 펼치고 고르는 건 전부 화면 안의 일이고, 검색 버튼이 요청을 보내는 방아쇠라는 걸 먼저 보여준다.

2. 검색 한 번

검색을 누르면 화면 → 서버 → DB → 서버 → 화면 순서로 화살표가 움직인다. DB 영역에는 실제로 실행된 SQL이 줄마다 뜻과 함께 나온다.

조건을 전부 '전체'로 두고 다시 검색하면 WHERE 줄이 통째로 사라진다. 결과가 100건에서 멈추는 이유도 SQL에서 바로 보인다.

3. 같은 "간단한 요청", 다른 계층

현업이 보기엔 비슷한 요청이 어디를 고쳐야 하느냐에 따라 걸리는 시간이 크게 다르다. 코드를 직접 열어 차례로 고쳐 보였다.

그래서 요건을 협의할 때 데이터 구조부터 확인한다는 얘기로 이어진다. 서버에서 담당자 칸을 일부러 빼고 검색해 보이면, 화면 코드는 그대로인데 열이 사라진다. "화면이 이상해요"가 화면 문제가 아닐 수 있다는 걸 보여주는 장면이다.

4. "이거 HTML로 뽑아주면 되는 거 아냐?"

요즘은 AI로 화면 HTML을 금방 만든다. 그런데 그렇게 만든 화면은 조회만 된다. 데모의 DB 영역에는 C 등록 R 조회 U 수정 D 삭제 표시가 있고, 지금까지는 R만 켜졌다.

1. 줄을 눌러 편집 창을 열고 값을 바꾸다가 취소하면 서버와 DB는 '요청 없음'이다.
2. 다시 열어 상태를 바꾸면 바뀐 칸에 '변경' 표시가 붙고 그때서야 저장 버튼이 눌린다.
3. 저장하면 요청이 GET이 아니라 POST, SQL이 SELECT가 아니라 UPDATE로 바뀌고 U에 불이 들어온다.
4. 새로고침하고 다시 검색해도 바뀐 값이 남아 있다. 값이 DB에 저장됐기 때문이다.

대체 관계가 아니라 순서다. 파워포인트 화면은 상상해야 하지만 HTML은 눌러보며 요건을 확정할 수 있다. 그다음 등록·수정·삭제가 필요해지면 서버와 DB가 있는 웹앱으로 간다.

만들 때 정한 것

• 두 판은 화면과 동작이 같고 DB가 어디 있는지만 다르다. 화면 코드는 그대로 두고 요청을 보내는 부분만 바꿔 끼웠다.
• 실제 SQL은 값 자리를 ?로 비우고 값은 따로 보낸다. '코드' 보기로 바꾸면 그 모습이 그대로 나온다.
• 편집 창의 담당자는 자유 입력이 아니라 목록이다. 서버도 한 번 더 확인해서 목록에 없는 이름은 거절한다. 화면만 막는 건 막은 게 아니기 때문이다.