부트스트랩과 구글 웹폰트를 이용한 팬명록 개발일지(Development Log for Creating a Fan Register Using Bootstrap and Google Web Fonts)

2024.08.16

부트스트랩과 구글 웹폰트를 이용한 팬명록 개발일지

프로젝트 개요
팬명록은 팬들이 자신의 정보를 등록하고 팬 활동을 공유할 수 있는 공간입니다. 이 프로젝트는 부트스트랩과 구글 웹폰트를 사용하여 간편하고 세련된 웹 기반의 팬명록을 개발하는 것을 목표로 하였습니다. 부트스트랩은 반응형 웹 디자인을 지원하여 다양한 기기에서 사용자 경험을 극대화하고, 구글 웹폰트는 폰트 선택의 폭을 넓혀줘 디자인을 더욱 매력적으로 만들어줍니다.

부트스트랩 설정
프로젝트 초기 단계에서는 부트스트랩을 다운로드하고 프로젝트에 통합하는 것이 주요 작업이었습니다. 부트스트랩의 CSS 파일을 HTML 문서의 head 섹션에 포함시켜 기본적인 스타일링을 적용하였습니다. 또한, 다양한 컴포넌트와 유틸리티 클래스를 활용하여 빠르게 레이아웃을 구성하였습니다. 이 과정에서 그리드 시스템을 사용하여 화면 크기에 따라 변형되는 반응형 디자인을 구현하였습니다. 이를 통해 모바일과 데스크톱 환경 모두에서 최적화된 홈페이지를 만들 수 있었습니다.

구글 웹폰트 선택
내부 디자인을 한층 더 돋보이게 만들기 위해 구글 웹폰트를 선택하였습니다. 다양한 폰트 중에서 고객의 취향에 맞는 두세 가지 폰트를 선정하고, 이를 체계적으로 적용하여 팬명록의 분위기를 결정하였습니다. 가독성이 높고 세련된 느낌의 폰트를 사용하는 것이 중요했기 때문에, 구글 웹폰트 라이브러리에서 추천하는 타입을 찾아 적용하였습니다. 이를 통해 등록하는 정보가 눈에 잘 띄고 이해하기 쉽게 만들 수 있었습니다.

기능 구현
팬들이 정보를 등록할 수 있는 기능을 구현하는 과정에서는 HTML 폼 요소를 활용하였습니다. 이름, 이메일, 팬 활동 등 필요한 정보를 입력받을 수 있도록 입력 칸을 구성하였고, 각 입력 칸에 대한 유효성 검사를 통해 사용자가 올바른 정보를 입력하도록 하였습니다. 또한, 등록된 정보가 실시간으로 목록에 반영되는 AJAX 기능을 추가해 사용자 경험을 향상시켰습니다. 이런 기능을 통해 팬들이 보다 편리하게 자신을 소개할 수 있었습니다.

디자인 마무리
개발의 마지막 단계에서는 디자인을 한층 더 세련되게 다듬었습니다. 부트스트랩의 다양한 컴포넌트를 사용하여 버튼, 카드, 알림 등을 시각적으로 구분하여 배치하였습니다. 색상조합과 간격을 조절하여 사용자들이 정보를 한눈에 보기 쉽게 하였으며, 전체적인 색감은 팬명록의 주제와 맞춰 조정했습니다. 디자인이 완성된 후에는 여러 기기에서 테스트를 진행하여 모든 환경에서 일관된 사용자 경험을 제공하도록 하였습니다.

배포와 피드백
개발이 완료된 팬명록은 실제 환경에 배포하였습니다. 초기 사용자들의 피드백을 통해 추가 기능이나 개선 사항을 논의하고, 필요시 업데이트를 진행할 계획입니다. 팬들로부터 받은 긍정적인 피드백과 함께 여러 개선 사항을 반영하여 더 나은 팬명록으로 발전시킬 것을 기대하고 있습니다. 이번 프로젝트를 통해 부트스트랩과 구글 웹폰트의 편리함과 효과를 몸소 체험할 수 있었으며, 향후 이를 바탕으로 더욱 발전된 프로젝트를 기획할 예정입니다.