새 책은 매주 나오는데,
고르는 길은 분류와 정렬뿐이었습니다.
도서 목록은 분야와 브랜드, 시리즈로 나눌 수 있지만 결국 출간일 순서로 이어지는 긴 목록이었습니다. 무엇을 읽을지 아직 정하지 못한 독자에게는 다른 출발점이 필요했습니다.
기분과 주제로도 고를 수 있게
BLUECANVAS SELECTED WORKMUNHAKDONGNE PUBLISHING GROUP · PUBLISHING
MUNHAKDONGNE PUBLISHING GROUP · WEBSITE RENEWAL PROPOSAL
책이 사는
동네
문학동네 출판그룹 홈페이지 리뉴얼 제안
브랜드 해석 · 정보 구조 · UI 디자인 · 읽기 경험
서문 · OVERVIEW프로젝트 개요
서른세 해 동안 자란 동네에
새 지도를 그렸습니다.
문학동네는 1993년 소설집과 산문집 두 권으로 문을 열었습니다. 지금은 스무 개가 넘는 브랜드와 계열사가 모인 출판그룹이 되었고, 도서 목록에는 8,784종의 책이 올라 있습니다.
블루캔버스는 2015년부터 문학동네 홈페이지와 북클럽문학동네, 주간문학동네를 만들고 운영해 왔습니다. 10년 가까이 함께 일하며 모은 질문으로 다음 홈페이지가 어떤 모습이어야 할지 리뉴얼 방향을 제안했습니다. 이 페이지는 그 제안을 정리한 기록입니다.
- #출판그룹
- #도서 탐색
- #큐레이션
- #읽기 경험
- #웹 연재
- #정보 구조
- #브랜드 시스템
- #디자인 시스템
- #반응형
동네를 숫자로 먼저 읽었습니다.
1993
문학동네가
문을 연 해
8,784
도서 목록에
오른 책(종)
128
계간 『문학동네』
2026 가을 통권
256
문학동네시인선
가장 최근 번호
280
세계문학전집
가장 최근 번호
20+
출판그룹의
브랜드와 계열사
숫자 출처: 문학동네 홈페이지 공개 자료(2026년 10월 기준)
1장 · THE QUESTION
8,784권의 책과 스무 개가 넘는 이름이 사는 동네에서, 독자는 오늘 읽을 한 권을 어떻게 만날까요?
2장 · ANALYSIS운영하며 모은 세 가지 과제
운영하며 모은 질문을
교정지처럼 고쳐 보았습니다.
홈페이지를 운영하는 동안 편집부와 독자에게서 비슷한 이야기를 여러 번 들었습니다. 그 이야기를 원고 교정지에 빨간 펜으로 표시하듯 하나씩 짚어 정리했습니다.
새 책은 매주 나오는데,
스무 개가 넘는 브랜드가
같은 목소리로 소개되고 있었습니다.
난다와 엘릭시르, 교유서가와 이야기장수는 독자도, 말투도, 표지도 다릅니다. 하지만 홈페이지에서는 필터 안에 같은 크기의 이름으로만 놓여 있었습니다.
브랜드마다 자기 집과 문패를
하나의 동네가
네 개의 사이트로 나뉘어 있었습니다.
문학동네와 북클럽문학동네, 독파, 주간문학동네는 서로 다른 시기에 만들어져 화면의 말투와 길이 조금씩 달랐습니다. 독자에게는 모두 같은 문학동네입니다.
한 동네의 골목처럼 잇기
3장 · PEOPLE
이 동네를 찾는
이 동네를 찾는
다섯 사람을 그렸습니다.
나이나 성별 대신 홈페이지에 온 이유로 사람을 나누었습니다. 이유가 다르면 첫 화면에서 찾는 것도 달라지기 때문입니다.
오늘 읽을 책을 찾는 독자
“요즘 마음에 맞는 책 한 권만 골라 주면 좋겠어요.”
- 기분이나 주제로 시작하는 탐색
- 믿을 만한 소개와 추천의 말
- 가까운 서점과 구매처
시안에서는 기분으로 고르는 서가
원고를 준비하는 사람
“올해 공모 일정과 원고 분량은 어디에서 보나요?”
- 공모 일정을 한눈에
- 분량과 응모 자격
- 일반투고 방법
시안에서는 원고지 공모 안내
수업을 준비하는 선생님과 사서
“아이들과 읽을 책과 수업 자료가 한곳에 있으면 좋겠어요.”
- 읽기 단계별 추천
- 수업자료 내려받기
- 작가 강연 · 원화 전시 신청
시안에서는 학교와 도서관
책방을 꾸리는 운영자
“우리 서점에 들일 새 책과 행사 소식을 놓치고 싶지 않아요.”
- 이번 주 신간 소식
- 동네서점 에디션
- 북토크와 이벤트
시안에서는 동네서점 소식
연재를 따라 읽는 독자
“오후 3시가 되면 어제 읽던 곳부터 바로 이어 읽고 싶어요.”
- 이어 읽기
- 글자 크기와 밤 모드
- 새 회차 알림
시안에서는 주간문학동네 읽기 화면
4장 · BRAND THINKING
「동네」라는 두 글자에서
「동네」라는 두 글자에서
출발했습니다.
“문학동네에서 발원한 다양한 임프린트와 계열사들이 함께하고 있으며, 저마다 개성 있는 소리와 빛으로 풍요롭고 다채로운 책의 세계를 만들어 가고 있습니다.”문학동네 출판그룹 소개
- 01 · 1993 · 한 권이름 하나로 문을 열었습니다
1993년, 문학동네는 소설집과 산문집 두 권으로 시작했습니다.
- 02 · 1999–2022 · 서가브랜드가 한 권씩 꽂혔습니다
어린이와 만화, 예술과 인문, 미스터리와 에세이까지 브랜드가 하나씩 늘어 서가가 되었습니다.
- 03 · 지금 · 동네책등이 모이면 동네가 됩니다
높이도 색도 다른 책등이 나란히 선 모습은 사람이 모여 사는 동네의 스카이라인을 닮았습니다. 홈페이지의 그래픽은 여기에서 시작했습니다.
BRAND STATEMENT
책을 파는 홈페이지에서,
책이 사는 동네로.
슬로건 「책으로 더 나은 세상을 꿈꿉니다」에서제안 문장 「책이 사는 동네」로
표지가 주인공입니다.
표지는 편집자와 디자이너가 가장 오래 고민한 책의 얼굴입니다. 화면은 표지를 자르거나 글자로 덮지 않고, 종이처럼 조용히 받쳐 줍니다.
한 권씩 천천히 보여 줍니다.
목록을 길게 늘어놓기 전에 오늘 만날 한 권과 그 책의 첫인상을 먼저 건넵니다. 고르는 시간도 읽는 경험의 일부이기 때문입니다.
골목처럼 이어집니다.
책에서 작가로, 작가에서 연재로, 연재에서 북클럽으로 이어집니다. 한 권을 다 읽은 뒤에도 갈 곳이 늘 열려 있어야 합니다.
PHOTOGRAPHY DIRECTION
사람의 얼굴보다
사람의 얼굴보다
책이 놓인 자리를 찍습니다.
출판사 홈페이지에서 사진은 표지를 돋보이게 하는 배경이어야 합니다. 책상과 서가, 동네서점과 도서관처럼 책이 실제로 놓이는 장소와 손의 움직임으로 분위기를 전하는 기준을 세웠습니다.
- DO책이 놓인 실제 장소
- DO손과 종이의 질감, 창으로 드는 빛
- DON'T표지 위에 글자 얹기
- DON'T작가 사진을 동의 없이 자르기
5장 · COLOR SYSTEM표지가 가장 화려하니까,
표지가 가장 화려하니까,
화면은 종이가 됩니다.
한 해에도 수백 권의 표지가 새로 나옵니다. 홈페이지가 색을 더하면 표지와 다투게 됩니다. 그래서 바탕은 미색 종이로, 글자는 먹으로 정하고, 강조색은 책 속 가름끈 한 가닥만 남겼습니다.
COLOR EXPLORATION세 가지 팔레트를 같은 화면에 입혀 보았습니다
OPTION 1 · 먹과 흰 종이로고의 검정을 그대로 가져왔습니다. 단단하지만 신문처럼 차갑고, 흰 표지는 흰 바탕에 묻혀 경계가 사라졌습니다.
OPTION 2 · 표지의 모든 색분야마다 색을 주었더니 화면이 표지와 경쟁했습니다. 바탕색과 비슷한 표지는 아예 보이지 않았습니다.
OPTION 3 · 종이와 먹, 가름끈미색 바탕에서는 밝은 표지와 어두운 표지 모두 경계가 살아납니다. 붉은 가름끈은 새 소식과 지금 위치에만 씁니다.
미색Paper
#F3EFE6RGB 243 239 230
기본 바탕
책 종이를 닮은 바탕입니다. 순백보다 눈이 편하고, 흰 표지의 가장자리도 사라지지 않습니다.
- 먹 글자와
- 16.0:1 AAA
먹Ink
#151412RGB 21 20 18
글자와 로고
본문과 로고의 색입니다. 순수한 검정보다 한 톤 따뜻해서 미색과 잘 어울립니다.
- 미색 바탕과
- 16.0:1 AAA
연필Pencil
#6B665ERGB 107 102 94
보조 글자
저자, 날짜, 설명처럼 한 걸음 물러서는 글자에 씁니다. 미색 위에서도 4.5:1을 넘습니다.
- 미색 바탕과
- 5.0:1 AA
- 먹 글자와
- 3.2:1 큰 글자
가름끈Ribbon
#B83A27RGB 184 58 39
지금, 여기
새 책 표시와 현재 탭, 행동을 권하는 버튼에만 씁니다. 책 속 가름끈처럼 한 가닥만 둡니다.
- 미색 바탕과
- 5.0:1 AA
- 먹 글자와
- 3.2:1 큰 글자
밤Night
#1C2433RGB 28 36 51
밤의 읽기
주간문학동네 연재와 밤 모드, 어두운 장면의 바탕입니다.
- 미색 바탕과
- 13.6:1 AAA
- 먹 글자와
- 1.2:1 장식만
모래Sand
#D9C7A3RGB 217 199 163
책등
책등 스카이라인과 카드 바탕에 쓰는 보조색입니다. 글자는 항상 먹으로 올립니다.
- 미색 바탕과
- 1.4:1 장식만
- 먹 글자와
- 11.1:1 AAA
바탕을 고르기 전에
표지 열 권을 먼저 올렸습니다.
시인선처럼 밝은 표지와 세계문학전집처럼 어두운 표지를 한 화면에 놓고 바탕색만 바꿔 보았습니다. 아래 버튼을 눌러 직접 비교할 수 있습니다.
미색 바탕에서 가장 많은 표지가 제 윤곽을 지켰습니다. 흰 표지는 한 톤 어두운 바탕 덕분에, 검은 표지는 밝은 바탕 덕분에 경계가 또렷합니다.
COLOR RATIO
한 화면에서 색이 차지하는 비율입니다. 가름끈은 100 가운데 2만 씁니다.
6장 · TYPOGRAPHY두 가지 글꼴, 두 가지 역할
이야기 · 명조
문학
Noto Serif KR · 400–900길잡이 · 고딕
동네
Pretendard · 400–900길은 고딕으로,
이야기는 명조로.
문학동네 로고의 단단한 고딕은 메뉴와 버튼처럼 길을 안내하는 자리에 썼습니다. 책 본문을 닮은 명조는 책 제목과 소개, 연재처럼 이야기가 흐르는 자리에 썼습니다.
한 화면 안에서도 역할이 바뀌면 글꼴이 바뀝니다. 그래서 독자는 어디를 눌러야 하는지, 어디를 읽어야 하는지 따로 배우지 않아도 알 수 있습니다.
- Display · 명조 900책이 사는 동네96 / 1.15
- Heading · 명조 700이번 주 새로 나온 책52 / 1.25
- Title · 고딕 700공모전 · 투고 안내24 / 1.4
- Reading · 명조 400이야기는 내가 멈춘 자리에서 조용히 기다리고 있었다.19 / 1.9
- Body · 고딕 400월요일부터 금요일까지 매일 오후 3시에 새 회차가 올라옵니다.17 / 1.75
- Caption · 고딕 500문학동네시인선 256 · 2026.09.2914 / 1.5
GRAPHIC SYSTEM책등 하나, 가름끈 하나, 밑줄 하나
책에서 꺼낸
세 가지 부품으로 모든 것을.
책등은 분류와 브랜드를, 가름끈은 지금 위치와 새 소식을, 밑줄은 꼭 읽어야 할 문장을 표시합니다. 세 가지 모두 책을 읽는 사람이라면 이미 알고 있는 모양이라 따로 설명하지 않아도 됩니다.
탭을 눌러 보세요. 가름끈이 지금 위치로 옮겨 갑니다.
7장 · DESIGN DIRECTIONS같은 브리프, 네 권의 시안
하나의 정답을 그리기 전에
네 권의 시안을 만들었습니다.
같은 사실과 같은 팔레트에서 출발해도 무엇을 먼저 보여 주느냐에 따라 출판사의 얼굴은 크게 달라집니다. 동네의 온기, 문장의 힘, 밤의 몰입, 지도의 친절이라는 네 방향으로 메인 페이지를 끝까지 그렸습니다.
아래 화면은 실제로 제작한 시안입니다. 스크롤을 내리면 각 시안의 메인 페이지가 위에서 아래로 넘어가고, 왼쪽에는 지금 보이는 영역의 이름이 표시됩니다.
제1권
최종 제안
Town of Books책이 사는 동네
출판그룹을 하나의 동네로, 브랜드를 집으로, 독자를 이웃으로 보았습니다. 미색 종이 위에 표지가 놓이고, 책등 스카이라인과 가름끈이 길을 안내합니다.
- 선반 위에 선 이번 주 신간과 검색으로 여는 첫 화면
- 책등 스카이라인으로 보여 주는 스무 개가 넘는 브랜드
- 오후 3시를 알리는 주간문학동네 밤 띠
Noto Serif KR · Pretendard
제2권
탐색 시안
One Sentence한 문장
한 문장이 한 권을 연다는 생각으로 만든 문예지 같은 방향입니다. 흰 종이와 먹, 커다란 명조 문장이 화면을 이끕니다.
- 신간 소개 첫 줄로 여는 첫 화면
- 「이달의 문장들」 목록과 엄격한 표지 그리드
- 책 뒤 찾아보기처럼 정리한 브랜드 색인
Noto Serif KR 300–900
제3권
탐색 시안
Night Library밤의 서재
오늘 밤 펼칠 책을 고르는 몰입형 방향입니다. 어두운 서재에서 표지만 불빛을 받아 한 권 한 권이 무대 위에 선 것처럼 보입니다.
- 원근감 있는 표지 넘기기로 여는 첫 화면
- 불 켜진 창처럼 빛나는 신간 그리드
- 밤 모드로 읽는 연재 미리보기
Noto Serif KR · Pretendard
제4권
탐색 시안
Neighborhood Map동네 지도
어린이와 학부모, 선생님까지 누구나 길을 찾기 쉬운 일러스트 지도 방향입니다. 서점과 도서관, 광장과 극장이 그대로 메뉴가 됩니다.
- 번호 핀으로 메뉴를 안내하는 동네 지도 첫 화면
- 초승달에서 보름달까지 자라는 어린이 읽기 단계
- 광장 게시판에 꽂힌 공모전 쪽지
Gowun Batang · Pretendard
8장 · DECISION무엇을 기준으로 골랐을까요?
예쁜 시안보다
표지가 빛나는 시안을.
일곱 가지 기준으로 네 시안을 함께 평가했습니다. 가장 무게를 둔 기준은 표지가 돋보이는지, 그리고 매주 새 책을 올리는 운영이 가벼운지였습니다. 출판사 홈페이지는 해마다 수백 권의 새 표지를 받아 내야 하기 때문입니다.
평가 기준A · 책이 사는 동네B · 한 문장C · 밤의 서재D · 동네 지도
표지가 돋보이는가
처음 온 독자의 탐색
브랜드와 시리즈의 확장
문학 출판사다운 품격
매주 신간을 올리는 운영
모바일에서의 읽기
접근성
B · 한 문장
「오늘의 문장」과 명조 타이포그래피
C · 밤의 서재
주간문학동네의 밤 모드 읽기
D · 동네 지도
지도형 메뉴와 초승달 · 반달 · 보름달 읽기 단계
A · 책이 사는 동네최종 제안안
채택하지 않은 시안의 장점은 버리지 않고 A안의 골목으로 옮겨 놓았습니다.
- 01다시 읽기10년 치 운영 기록과 문의 살펴보기
- 02나누기방문 목적으로 다섯 사람 정의하기
- 03세우기「동네」에서 브랜드 언어 꺼내기
- 04그리기메인 시안 네 권
- 05고르기일곱 가지 기준으로 함께 평가
- 06다듬기도서 상세, 연재, 공모전 화면 설계
9장 · EXPERIENCE한 권을 만나는 네 갈래 길
목록을 내려가는 대신
한 권을 만나는 길을.
최종 제안안 A의 화면 가운데 독자가 가장 자주 지나는 네 곳을 골라 따로 설계했습니다. 아래 화면은 모두 직접 눌러 볼 수 있습니다.
01 · 큐레이션
오늘의 기분으로 고르는 서가
분야를 몰라도 시작할 수 있도록 기분과 주제로 서가를 다시 꽂습니다.
누구의 책임도 아닌
안 좋은 날이 좋은 날
물끄러미
시대횡단
맥베스
이노 기담
처음 슬픔이 깨어날 때
태양이 문을 벌컥
동물, AI, 신
어두운 상점들의 거리
대부호
종이 인형 목욕시키기
지구식 표현으로 말하자면
분열하는 미국
가호
재이
횟빛횟빛
데굴데굴 동시 한 알이 굴러왔다
일본의 탄생
해방의 날
《미스테리아》 65호
포도
초도리와 말썽 많은 숲 2
여덟 개의 우주
24권을 서가에 꽂았습니다.
02 · 도서 상세
책 한 권에게 집 한 채를
표지를 자르지 않고 선반 위에 세우고, 서지 정보와 다음에 갈 곳을 한 화면에 모았습니다.
문학동네시인선 256
문학동네시인선255 · 256번을 나란히 보여 주고, 시리즈 전체 목록으로 이어집니다.
안 좋은 날이 좋은 날
문학동네시인선 256번째 시집으로 박판식 시인의 『안 좋은 날이 좋은 날』을 펴낸다.
출판사 책 소개 첫 문장문학동네시인선255 · 256번을 나란히 보여 주고, 시리즈 전체 목록으로 이어집니다.- 독파이 책으로 완독 챌린지 함께하기
- 북클럽문학동네회원 혜택과 북클럽 도서 보기
- 동네서점가까운 서점에서 찾기
구매처 보기가름끈 꽂기
03 · 주간문학동네
오후 3시, 멈춘 자리부터 다시
월요일부터 금요일까지 매일 오후 3시에 새 회차가 올라옵니다. 읽던 자리를 기억하고, 글꼴과 크기, 줄 간격, 바탕을 독자가 고릅니다.
글꼴
크기
줄 간격
바탕
3화 · 가름끈이 있는 자리
오후 세 시가 되면 동네 책방의 유리문에 햇빛이 비스듬히 걸린다. 주인은 그 시간에 맞춰 새로 들어온 책을 한 권씩 꺼내 표지를 손바닥으로 쓸어 본다. 아직 아무도 펼치지 않은 책에서는 종이 냄새가 먼저 난다.
나는 어제 읽다 만 쪽을 찾아 가름끈을 당긴다. 이야기는 내가 멈춘 자리에서 조용히 기다리고 있었다. 창밖으로 자전거 한 대가 지나가고, 다음 문장이 천천히 시작된다.
본문은 화면 설계를 위해 블루캔버스가 쓴 예시 문장입니다.
04 · 공모전 · 투고원고를 쓰는 사람의 달력은
원고를 쓰는 사람의 달력은
원고지 위에
문학동네의 공모와 일반투고를 한 장의 원고지에 모았습니다. 무엇을 준비해야 하는지 한 칸씩 읽히도록 상 이름을 원고지 칸에 한 글자씩 앉혔습니다.
공모 이름과 회차: 문학동네 공모전 페이지(2026년 10월 기준)
제32회문학동네소설상
2026문학동네신인상
제28회문학동네어린이문학상
제17회문학동네청소년문학상
제15회문학동네동시문학상
제4회문학동네초승달문학상
제10회엘릭시르미스터리대상
일반투고
10장 · INFORMATION ARCHITECTURE노선도로 그린 메뉴
메뉴는 조직도가 아니라
동네 지도처럼.
출판그룹의 부서 구조 대신 독자가 하려는 일로 메뉴를 다시 묶었습니다. 「도서/저자」 안에 있던 매거진은 따로 길을 냈고, 「고객센터」의 공지는 「동네 소식」으로 옮겼습니다.
홈에서 여섯 갈래의 노선이 출발하고, 북클럽문학동네와 독파, 주간문학동네, 카페꼼마는 어느 노선에서든 갈아탈 수 있는 패밀리 정류장으로 묶었습니다.
기존 「도서/저자」책
새로 나온 책 · 큐레이션 · 시리즈 · 수상작 · 작가
기존 「도서/저자 안」매거진
계간 문학동네 · 미스테리아
기존 「공모전/투고」공모전·투고
공모 안내 · 수상작 발표 · 일반투고
기존 「학교/도서관」학교와 도서관
수업자료 · 작가 강연 · 원화 전시 · 북큐레이션
기존 「고객센터 공지」동네 소식
공지 · 행사 · 채용 · 뉴스레터
기존 「문학동네 소개」문학동네 소개
출판그룹 · 브랜드 · 연혁 · 오시는 길
11장 · MOBILE손안의 동네
손안에서도
한 권이 먼저.
문학동네 홈페이지를 처음 여는 곳은 휴대폰인 경우가 많습니다. 작은 화면에서도 검색과 이번 주 새로 나온 책을 첫 화면에 두고, 표지는 옆으로 넘기며 고르게 했습니다.
- 첫 화면에 검색과 이번 주 새로 나온 책
- 표지를 자르지 않는 가로 서가
- 연재는 이어 읽기 버튼부터
- 엄지가 닿는 자리의 큰 버튼
맺음말 · AND TODAY함께 운영하며 이어 온 질문
10년 가까이 함께 운영하며
같은 질문을 이어 갑니다.
블루캔버스는 2015년부터 홈페이지와 북클럽문학동네, 주간문학동네를 만들고 운영하며 문학동네와 함께했습니다.
제안을 준비하며 세운 질문은 그 시간 동안 늘 작업의 기준이 되었습니다. 표지를 어떻게 돋보이게 할지, 처음 온 독자에게 어떤 길을 먼저 열어 줄지, 한 권을 다 읽은 다음에는 어디로 이어 줄지를 먼저 묻습니다.
NOW OPERATING운영 중인 문학동네 홈페이지
신간과 매거진, 공모전과 학교·도서관 소식까지. 문학동네의 새 소식이 이곳에서 꾸준히 갱신됩니다.
YOUR STORY, READ WITH CARE.
당신의 브랜드에는
당신의 브랜드에는
어떤 이야기가 살고 있나요?
출판사와 미디어, 문화 기관의 홈페이지는 오래 읽히는 이야기를 담는 곳입니다.
누가 읽으러 오는지부터 함께 정리하겠습니다.
