도, 레, 미
DO, RE, MI 세 음절은 세 줄로 엇갈려 쌓여 있습니다. 계이름의 첫 세 음이자 음악이 시작되는 소리입니다. 세 줄을 오선 위에 올리면 회사 이름이 그대로 멜로디가 됩니다.
DOREMI ENTERTAINMENT · SINCE 2006로고 속 청록색 사다리꼴은
영사기에서 나온 빛입니다
16 DRAMAS · 18 OST그 빛으로 드라마 열여섯 편을 비추고
OST 열여덟 편을 만들었습니다
WEBSITE RENEWAL이제 홈페이지에도
불을 켤 차례입니다
DOREMI ENTERTAINMENT · WEBSITE RENEWAL PROPOSAL
포스터를 걸던 벽을,불이 켜지는 상영관으로
도레미엔터테인먼트 홈페이지 리뉴얼 제안
SCENE & SCORE · STORIES THAT STAY 두 가지 방향
S#01 / OVERVIEW프로젝트 개요
드라마를 만들고,
그 장면에 음악을 입히는 회사
도레미엔터테인먼트는 2006년 SBS 〈돌아와요 순애씨〉를 시작으로 드라마를 만들어 온 제작사입니다. 지금까지 드라마 16편을 직접 제작했고, 드라마 OST 18편을 만들었습니다. 배우 매니지먼트와 작품 마케팅도 함께 맡고 있습니다.
블루캔버스는 이 회사의 홈페이지를 새로 설계하는 두 가지 방향을 제안했습니다. 영사기의 빛과 음악으로 장면을 여는 SCENE & SCORE, 영화 같은 영상과 딥 틸·앰버 색으로 이야기의 여운을 담은 STORIES THAT STAY입니다. 이 페이지에는 두 시안이 나오기까지 고민한 내용과 과정을 정리했습니다.
- 2006첫 작품 〈돌아와요 순애씨〉
- 16직접 제작한 드라마
- 18제작한 드라마 OST
- 4드라마 · OST · 매니지먼트 · 마케팅
S#02 / CHALLENGE출발점
- 1메뉴는 HOME, ABOUT, WORK, PR 네 개입니다.
- 2첫 화면에는 작품 포스터가 두 줄로 이어집니다.
- 3메뉴 옆에 SNS 바로가기 버튼이 있습니다.
FOUR QUESTIONS
리뉴얼은
네 가지 질문에서 시작했습니다
- Q1첫 화면에서 이 회사가 하는 일을 알 수 있을까요?
드라마, OST, 매니지먼트, 마케팅 네 가지 일을 메인 화면 안에서 한 장면씩 보여 주기로 했습니다.
- Q2드라마와 음악을 함께 만든다는 강점이 보일까요?
작품마다 드라마 제작인지 OST 제작인지 역할을 함께 적고, OST에는 따로 한 장면을 내주었습니다.
- Q32006년부터 쌓은 작품을 한눈에 볼 수 있을까요?
연도별 작품을 A안은 필름 스트립 위에, B안은 연혁 목록으로 정리했습니다.
- Q4휴대폰에서도 같은 분위기가 전해질까요?
가로로 흐르는 장면은 손가락으로 넘기게 바꾸고, 세로 화면에 맞춰 글자 크기와 장면 길이를 다시 정했습니다.
S#03 / BRAND브랜드 해석
이름과 심벌 안에
이미 답이 있었습니다
새로운 상징을 만들기 전에 지금의 로고를 다시 읽었습니다. 세 음절의 이름, 청록색 사다리꼴, 그리고 두 가지 색만으로 이루어진 로고에서 홈페이지 전체의 이야기를 끌어냈습니다.
영사기의 빛
RE 앞의 청록색 사다리꼴은 회사 심벌에서 왔습니다. 심벌에서 이 도형은 필름 릴 두 개 옆에 놓여 영사기 모양을 이룹니다. 사다리꼴은 영사기에서 스크린으로 뻗어 나가는 빛이고, 로고에서는 릴 대신 RE가 영사기 자리에 섰습니다.
빛은 장면, 음은 음악
빛은 스크린에 맺히는 장면을, 계이름은 그 장면에 흐르는 음악을 뜻합니다. 도레미가 하는 두 가지 일인 드라마와 OST가 이름과 심벌에 함께 들어 있습니다. 첫 번째 시안의 이름 SCENE & SCORE는 이 해석에서 나왔습니다.
먹색과 청록색
로고에 쓰인 색은 먹색에 가까운 #231F20과 청록색 #81ADA8 두 가지뿐입니다. 두 시안의 팔레트는 모두 이 청록색에서 출발했습니다.
S#04 / MOODBOARD무드보드
단어를 장면으로
먼저 찍어 보았습니다
브랜드 해석에서 나온 단어는 빛, 현장, 악보, 무대, 도시, 필름이었습니다. 단어마다 어울리는 장면을 이미지로 만들어 두 시안의 재료로 썼습니다. 배우 사진 없이도 드라마 제작사의 분위기가 전해지도록 하기 위해서입니다.
-
01LIGHT빛A안 · 첫 장면 -
02SET현장A안 · 드라마 -
03SCORE악보A안 · OST -
04STAGE무대A안 · 매니지먼트 -
05CITY도시A안 · 마케팅 -
06FILM필름B안 · 첫 장면 -
07SEOUL골목B안 · 장면 전환 -
08GENRE사극장르 실험 -
09GENRE스릴러장르 실험 -
10GENRE로맨스장르 실험 -
11GENRE가족극장르 실험
S#05 / STRUCTURE방문자와 정보 구조
홈페이지를 여는 사람은
네 부류였습니다
제작사 홈페이지에는 시청자뿐 아니라 함께 일할 사람도 자주 찾아옵니다. 방문하는 사람마다 확인하려는 정보가 달라서, 각자가 도착할 장면을 먼저 정했습니다.
- 01방송사 · OTT · 공동 제작사
어떤 작품을 어느 채널과 만들었는지 확인합니다.
S#04 WORKS · S#06 HISTORY - 02배우와 신인 지망생
매니지먼트 방식과 오디션 소식을 찾습니다.
S#07 NEW FACE - 03작곡가 · 가수 · 음반사
어떤 드라마의 OST를 만들었는지 살펴봅니다.
S#05 OST - 04기자와 시청자
작품 소식과 보도자료, 배경화면을 찾습니다.
S#08 PR ROOM
홈페이지 구성을
대본처럼 썼습니다
메뉴 네 개였던 구조를 아홉 개의 장면으로 나눴습니다. 장면마다 장소와 시간, 보여 줄 내용을 대본의 씬 리스트처럼 적은 뒤 디자인을 시작했습니다. 아래는 A안 SCENE & SCORE의 씬 리스트입니다.
기존 메뉴HOMEABOUTWORKPR
새 장면S#01S#02S#03S#04S#05S#06S#07S#08S#09
〈도레미엔터테인먼트〉 홈페이지씬 리스트A안 SCENE & SCORE · 아홉 개의 장면
- S#01.THE BEAM영사실 / 밤기존 HOME
영사기의 빛이 켜지고, 빛이 오선이 되어 도·레·미 세 음이 울립니다. 로고와 함께 SCENE & SCORE가 나타납니다.
- S#02.ABOUT종이 위 / 낮기존 ABOUT
2006년 첫 작품부터 지금까지를 숫자 네 개로 정리하고 회사 소개로 이어집니다.
- S#03.BUSINESS촬영장 / 밤기존 ABOUT
드라마, OST, 매니지먼트, 마케팅을 한 장면씩 넘기며 보여 줍니다.
- S#04.WORKS상영관 / 밤기존 WORK
직접 만든 드라마 16편이 필름처럼 가로로 흐릅니다.
- S#05.OST녹음실 / 낮기존 WORK
오선 위의 음표와 파형 사이로 OST 18편을 소개합니다.
- S#06.HISTORY필름 보관실 / 밤기존 WORK
2006년부터 2020년까지의 작품을 필름 스트립 위에 올립니다.
- S#07.NEW FACE빈 무대 / 밤기존 PR
조명 아래 빈 의자에서 다음 주인공을 찾는 오디션 소식으로 이어집니다.
- S#08.PR ROOM자료실 / 낮기존 PR
보도자료, 공지사항, 배경화면, 브랜드 필름을 네 장의 카드로 정리합니다.
- S#09.ENDING CREDITS엔딩 / 밤새 장면
회사 정보와 필모그래피가 엔딩 크레디트처럼 올라가며 사이트가 끝납니다.
S#06 / COLOR컬러 차트
청록색 하나에서
두 개의 팔레트로
로고의 청록색 #81ADA8을 기준으로 밝기와 온도를 옮겨 가며 색을 찾았습니다. 빛 쪽으로 밝히면 A안의 민트가 되고, 필름 쪽으로 낮추면 B안의 딥 틸이 됩니다. B안에는 청록색의 반대편에 있는 텅스텐 조명의 앰버를 더해 극장의 따뜻함을 얹었습니다.
CI Teal
#81ADA8로고의 사다리꼴- 빛 쪽으로 밝힘Beam Mint
#A6E3D9영사기 빛을 받은 청록 · A안 - 그늘 쪽으로 낮춤Shade Teal
#3F6F69밝은 바탕 위의 강조색 · A안 - 필름 베이스까지 낮춤Film Teal
#0C292A레코드와 문의 장면의 바탕 · B안 - 반대편 색Tungsten Amber
#EFB563극장 조명의 따뜻한 빛 · B안
A · SCENE & SCORE
영사실의 어둠과 빛-
바탕 · 60%불이 꺼진 영사실의 색입니다. 빛과 글자가 가장 또렷하게 보이도록 바탕 대부분을 이 색으로 칠합니다.
-
스크린 · 26%빛이 닿은 스크린의 색입니다. 회사 소개와 OST처럼 밝은 장면의 바탕과 어두운 장면의 글자에 씁니다.
-
로고의 빛 · 7%로고의 사다리꼴에서 그대로 가져온 청록색입니다. 로고와 작은 강조에만 씁니다.
-
켜진 빛 · 4%청록색을 빛 쪽으로 밝힌 색입니다. 타임코드, 장면 번호처럼 어둠 속의 작은 표시에 씁니다.
-
그늘의 빛 · 3%청록색을 그늘 쪽으로 낮춘 색입니다. 밝은 바탕 위에서 장면 번호와 강조 글자에 씁니다.
B · STORIES THAT STAY
필름과 텅스텐 조명-
밤 · 46%푸른 기운이 도는 검정입니다. 영상과 사진이 놓이는 바탕입니다.
-
필름 베이스 · 22%청록색을 필름 베이스 깊이까지 낮춘 색입니다. 레코드와 문의 장면의 넓은 면에 씁니다.
-
종이 · 22%작품 갤러리와 연혁의 바탕입니다. 극장 프로그램북의 종이를 떠올렸습니다.
-
조명 · 7%청록색의 반대편에 있는 텅스텐 조명의 색입니다. 제목의 한 단어와 버튼에만 놓습니다.
-
여운 · 3%보조 문장과 캡션의 색입니다. 어두운 바탕에서도 읽히는 밝기로 맞췄습니다.
색 견본을 누르면 HEX 값이 복사됩니다. 견본 안의 숫자는 그 위에 올리는 글자색과의 명도 대비입니다.
S#07 / TYPOGRAPHY서체
화면비처럼
늘어나는 글자
A안의 영문 제목은 글자 폭을 62에서 125까지 바꿀 수 있는 Archivo로 썼습니다. 아래 견본처럼 폭을 넓히면 4:3 화면이 시네마스코프로 펼쳐지는 느낌이 납니다. 타임코드와 장면 번호는 JetBrains Mono, 한글은 Pretendard로 맞췄습니다. B안은 영화 포스터의 제목처럼 좁고 높은 Barlow Condensed를 골랐습니다.
Archivo · A안 제목
wdth 62SCENE & SCORE
JetBrains Mono · 타임코드
EP / HH:MM:SS:FFEP.01 00:00:00:00
S#01 THE BEAM · S#02 ABOUT · S#03 BUSINESS
Barlow Condensed · B안 제목
600STORIES
THAT STAY.
Pretendard · 한글 본문
400 · 600 · 800장면이 끝나도
음악은 남습니다.
드라마의 감정을 가장 오래 기억하게 하는 것은 음악입니다.
S#08 / MOTION모션 원칙
스크롤이
재생 버튼이 됩니다
두 시안 모두 스크롤을 영상의 재생 헤드처럼 다뤘습니다. 내리면 장면이 앞으로 가고, 올리면 되감깁니다. 방문자가 속도를 정하기 때문에 긴 이야기도 지루하지 않게 볼 수 있습니다.
스크롤이 재생 헤드
A안 첫 장면의 영사기 빛은 180장의 프레임을 스크롤 위치에 맞춰 그립니다. 이 카드를 지나가는 동안 같은 방식으로 프레임이 넘어갑니다.
타임코드와 장면 번호
화면 아래의 타임코드와 장면 번호가 지금 어느 장면을 보고 있는지 알려 줍니다. 이 페이지 아래의 목차 막대도 같은 방식으로 움직입니다.
빛으로 여는 전환
A안의 사업 소개 장면에서는 사진이 영사기의 빛 모양으로 열립니다. 새 장면이 등장할 때 사다리꼴이 넓어지며 화면을 채웁니다.
04 · SOUND ON DEMAND
소리는 방문자가 켭니다
B안의 레코드 장면에서는 버튼을 눌러야 앰비언트 사운드가 재생됩니다. 소리는 방문자가 직접 켤 때만 나옵니다.
제안 A안
SCENE & SCORE모든 장면에는 음악이 흐릅니다
영사기의 빛과 오선지로 회사를 소개하는 방향입니다. 첫 화면에서 빛이 오선이 되고 도·레·미 세 음이 켜진 뒤 로고가 나타납니다. 화면 아래의 타임코드를 따라 아홉 개의 장면이 한 편의 드라마처럼 이어집니다.
- 영사기의 빛이 오선이 되는 첫 장면(프레임 180장을 스크롤로 재생)
- 네 가지 일을 한 장면씩 넘기는 고정 무대
- 필름 스트립 위에 놓인 2006~2020 필모그래피
- 엔딩 크레디트로 끝나는 마지막 장면
Archivo · JetBrains Mono · Pretendard
DIRECTION NOTES
시안 A의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.
- S#01 · 빛이 오선이 되다
영사기에서 나온 빛줄기가 오선으로 바뀌고, 그 위에서 도·레·미 세 음이 차례로 켜집니다.
- S#01 · 16과 18
필름이 터널처럼 감기며 드라마 16편과 OST 18편이라는 숫자가 떠오릅니다.
- S#03 · 네 가지 일
왼쪽의 큰 글자와 오른쪽의 장면이 함께 바뀌며 사업 영역 네 가지를 차례로 소개합니다.
- S#04 · 필름처럼 흐르는 작품
스크롤을 내리면 직접 만든 드라마 16편이 상영관의 필름처럼 가로로 지나갑니다.
- S#05 · 오선 위의 OST
밝은 종이 위에 음표가 흐르고, 그 아래 파형과 함께 OST 18편의 목록이 이어집니다.
- S#06 · 필름 스트립 연혁
연도가 바뀔 때마다 큰 숫자가 함께 넘어가며 2006년부터의 작품을 보여 줍니다.
- S#07 · 빈 무대의 의자
조명이 비추는 빈 의자 위로 신인 배우를 찾는 오디션 안내가 놓입니다.
- S#09 · 엔딩 크레디트
사이트의 마지막은 영화처럼 크레디트가 올라가며 필모그래피를 다시 보여 줍니다.
제안 B안
STORIES THAT STAY이야기는 끝나도, 감정은 계속된다
영화 같은 영상과 딥 틸·앰버 색으로 작품의 여운을 담은 방향입니다. 스크롤을 내리면 10초짜리 브랜드 영상이 그 속도에 맞춰 재생되고, 서울의 밤 장면과 가로로 흐르는 작품 갤러리, 회전하는 레코드가 차례로 이어집니다.
- 스크롤 속도에 맞춰 재생되는 10초 브랜드 영상
- 한 단어씩 밝아지는 소개 문장과 화면 가득 넓어지는 서울의 밤
- 가로로 흐르는 작품 갤러리와 작품 상세 창
- 회전하는 레코드와 방문자가 직접 켜는 앰비언트 사운드
Barlow Condensed · Pretendard
DIRECTION NOTES
시안 B의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.
- 01 · STORIES THAT STAY
빛을 머금은 필름 위로 큰 제목이 놓입니다. 스크롤을 내리면 영상이 앞으로 재생됩니다.
- 01 · 한 단어씩 밝아지는 문장
회사가 믿는 이야기의 힘을 한 문장으로 쓰고, 읽는 속도에 맞춰 단어를 하나씩 밝힙니다.
- 02 · 서울의 밤
작은 창으로 보이던 서울의 밤 장면이 스크롤을 따라 화면 가득 넓어집니다.
- 02 · 작품 갤러리
포스터가 가로로 흐르고, 카드를 누르면 작품 상세 창이 열립니다.
- 03 · BEYOND THE FRAME
드라마, 음악, 매니지먼트, 마케팅을 큰 글자의 아코디언으로 펼칩니다.
- 04 · PRESS FEEL.
회전하는 레코드 옆에서 버튼을 누르면 짧은 앰비언트 사운드가 재생됩니다.
- 05 · SINCE 2006.
연혁을 위에서 아래로 내려가며 2020년부터 첫 작품까지 거슬러 올라갑니다.
- 06 · WHAT’S YOUR STORY?
마지막 장면에서는 함께 만들 다음 이야기를 묻습니다.
S#11 / BRAND FILM브랜드 필름
두 시안을 위해
짧은 필름 두 편을 만들었습니다
홈페이지 첫 화면과 소개 자료에 쓸 수 있도록 시안마다 브랜드 필름을 만들었습니다. A안 필름에는 장면에 맞춘 짧은 음악을 함께 입혔고, B안 필름은 첫 화면에서 스크롤 속도에 맞춰 재생됩니다.
영사기의 빛이 오선이 되고, 도·레·미 세 음이 필름 속 장면으로 이어진 뒤 로고로 끝나는 영상입니다.
빛을 머금은 필름 위로 카메라가 천천히 움직이고 조명이 바뀌는 영상입니다. 소리 없이 반복해서 재생됩니다.
S#12 / MOBILE모바일
손안에서도
같은 상영관
오디션 공지나 작품 소식은 휴대폰으로 먼저 확인하는 사람이 많습니다. 가로로 흐르던 작품 갤러리는 손가락으로 넘기게 하고, 고정 장면은 세로 화면에 맞춰 길이와 글자 크기를 다시 정했습니다.
COMPARE두 방향은 어떻게 다를까요
같은 회사를 소개하는
두 가지 연출
두 시안은 같은 내용을 담고 있지만 장면을 여는 방식과 분위기가 다릅니다. 회사가 첫 화면에서 가장 먼저 전하고 싶은 말이 무엇인지에 따라 고를 수 있도록 차이를 정리했습니다.
구분A · SCENE & SCOREB · STORIES THAT STAY
첫 화면영사기의 빛이 오선이 되는 모션그래픽스크롤 속도에 맞춰 재생되는 10초 브랜드 영상
색블랙 · 아이보리 · 로고의 청록딥 틸 · 앰버 · 종이색
서체Archivo · JetBrains MonoBarlow Condensed
작품을 보여 주는 방식필름처럼 가로로 흐르는 드라마 16편포스터 갤러리와 작품 상세 창, DRAMA · OST 필터
음악을 보여 주는 방식오선 위의 음표와 파형, OST 18편 목록회전하는 레코드와 앰비언트 사운드
연혁필름 스트립 위의 연도별 작품SINCE 2006 연혁 목록
길 찾기타임코드와 장면 번호(S#01~S#09)상단 메뉴와 진행 막대
마지막 장면엔딩 크레디트WHAT’S YOUR STORY? 문의 안내
무게를 둔 곳회사의 이름과 심벌을 이야기로 풀기작품이 남기는 감정과 분위기
WEBSITE RENEWAL PROPOSAL
- Client
- 도레미엔터테인먼트
- Project
- 홈페이지 리뉴얼 제안 · 2026년 10월
- Research
- 회사 소개 · 작품 · OST 자료 정리
- Brand Reading
- 로고와 심벌 해석, 키워드와 무드보드
- Structure
- 방문자 정의, 씬 리스트로 쓴 정보 구조
- Direction A
- SCENE & SCORE · UI 디자인, 모션그래픽, 브랜드 필름
- Direction B
- STORIES THAT STAY · UI 디자인, 스크롤 영상, 앰비언트 사운드
- Mobile
- 세로 화면 장면 재구성과 점검
- Typefaces
- Archivo · JetBrains Mono · Barlow Condensed · Pretendard
- Studio
- 블루캔버스
FILMOGRAPHY · 2006–2020
- 돌아와요 순애씨
- 김치치즈스마일
- 칼잡이 오수정
- 못된사랑
- 내조의 여왕
- 벼락맞은 문방구
- 너의 목소리가 들려
- 무정도시
- 네 이웃의 아내
- 썸남썸녀
- 순정에 반하다
- 아름다운 나의 신부
- 초인가족 2017
- 죽어야 사는 남자
- 그날의 커피
- 사생활
TO BE CONTINUED
THE NEXT SCENE
당신의 회사는
당신의 회사는
어떤 장면으로 기억되나요?
홈페이지는 함께 일할 사람이 회사를 처음 만나는 곳입니다.
회사가 가진 이름과 상징부터 함께 다시 읽겠습니다.
다른 프로젝트
-
교육·학교
경기글로벌스쿨
신앙과 세계를 「한 점에서 세계로」라는 이야기로 묶은 브랜드 해석, 네이비·골드와 울트라마린의 컬러, 빛(LUMEN)과 지평선(HORIZON) 두 가지 시안과 스크롤 모션그래픽까지 담은 기독교 대안학교 메인 홈페이지 리뉴얼 제안 과정
-
미디어·출판
문학동네 출판그룹
「동네」라는 이름에서 출발한 브랜드 해석, 종이와 먹과 가름끈의 컬러, 네 가지 시안과 도서 탐색·연재 읽기 경험까지 담은 출판그룹 홈페이지 리뉴얼 제안 과정
-
글로벌 기업
영원무역
라벨에 이름이 붙지 않는 회사를 위한 「옷의 안쪽에서, 세상의 바깥까지」 브랜드 해석, 컬러 시스템과 설산에서 시작하는 홈페이지 시안, 제조 공정 스크롤 인터랙션과 글로벌 네트워크·소재·ESG 화면까지 담은 글로벌 OEM 기업 홈페이지 리뉴얼 제안 과정