웹 앱에 생동감을 불어넣는 정적 파일(Static Files) 관리

웹 앱에 생동감을 불어넣는 정적 파일(Static Files) 관리

플라스크 튜토리얼의 다섯 번째 단계인 Static Files 페이지에서는 앱의 외형을 꾸미는 CSS, 자바스크립트(JS), 이미지 파일 등을 어떻게 관리하고 연결하는지 다룹니다. 이전 단계까지 만든 인증 화면들은 기능은 작동하지만 매우 밋밋한 상태인데, 여기에 스타일을 입히는 과정입니다.

---

1. 정적 파일(Static File)이란?

템플릿(HTML)이 서버에서 처리되어 내용이 동적으로 변하는 파일이라면, 정적 파일은 서버가 내용을 수정하지 않고 그대로 전달하는 파일을 말합니다.

• 종류: CSS 스타일시트, 클라이언트 측 자바스크립트, 로고 이미지, 폰트 파일 등
• 위치: 플라스크는 기본적으로 패키지 내의 static 폴더에서 이 파일들을 찾습니다. (flaskr/static/)

---

2. 정적 파일 연결하는 법

플라스크의 url_for 함수를 사용하면 정적 파일의 경로를 안전하게 생성할 수 있습니다. 템플릿 파일 내에서 다음과 같이 사용합니다.

• 문법: {{ url_for('static', filename='style.css') }}
• 장점: 앱의 배포 환경이 바뀌어 주소가 변경되더라도 경로를 일일이 수정할 필요가 없습니다.

---

3. 주요 CSS 스타일링 요소

튜토리얼에서 제공하는 style.css는 앱을 훨씬 현대적으로 보이게 만듭니다. 주요 적용 내용은 다음과 같습니다.

대상	주요 스타일 내용	효과
html & body	최대 너비(960px) 제한, 중앙 정렬	화면이 너무 넓게 퍼지는 것을 방지
nav	flexbox 레이아웃, 배경색 지정	상단 메뉴바 형태 구성
.flash	배경색 및 테두리 지정	에러나 안내 메시지를 눈에 띄게 표시
form	flex-direction: column	입력창들을 세로로 깔끔하게 배치

---

4. 실전 팁: 변경 사항 확인하기

정적 파일을 수정했는데 브라우저에 반영되지 않는다면 다음 두 가지를 확인해야 합니다.

• 브라우저 새로고침: 단순 새로고침으로 안 될 경우 '강력 새로고침'(Ctrl + F5 또는 Cmd + Shift + R)을 사용하세요.
• 캐시 삭제: 브라우저가 이전 버전의 CSS 파일을 저장(Cache)하고 있을 수 있으므로, 브라우저 설정에서 캐시를 비우거나 시크릿 모드에서 확인해 보세요.

---

Official Flask Tutorial: Static Files
CSS 파일의 내용을 직접 작성하기보다는 튜토리얼에서 제공하는 코드를 복사해서 붙여넣은 뒤, 각 클래스 이름이 HTML의 어느 부분과 연결되는지 매칭해보는 것이 학습에 효과적입니다.