만들기 기록
시상식 수상자 발표 화면 — 웹앱으로 만들고 오류 고친 기록 (바이브코딩 #10)
안녕하세요. 인공지능으로 인생 점프하고 싶은 AI점퍼입니다.
시상식을 해보면 수상자 발표 화면이 늘 아쉽습니다. 보통은 뒤에 배경 화면 하나 띄워놓고, 진행자 멘트로 이름을 부르는 게 전부거든요. 상의 종류가 많은 행사일수록 분위기가 단조로워지고요.
그래서 AI와 함께 수상자 발표 웹앱을 만들었습니다. 편집기에 팀과 수상 부문을 넣고, 무대 화면을 띄워 스페이스바로 한 명씩 발표하는 프로그램입니다. 엑셀에서 정리한 명단을 붙여넣을 수 있고, 부문마다 발표 연출을 고를 수 있습니다. 명단이 바뀔 때마다 코드를 고칠 필요도 없고요.
이번 글은 만든 뒤에 발견한 문제와 고친 과정입니다. 아래 화면은 실제 참가자 대신 예시 명단으로 다시 띄운 것입니다.
1. 명단을 넣고 무대 화면 열기
시상식 편집기에서 행사 이름과 수상 부문을 정합니다. 참가팀은 한 팀씩 넣거나 ‘엑셀에서 일괄 등록’으로 표를 붙여넣습니다. 팀명·학교·팀원·작품명·수상 부문을 적는 방식이고, 부문 이름은 편집기에 만든 상 이름과 같아야 합니다.
편집기에 ‘창작상’ 부문을 만든 뒤 이 CSV를 가져오면 같은 입력을 바로 해볼 수 있습니다. 가져오기 전에 미리보기로 팀과 부문을 확인합니다.
입력이 끝나면 무대 화면을 같은 브라우저에서 엽니다. 스페이스바를 누를 때마다 다음 수상자가 나옵니다. PPT 파일이 아니라 브라우저에 띄우는 발표 화면입니다.
2. 아래로 밀린 화면 고치기
처음 만든 화면은 내용이 가운데보다 아래로 내려가 있었습니다. 코드에 가운데 정렬이 들어가 있어서 눈으로는 원인을 찾기 어려웠죠.
이 앱은 1920×1080 크기 무대를 만든 뒤 모니터에 맞춰 통째로 줄입니다. 이 과정에서 위치가 밀렸던 겁니다. 개발자 도구(화면 요소의 실제 위치와 크기를 보여주는 브라우저 기능)로 재보니 무대 시작점이 위에서 90픽셀, 왼쪽에서 160픽셀 떨어져 있었습니다.
무대의 중심을 브라우저 화면의 중심에 맞추고, 그 중심을 기준으로 줄이도록 고쳤습니다. 화면 크기 세 가지에서 중심이 맞는지도 다시 확인했습니다.
무대는 큰 스크린용입니다. 휴대전화에서는 작게 줄어드니, 실제 쓸 노트북과 프로젝터로 글자 크기를 꼭 확인하세요.
3. 지난 명단을 확인하고 시작하기
명단은 브라우저에 저장돼서 다시 열면 이어서 작업할 수 있습니다. 그런데 다음 행사에 같은 브라우저를 쓰면 이전 명단이 그대로 남아 있겠죠. 잘못 발표하는 일이 생기기 전에 막고 싶었습니다.
그래서 오늘 저장한 자료가 아니면 편집기를 열 때 경고가 뜨게 했습니다. 이어서 편집하거나, 부문은 두고 명단만 비우거나, 전부 새로 시작할 수 있습니다.
이걸 시험하다가 문제를 하나 더 찾았습니다. 편집 화면을 열기만 해도 저장 시각이 오늘로 바뀌는 거예요. 그러면 경고가 뜰 수가 없죠. 기존 내용을 화면에 불러오는 동안에는 자동 저장이 되지 않게 고쳤습니다.
명단은 입력한 브라우저에만 저장됩니다. 다른 컴퓨터로 옮기려면 ‘데이터 내보내기’로 파일을 받아 ‘불러오기’로 넣어야 합니다. 이 파일에는 명단이 들어 있으니 공개된 곳에 올리지 마세요.
4. 고친 화면이 다른 컴퓨터에서도 보이게
웹페이지를 고쳤는데 다른 컴퓨터에서는 예전 화면이 보일 때가 있습니다. 캐시(브라우저가 한번 받은 파일을 보관해 두고 다시 쓰는 기능) 때문입니다.
그래서 HTML과 프로그램 파일은 브라우저가 계속 보관하지 않도록 설정을 넣었습니다. 처음에는 설정 파일 앞에 보이지 않는 문자가 붙어 있어서 적용이 안 됐고, 파일을 다시 저장해서 해결했습니다.
그래도 행사 직전에는 실제 진행할 컴퓨터에서 한 번 열어보는 게 안전합니다. 화면이 이상하면 편집기 상단의 build 버튼으로 다시 불러오면 됩니다.
담당자들에게 보여줬더니
아직 실제 시상식에서 쓰지는 않았고, 시상식을 준비하는 담당자들에게 먼저 보여줬습니다. 상 종류가 많은데 부문마다 연출을 다르게 할 수 있어서 좋겠다는 반응이었습니다.
배경 화면에 멘트만 하던 것보다 훨씬 풍성하고, 객석의 시선도 화면에 모을 수 있을 것 같습니다. 실제 행사에서 쓰게 되면 현장 이야기도 다시 정리해볼게요.
점프!
작은 시도에서 시작하는 다음 점프.