[형성과제 1] 레이아웃 안에 그리드 뷰를 배치하고 이미지를 배열하는 코드를 작성해보세요

1. 개요

이번 과제는 사용자 인터페이스(UI) 제작에서 중요한 역할을 하는 레이아웃 설계와 그리드 뷰 배치, 그리고 이미지를 효율적으로 배열하는 방법을 이해하는 데 초점을 맞춘다. 현대 웹 및 앱 개발에서 사용자 경험(UX)을 향상시키기 위해서는 직관적이고 깔끔한 레이아웃 설계가 매우 중요하다. 특히 다양한 디바이스와 화면 크기에 대응 가능한 반응형 인터페이스 제작이 필요하며, 이를 위해서는 배치 구조와 컴포넌트의 배열 방식을 체계적으로 이해해야 한다. 그리드 시스템은 이러한 요구에 적합한 배치 방법으로, 다양한 크기의 화면에서도 일정한 정렬과 간격을 유지하며 콘텐츠를 배치할 수 있도록 한다. 실제로 세계적으로 가장 널리 사용되는 CSS 프레임워크인 Bootstrap의 그리드 시스템은 12개 칼럼 기반 구조를 갖추고 있으며, 이를 활용한 레이아웃은 개발 편의성과 유지보수성을 높여준다. 최근 보고된 통계 자료에 의하면, 모바일 기기 사용자 비율이 70% 이상인 환경에서는 적응형 레이아웃과 이미지를 적절히 배치하는 것이 사용자 이탈률을 30%까지 낮추는 데 기여한다는 결과가 있다. 또한, 이미지 배열과 관련해서는 사진 갤러리, 제품 소개 …