기사 3개를
나란히
넓은 화면에서는 기사 목록을 3열로 배치해 여러 소식을 한눈에 살펴봅니다.
반응형 웹진
PC에서는 넓게,
모바일에서는 한 줄로.
ONE DESIGN, EVERY SCREEN어떤 화면에서 만나도
어떤 화면에서 만나도
읽고 싶은 웹진.
인터뷰, 기획 기사, 기관 소식까지. 여러 코너와 개별 기사 페이지를 연결해 풍성한 콘텐츠를 체계적으로 보여줍니다.
실제 반응형 샘플 열기같은 콘텐츠, 다른 배치화면 폭에 맞춰 3열 → 2열 → 1열로.
PC기사 3개를 나란히
소식지 · 9월호
소식지2026. 09
VOL. 09
VOL. 09
월간 소식지가까이에서 만나는
우리 동네의 새로운 일상.함께 읽고, 배우고, 나누는 9월의 이야기
우리 동네의 새로운 일상.함께 읽고, 배우고, 나누는 9월의 이야기
이번 달의 이야기전체 이야기 →
공간 이야기우리 동네 도서관의 새로운 시작독서 모임과 작은 전시를 만날 수 있는 새로운 공간을 소개합니다.기사 읽기 ↗
사람과 문화함께 배우는 즐거움, 가을 문화교실그림과 글쓰기로 일상을 기록하는 주민들의 이야기를 전합니다.기사 읽기 ↗
우리 동네가족과 함께 가꾸는 동네 정원작은 실천으로 시작하는 우리 마을의 초록빛 변화를 만나보세요.기사 읽기 ↗9월 참여 안내일정 예시
12
토요일 어린이 책 놀이터어린이자료실 · 가족 프로그램
안내19
일상을 그리는 수채화 교실문화교실 · 성인 프로그램
안내태블릿기사 2개씩 배치
소식지 · 9월호
소식지2026. 09
VOL. 09
VOL. 09
월간 소식지가까이에서 만나는
우리 동네의 새로운 일상.함께 읽고, 배우고, 나누는 9월의 이야기
우리 동네의 새로운 일상.함께 읽고, 배우고, 나누는 9월의 이야기
이번 달의 이야기전체 이야기 →
공간 이야기우리 동네 도서관의 새로운 시작독서 모임과 작은 전시를 만날 수 있는 새로운 공간을 소개합니다.기사 읽기 ↗사람과 문화함께 배우는 즐거움, 가을 문화교실그림과 글쓰기로 일상을 기록하는 주민들의 이야기를 전합니다.기사 읽기 ↗우리 동네가족과 함께 가꾸는 동네 정원작은 실천으로 시작하는 우리 마을의 초록빛 변화를 만나보세요.기사 읽기 ↗9월 참여 안내일정 예시
12
토요일 어린이 책 놀이터어린이자료실 · 가족 프로그램
안내19
일상을 그리는 수채화 교실문화교실 · 성인 프로그램
안내모바일기사 1개씩 세로로
소식지 · 9월호
소식지2026. 09
VOL. 09
VOL. 09
월간 소식지가까이에서 만나는
우리 동네의 새로운 일상.함께 읽고, 배우고, 나누는 9월의 이야기
우리 동네의 새로운 일상.함께 읽고, 배우고, 나누는 9월의 이야기
이번 달의 이야기전체 이야기 →
공간 이야기우리 동네 도서관의 새로운 시작독서 모임과 작은 전시를 만날 수 있는 새로운 공간을 소개합니다.기사 읽기 ↗사람과 문화함께 배우는 즐거움, 가을 문화교실그림과 글쓰기로 일상을 기록하는 주민들의 이야기를 전합니다.기사 읽기 ↗우리 동네가족과 함께 가꾸는 동네 정원작은 실천으로 시작하는 우리 마을의 초록빛 변화를 만나보세요.기사 읽기 ↗9월 참여 안내일정 예시
12
토요일 어린이 책 놀이터어린이자료실 · 가족 프로그램
안내19
일상을 그리는 수채화 교실문화교실 · 성인 프로그램
안내기사 목록에서 원하는 이야기를 선택하면 개별 기사 페이지로 이동합니다.
기사 3개를
기사 2개씩
균형 있게
중간 크기 화면에서는 기사 목록을 2열로 줄이고 간격을 조정합니다.
기사 1개씩
세로로 읽기
작은 화면에서는 메뉴를 접고 기사를 1열로 배치해 위에서 아래로 읽습니다.
A PLACE FOR EVERY STORY좋은 콘텐츠에는
좋은 콘텐츠에는
찾기 쉬운 길이 있습니다.
메인에서 관심 있는 코너를 발견하고, 상세 기사에서 깊이 읽고, 관련 이야기로 자연스럽게 이동합니다.
- 기획 · 인터뷰 · 뉴스 등 코너별 분류
- 사진과 본문에 집중하는 기사 페이지
- 목록과 관련 기사로 이어지는 연결
웹진 메인이번 호의 주요 이야기
기획 특집
인터뷰
새로운 소식
사람과 문화문화교실에서만난 이웃.
우리 동네우리 가족의정원 가꾸기.
PRODUCTION PROCESS구조부터 화면까지,
구조부터 화면까지,
꼼꼼하게 연결합니다.
- STEP 01
템플릿 디자인 선택
코너 수와 기사 분량에 맞는 메인·상세 템플릿을 선택합니다. 메뉴의 순서와 대표 기사, 사진 비율을 정하고 브랜드 색상을 적용합니다.
- 메인 화면과 기사 상세 디자인
- 코너별 목록과 메뉴 구성
- 브랜드 색상 · 서체 · 이미지
- STEP 02
HTML 코딩과 기기별 검수
메인과 기사 페이지를 제작하고 서로 연결합니다. 화면 폭에 따른 메뉴, 제목 줄바꿈, 본문과 사진의 배치를 확인합니다.
- PC · 태블릿 · 모바일 화면
- 목록 · 기사 · 외부 링크 연결
- 긴 제목과 다양한 사진 비율
CONTENT CHECKLIST코너별로 정리하면,
코너별로 정리하면,
시작이 쉬워집니다.
전체 기사 수와 메뉴 구성을 바탕으로 제작 범위와 일정을 함께 정합니다.