egrida.net - 2P : 1-10

2P : 1-10

<div class="pdf-scale-wrapper">  <div class="pdf-a4-wrapper" style="display: flex; flex-direction: column; align-items: center;">  <div class="pdf-page white" data-page-name="갤러리 소개" style="padding: 10mm 10mm;"> <div class="pdf-header left">일상의 조각들을 담은 작은 기록</div> <div class="photo-group" data-group="group1"> <a data-lightbox="group1" data-title="2025-04-30 사진 1" href="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg"> <img alt="2025-04-30 사진 1" src="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg" /> </a> <a data-lightbox="group1" data-title="2025-04-30 사진 2" href="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg"> <img alt="2025-04-30 사진 2" src="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg" /> </a> </div> <div class="text-box bordered left-align"> <h2 class="title">갤러리 소개</h2> <p class="body">이 공간은 나의 일상을 한 컷씩 저장한 곳입니다. 특별하지 않아도, 흘러가버릴 그 순간들을 아껴 담았습니다.</p> <p class="desc">사진마다 조용한 이야기가 숨어 있고, 보는 이의 시선에서 새로운 해석이 시작되기를 기대합니다.</p> </div> <div class="pdf-footer center">1. 갤러리 소개 -</div> </div>  <div class="pdf-page yellow" data-page-name="전시 기록" style="padding: 10mm 10mm;"> <div class="pdf-header left">기억을 모은 두 장의 프레임</div> <div class="photo-group column" data-group="group2"> <a data-lightbox="group2" data-title="전시 공간의 전경" href="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg"> <img alt="전시 공간의 전경" class="horizontal" src="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" /> </a> <a data-lightbox="group2" data-title="관람자의 시선 속 전시" href="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg"> <img alt="관람자의 시선 속 전시" class="horizontal" src="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg" /> </a> </div> <div class="text-box bordered center-align"> <h2 class="title">전시 기록</h2> <p class="body">이번 페이지에는 전시 공간에서 포착한 순간들을 담았습니다. 구조와 감정, 그리고 움직임이 하나의 흐름으로 연결됩니다.</p> <p class="desc">장소와 사람이 어우러진 이 기록은, 보는 이로 하여금 전시의 공기까지 상상하게 합니다.</p> </div> <div class="pdf-footer center">2. 전시 기록 -</div> </div>  <div class="pdf-page blue" data-page-name="비정형 배치 실험" style="padding: 10mm;"> <div class="photo-group column" data-group="group3" style="display: flex; flex-direction: column; gap: 4mm;"> <div style="display: flex; justify-content: flex-start;"> <a data-lightbox="group3" data-title="수직 시선의 프레임" href="/files/attach/images/2025/04/30/07d53c7f66823a13c8c27ecc3816d0b6.jpg"> <img alt="수직 시선의 프레임" src="/files/attach/images/2025/04/30/07d53c7f66823a13c8c27ecc3816d0b6.jpg" style="width: 100mm; aspect-ratio: 2 / 3;" /> </a> </div> <div style="display: flex; justify-content: center;"> <a data-lightbox="group3" data-title="수평 시선의 연결" href="/files/attach/images/2025/04/30/71b37f3dfe6d58dd3a3f92c7b0f5f778.jpg"> <img alt="수평 시선의 연결" class="horizontal" src="/files/attach/images/2025/04/30/71b37f3dfe6d58dd3a3f92c7b0f5f778.jpg" style="width: 100mm; aspect-ratio: 3 / 2;" /> </a> </div> </div> <div class="text-box bordered left-align" style="margin-top: 10mm; width: calc(100% - 20mm); margin-left: auto; margin-right: auto; box-sizing: border-box;"> <h2 class="title">비정형 레이아웃</h2> <p class="body">일반적인 갤러리 구성에서 벗어난 이 시도는 사진의 배치만으로도 리듬감을 줄 수 있음을 보여줍니다.</p> <p class="desc">비대칭성과 불균형에서 오는 시각적 긴장감이 오히려 집중력을 유도합니다.</p> </div> <div class="pdf-footer center">3. 비정형 배치 실험 -</div> </div>  <div class="pdf-page red" data-page-name="배치 변형 실험" style="padding: 10mm;"> <div class="photo-group column" data-group="group4" style="display: flex; flex-direction: column; gap: 4mm;"> <div style="display: flex; justify-content: flex-end;"> <a data-lightbox="group4" data-title="첫 번째 사진 (오른쪽 정렬)" href="/files/attach/images/2025/04/30/7777915489fe969b04d17e34924afb68.jpg"> <img alt="첫 번째 사진" src="/files/attach/images/2025/04/30/7777915489fe969b04d17e34924afb68.jpg" style="width: 100mm; aspect-ratio: 2 / 3;" /> </a> </div> <div style="display: flex; justify-content: center;"> <a data-lightbox="group4" data-title="두 번째 사진 (가운데 정렬)" href="/files/attach/images/2025/04/30/2b792cf1845c8eeec5db20e68b728837.jpg"> <img alt="두 번째 사진" class="horizontal" src="/files/attach/images/2025/04/30/2b792cf1845c8eeec5db20e68b728837.jpg" style="width: 100mm; aspect-ratio: 3 / 2;" /> </a> </div> </div> <div class="text-box bordered left-align" style="margin-top: 10mm; width: calc(100% - 20mm); margin-left: auto; margin-right: auto; box-sizing: border-box;"> <h2 class="title">배치 변형 실험</h2> <p class="body">한정된 종이 위의 여백을 다르게 써 보는 실험입니다. 같은 이미지도 보는 위치에 따라 흐름이 달라집니다.</p> <p class="desc">사진을 보는 시선이 왼쪽에서 오른쪽으로 옮겨가는 구성입니다.</p> </div> <div class="pdf-footer center">4. 배치 변형 실험 -</div> </div>  <div class="pdf-page black" data-page-name="비정형 세로 확장" style="padding: 10mm;"> <div class="photo-group column" data-group="group5" style="display: flex; flex-direction: column; gap: 4mm;"> <div style="display: flex; justify-content: flex-start;"> <a data-lightbox="group5" data-title="첫 번째 사진 (왼쪽 정렬)" href="/files/attach/images/2025/04/30/d0dd1f909b0ae15ff1e57b855a71189a.jpg"> <img alt="첫 번째 사진" src="/files/attach/images/2025/04/30/d0dd1f909b0ae15ff1e57b855a71189a.jpg" style="width: 100mm; aspect-ratio: 2 / 3;" /> </a> </div> <div style="display: flex; justify-content: flex-end; align-items: flex-start; gap: 10mm;"> <div class="text-box bordered left-align" style="width: calc(100% - 80mm); box-sizing: border-box;"> <h2 class="title">비정형 세로 확장</h2> <p class="body">이 레이아웃은 사진 배치에 따라 시선 이동이 달라지도록 구성됩니다. 텍스트는 시선을 안내하는 역할을 합니다.</p> <p class="desc">우측에 길게 세워진 사진과 좌측에 배치된 설명이 균형을 이룹니다.</p> </div> <a data-lightbox="group5" data-title="세로 사진 (오른쪽 정렬)" href="/files/attach/images/2025/04/30/89d3b27326ccef36a4a74af6a0a75068.jpg"> <img alt="세로 사진" src="/files/attach/images/2025/04/30/89d3b27326ccef36a4a74af6a0a75068.jpg" style="width: 60mm; aspect-ratio: 2 / 3; margin-right: 10mm;" /> </a> </div> </div> <div class="pdf-footer center">5. 비정형 세로 확장 -</div> </div>  <div class="pdf-page gray" data-page-name="비정형 세로 확장 대칭" style="padding: 10mm;"> <div class="photo-group column" data-group="group6" style="display: flex; flex-direction: column; gap: 4mm;"> <div style="display: flex; justify-content: flex-end;"> <a data-lightbox="group6" data-title="첫 번째 사진 (오른쪽 정렬)" href="/files/attach/images/2025/04/30/3070f8408b63e9f38480d383f44d402e.jpg"> <img alt="첫 번째 사진" src="/files/attach/images/2025/04/30/3070f8408b63e9f38480d383f44d402e.jpg" style="width: 100mm; aspect-ratio: 2 / 3;" /> </a> </div> <div style="display: flex; justify-content: flex-start; align-items: flex-start; gap: 10mm;"> <a data-lightbox="group6" data-title="세로 사진 (왼쪽 정렬)" href="/files/attach/images/2025/04/30/9f048bd4f40aaf8df2606d5e33e8d6fa.jpg"> <img alt="세로 사진" src="/files/attach/images/2025/04/30/9f048bd4f40aaf8df2606d5e33e8d6fa.jpg" style="width: 60mm; aspect-ratio: 2 / 3; margin-left: 10mm;" /> </a> <div class="text-box bordered left-align" style="width: calc(100% - 80mm); box-sizing: border-box;"> <h2 class="title">비정형 세로 확장 대칭</h2> <p class="body">페이지 5와 대칭이 되도록 반대편에 사진과 텍스트를 배치한 구성입니다. 공간을 바라보는 시선의 흐름이 전환됩니다.</p> <p class="desc">이번에는 텍스트가 우측, 사진이 좌측에 위치하여 시각적 중심이 반대로 흐릅니다.</p> </div> </div> </div> <div class="pdf-footer center">6. 비정형 세로 확장 대칭 -</div> </div>  <div class="pdf-page white" data-page-name="사진 확장 실험" style="padding: 10mm 10mm;"> <div class="pdf-header left">왼쪽 정렬로 강한 시작을 주는 시도</div> <div class="photo-group" data-group="group7" style="display: flex; justify-content: flex-start; gap: 0; margin-left: -10mm;"> <a data-lightbox="group7" data-title="왼쪽 첫 사진" href="/files/attach/images/2025/04/30/7256c26e4d8527c9c33d8b7b1e926885.jpg"> <img alt="왼쪽 첫 사진" src="/files/attach/images/2025/04/30/7256c26e4d8527c9c33d8b7b1e926885.jpg" style="width: 90mm; aspect-ratio: 2 / 3;" /> </a> <a data-lightbox="group7" data-title="왼쪽 두 번째 사진" href="/files/attach/images/2025/04/30/753b23280cdb6ec0da1fc003305e66d9.jpg"> <img alt="왼쪽 두 번째 사진" src="/files/attach/images/2025/04/30/753b23280cdb6ec0da1fc003305e66d9.jpg" style="width: 90mm; aspect-ratio: 2 / 3;" /> </a> </div> <div class="text-box bordered left-align"> <h2 class="title">사진 확장 실험</h2> <p class="body">이미지를 왼쪽으로 밀착해 배열하면 강한 시선의 진입점을 만들 수 있습니다. 이러한 구성은 시각적 긴장감을 유지합니다.</p> <p class="desc">두 장의 큰 이미지가 페이지를 강하게 장악하며, 해석의 중심도 왼쪽에서 시작됩니다.</p> </div> <div class="pdf-footer center">7. 사진 확장 실험 -</div> </div>  <div class="pdf-page white" data-page-name="사진 확장 실험 대칭" style="padding: 10mm 10mm;"> <div class="pdf-header left">오른쪽 정렬로 시선을 마무리하는 구도</div> <div class="photo-group" data-group="group8" style="display: flex; justify-content: flex-end; gap: 0; margin-right: -10mm;"> <a data-lightbox="group8" data-title="오른쪽 첫 사진" href="/files/attach/images/2025/04/30/8eeb1f85eb6f3d7918ccb1df5a77603f.jpg"> <img alt="오른쪽 첫 사진" src="/files/attach/images/2025/04/30/8eeb1f85eb6f3d7918ccb1df5a77603f.jpg" style="width: 90mm; aspect-ratio: 2 / 3;" /> </a> <a data-lightbox="group8" data-title="오른쪽 두 번째 사진" href="/files/attach/images/2025/04/30/ce0c5edec72fd5bf0ed3738d4d7ac539.jpg"> <img alt="오른쪽 두 번째 사진" src="/files/attach/images/2025/04/30/ce0c5edec72fd5bf0ed3738d4d7ac539.jpg" style="width: 90mm; aspect-ratio: 2 / 3;" /> </a> </div> <div class="text-box bordered left-align"> <h2 class="title">사진 확장 실험 대칭</h2> <p class="body">이 구성은 페이지 7과 마주보는 구조로, 이미지를 오른쪽 끝까지 배치해 시선이 페이지를 빠져나가는 느낌을 줍니다.</p> <p class="desc">강조점이 반대편으로 이동하며, 전체 구성의 흐름을 자연스럽게 마무리합니다.</p> </div> <div class="pdf-footer center">8. 사진 확장 실험 대칭 -</div> </div>  <div class="pdf-page white" data-page-name="전시 확대 실험" style="padding: 0; position: relative;"> <div class="photo-group column" data-group="group9" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"> <a data-lightbox="group9" data-title="상단 사진" href="/files/attach/images/2025/04/30/b557843fd29f4b697bed60158c7a3ad4.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 50%;"> <img alt="상단 사진" src="/files/attach/images/2025/04/30/b557843fd29f4b697bed60158c7a3ad4.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /> </a> <a data-lightbox="group9" data-title="하단 사진" href="/files/attach/images/2025/04/30/b5c0f65eaf82ee0db9fb42fcbb07be31.jpg" style="position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;"> <img alt="하단 사진" src="/files/attach/images/2025/04/30/b5c0f65eaf82ee0db9fb42fcbb07be31.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /> </a> </div> <div class="pdf-footer center" style="position: relative; z-index: 2;">9. 전시 확대 실험 -</div> </div>  <div class="pdf-page white" data-page-name="전시 확대 실험 대칭" style="padding: 0; position: relative;"> <div class="photo-group row" data-group="group10" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex;"> <a data-lightbox="group10" data-title="왼쪽 사진" href="/files/attach/images/2025/04/30/ab32811015d9854448cfa53f5680942f.jpg" style="width: 50%; height: 100%;"> <img alt="왼쪽 사진" src="/files/attach/images/2025/04/30/ab32811015d9854448cfa53f5680942f.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /> </a> <a data-lightbox="group10" data-title="오른쪽 사진" href="/files/attach/images/2025/04/30/b0a726ddfcd60fcfb777336dedf4aeef.jpg" style="width: 50%; height: 100%;"> <img alt="오른쪽 사진" src="/files/attach/images/2025/04/30/b0a726ddfcd60fcfb777336dedf4aeef.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;" /> </a> </div> <div class="pdf-footer center" style="position: relative; z-index: 2;">10. 전시 확대 실험 대칭 -</div> </div> </div> </div>