CEO MESSAGE원 사이트의 대표 인사말에는
「여러분의 Next Key가 되어 드리겠습니다」라는 약속이 있습니다
Y · N · K앞에 Your를 붙이면
머리글자가 회사 이름과 같아집니다
#F16022원 사이트의 버튼과 강조 글자에 쓰인 주황,
두 시안은 이 색에서 출발했습니다
TWO DIRECTIONS문을 열면
두 갈래의 길이 있습니다
YNK ASSOCIATES · WEBSITE RENEWAL PROPOSAL
YNK Associates 홈페이지 리뉴얼 제안
THE RIGHT CONNECTION · YOUR NEXT KEY 두 가지 방향
YNK Associates는 서울에 있는 Executive Search Firm입니다. 기업이 찾는 핵심 인재를 찾아 추천하는 헤드헌팅을 중심으로, 채용 전에 지원자의 업무 성과와 태도를 확인하는 평판조회와 조직의 역량을 키우는 HR 컨설팅을 함께 합니다.
블루캔버스는 이 회사의 홈페이지를 새로 설계하는 두 가지 방향을 제안했습니다. 사람과 가능성을 잇는 주황색 리본으로 연결을 보여 주는 THE RIGHT CONNECTION, 문을 여는 열쇠로 회사의 이야기를 풀어낸 YOUR NEXT KEY입니다. 이 페이지는 두 시안이 나오기까지의 과정을 YNK가 인재를 찾는 일곱 단계에 맞춰 정리했습니다.
SEVEN STEPS
헤드헌터가 인재를 찾는 순서와 홈페이지 리뉴얼의 순서는 생각보다 닮았습니다. 의뢰를 받고, 인재상을 정하고, 찾고, 추천하고, 검증한 뒤 제안합니다.
JOB DESCRIPTION
헤드헌터가 인재를 찾기 전에 직무 기술서를 쓰듯, 디자인을 시작하기 전에 새 홈페이지가 해야 할 일을 먼저 적었습니다. 두 시안은 모두 이 기술서를 기준으로 만들었습니다.
주요 업무
첫 화면부터 두 방문자가 각자의 상담으로 바로 들어갈 수 있게 합니다.
소개와 서비스, 안내 문장을 모두 텍스트로 옮겨 검색되고 휴대폰에서도 읽히게 합니다.
Next Key, 문, 성공 파트너 같은 원 사이트의 말과 주황색을 디자인의 재료로 씁니다.
채용 공고와 칼럼 「차 한잔의 대화」를 메인 화면에서 바로 만나게 합니다.
우대 사항
고정 장면과 영상을 끄고, 같은 내용을 위에서 아래로 읽을 수 있게 합니다.
리뉴얼은 새것을 더하기 전에 회사가 이미 가진 것을 찾는 일에서 시작했습니다. 원 사이트의 대표 인사말과 소개 도표, 버튼의 색, 빠른 메뉴 옆의 작은 아이콘까지 다시 읽었고, 그 안에서 다섯 가지 단서를 찾았습니다.
대표 인사말은 마지막 인사 바로 앞에서 「YNK Associates가 여러분의 Next Key가 되어 드리겠습니다」라고 약속합니다. 회사가 스스로를 무엇에 빗대는지 보여 주는 가장 분명한 단서였습니다.
소개 도표 한가운데에는 금색 열쇠 사진이, 채용 정보 칸에는 SUCCESS라고 적힌 열쇠 사진이, 빠른 메뉴 옆에는 작은 열쇠 아이콘이 있었습니다. 열쇠는 이미 이 회사의 상징처럼 쓰이고 있었습니다.
소개 도표에는 「최고의 인재와 최고의 기업이 만나는 문을 열어 드립니다. YNK는 그 문을 향한 정확하고 빠른 길을 알고 있습니다」라는 문장이 있습니다. 열쇠가 있다면, 그 열쇠로 여는 문도 있다는 뜻입니다.
같은 도표의 왼쪽과 오른쪽에는 「인재는 기업의 자산입니다」와 「기업은 인재의 디딤돌입니다」가 마주 놓여 있습니다. YNK는 기업과 후보자 두 방향의 이야기를 함께 듣는 회사입니다.
Next Key 앞에 Your를 붙이면 머리글자가 회사 이름 YNK와 같아집니다. 원 사이트의 버튼과 강조 글자에는 주황색 #F16022가 쓰였습니다. 이 다섯 가지 단서가 두 시안의 재료가 되었습니다.
TWO READINGS
문과 문, 사람과 자리 사이를 잇는 선을 그립니다. 단서 가운데 「두 방향」과 주황색을 앞에 세웠습니다.
문을 여는 열쇠와 그 너머의 무대를 그립니다. 단서 가운데 「Next Key」와 「문」을 앞에 세웠습니다.
다섯 가지 단서에서 연결, 열쇠, 문, 대화 같은 단어를 뽑고, 단어마다 어울리는 장면을 이미지로 만들었습니다. 실제 인물 사진 없이도 사람과 기업을 잇는 회사의 분위기를 전하기 위해서입니다. 두 시안에 쓰인 장면과 탐색 단계에서 만든 장면을 함께 놓았습니다.
원 사이트의 버튼과 강조 글자에 쓰인 주황 #F16022를 기준으로 삼았습니다. 붉은 쪽으로 옮겨 채도를 올리면 A안의 버밀리언이 되고, 명도와 채도를 낮추면 B안의 엠버가 됩니다. A안은 이 색을 블루아워의 차콜 위에, B안은 황동과 에스프레소 블랙 사이에 놓았습니다.
#FF5A36H 11° · S 100% · L 61%A안 · 리본, 버튼, 마침표#F16022H 18° · S 88% · L 54%원 사이트의 버튼과 강조 글자#C8501AH 19° · S 77% · L 44%B안 · 버튼과 강조 한 단어바탕 · 44%블루아워의 건축처럼 깊은 차콜입니다. 첫 화면과 연결 장면, 마지막 상담 안내 위의 어둠을 맡습니다.
종이 · 38%소개와 서비스, 채용 정보의 바탕입니다. 흰색보다 한 톤 낮춰 종이처럼 보이게 했습니다.
연결 · 9%원 사이트의 주황을 붉은 쪽으로 옮긴 색입니다. 리본과 버튼, 제목의 마침표에만 씁니다.
두 번째 면 · 6%서비스 카드의 두 번째 면입니다. 바탕과 카드가 구분되도록 종이보다 한 톤 낮췄습니다.
보조 문장 · 3%밝은 바탕 위의 보조 문장과 캡션의 색입니다.
어둠 · 46%열쇠와 문이 놓인 어둠입니다. 첫 장면과 서비스, 서치 과정, 칼럼 장면의 바탕입니다.
종이 · 30%회사 소개와 원칙, 약속 카드의 바탕입니다.
열쇠 · 10%열쇠의 황동색입니다. 숫자와 라벨, 선화에 씁니다.
불씨 · 8%원 사이트의 주황을 불씨처럼 낮춘 색입니다. 버튼과 강조 한 단어에만 씁니다.
보조 문장 · 6%밝은 바탕 위의 보조 문장 색입니다.
색 견본을 누르면 HEX 값이 복사됩니다. 견본 안의 숫자는 그 위에 올리는 글자색과의 명도 대비입니다.
A안은 Pretendard 하나로 영문 제목과 한글 본문을 모두 썼습니다. 굵기 500의 영문 제목을 자간 -6.5%까지 좁혀, 건축 잡지의 표제처럼 단단하게 세웠습니다. B안은 영문 제목에 Instrument Serif 이탤릭을 쓰고 한글은 Pretendard로 맞췄습니다. 펜으로 쓴 듯한 이탤릭이 열쇠와 문의 고전적인 분위기를 만듭니다.
자간 0%THE RIGHT
CONNECTION.
Y · N · KYour Next Key
세 단어의 머리글자는 황동색으로 칠해 회사 이름 YNK가 먼저 읽히게 했습니다.
500 · 자간 -6.5%우리는 이력서 너머의
가능성을 봅니다.
A안은 한글 제목에도 같은 굵기와 자간을 써서 영문 제목과 한 덩어리로 읽히게 했습니다.
700최고의 인재와 최고의 기업이
만나는 문이 있습니다.
B안은 한 단어만 엠버로 칠해 문장 속에서 열쇠 말을 짚어 줍니다.
tabular0원7 Steps5 Steps
후보자 서비스 비용, 서치 단계, 평판조회 단계를 세리프 숫자로 정리했습니다.
두 시안을 비교할 때 메뉴나 접수 방식의 차이가 판단을 흐리지 않도록, GNB와 푸터, 상담 접수창을 공통 파일 하나로 만들어 두 시안이 함께 쓰게 했습니다. 메뉴나 접수창이 열리면 페이지 스크롤이 잠기고, B안은 부드러운 스크롤 연출도 함께 멈춥니다. 공통 파일의 클래스와 변수에는 ynk- 접두사를 붙여 시안의 스타일과 섞이지 않게 했습니다.
header.php공통 GNB로고와 메뉴 네 개, 접수하기 버튼입니다. 아래에 놓인 장면이 어두운지 밝은지에 따라 글자색이 바뀝니다.
A · THE RIGHT CONNECTION메인 화면두 시안에서 유일하게 다른 층입니다. 같은 메뉴와 같은 접수창 사이에서 첫 화면과 장면만 바뀝니다.
footer.php · apply.php공통 푸터 · 접수창푸터와 플로팅 상담 버튼, 커리어 상담과 기업 채용 상담 두 가지 유형의 접수창입니다.
ONE FORM, TWO VISITORS
접수창은 커리어 상담과 기업 채용 상담 두 가지 유형으로 나뉩니다. 시안의 접수창은 서버에 저장하지 않고, 이름과 이메일, 상담 내용을 확인한 뒤 이메일 앱으로 초안을 넘깁니다. 오른쪽에 이름을 넣어 보면 메일 제목이 어떻게 만들어지는지 볼 수 있습니다.
A NEW POSSIBILITY
다음 이야기를
들려주세요.
다섯 가지 단서를 연결로 읽은 시안과 열쇠로 읽은 시안입니다. 아래 녹화는 두 시안의 메인 페이지를 위에서 아래로 스크롤한 화면입니다. 장면 이름을 누르면 PC 화면과 휴대폰 화면이 함께 그 장면으로 이동합니다.
사람과 기업 사이의 연결을 주황색 리본 하나로 보여 주는 방향입니다. 블루아워의 서울 위로 리본이 지나가는 첫 화면에서 시작해, 스크롤을 따라 돌아가는 3D 리본이 이해하고, 연결하고, 앞으로 나아가는 세 단계를 보여 줍니다. 서비스는 가로로 넘기는 카드 세 장으로 정리했습니다.
시안 A의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.
블루아워의 서울 위로 주황색 리본이 지나가고, 큰 영문 제목이 화면 왼쪽을 채웁니다.
회사의 생각을 담은 첫 문장은 스크롤을 따라 글자색이 차례로 채워집니다.
3D 리본이 스크롤을 따라 돌며 연결의 첫 단계인 이해를 보여 줍니다.
리본이 서로 엇갈리며 사람과 기회가 이어지는 순간을 그립니다.
마지막 단계에서 리본은 앞으로 뻗어 나가는 모양으로 바뀝니다.
세로 스크롤이 가로 이동으로 바뀌며 서비스 카드 세 장이 차례로 지나갑니다.
대화 사진과 함께 「답을 찾기 전에, 당신을 듣습니다」라는 태도를 소개합니다.
화면 가득 주황색 위에서 커리어 상담과 기업 채용 상담을 나란히 안내합니다.
원 사이트의 소개 문장 「최고의 인재와 최고의 기업이 만나는 문을 열어 드립니다」를 장면으로 옮긴 방향입니다. 첫 화면에서 황동 열쇠가 문에 꽂혀 돌아가고, 문이 열리며 화면이 밝아집니다. 열쇠구멍 모양으로 열리는 문턱 사진, 다이얼처럼 돌아가는 네 가지 원칙, 기업과 후보자의 두 길이 인터뷰에서 만나는 서치 과정이 차례로 이어집니다.
시안 B의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.
첫 화면의 황동 열쇠는 180장의 프레임으로 그렸고, 스크롤을 내리면 문을 향해 움직입니다.
열쇠가 문에 다가가는 동안 「최고의 인재와 최고의 기업이 만나는 문」이라는 문장이 놓입니다.
열쇠가 열쇠구멍에 꽂혀 돌아가고, 문틈으로 빛이 새어 나옵니다.
열쇠구멍 모양의 창 양쪽에 기업에게 하는 말과 후보자에게 하는 말이 놓입니다.
열쇠구멍이 화면 가득 커지면 청동 문 앞에 선 사람의 뒷모습이 드러납니다.
Executive Search, Reference Check, HR Consulting 카드가 겹겹이 쌓이고 선화가 그려집니다.
네 가지 원칙이 다이얼처럼 한 칸씩 돌아가며 맞춰집니다.
기업과 후보자의 두 길이 인터뷰에서 하나로 합쳐집니다.
움직임은 회사의 말을 전할 때만 쓰기로 했습니다. 두 시안의 핵심 장면을 골라 그 장면이 왜 그렇게 움직이는지 묻고, 답을 정리했습니다. 카드 안의 장면은 이 페이지에서도 스크롤하거나 눌러서 직접 움직여 볼 수 있습니다.
01 UNDERSTANDA.연결에는 시작과 끝이 따로 없다는 생각을 담았습니다. 리본은 토러스 매듭 곡선을 따라 끊기지 않고 돌아가며, 스크롤 위치에 맞춰 8초짜리 장면의 한 프레임을 보여 줍니다. 모든 프레임을 키프레임으로 인코딩해 스크롤을 거꾸로 올려도 바로 반응합니다.
F 001 / 180A.원 사이트의 소개 도표 한가운데에는 금색 열쇠가 있고, 그 곁에 「최고의 인재와 최고의 기업이 만나는 문을 열어 드립니다」라는 문장이 있습니다. 이 둘을 첫 장면 하나로 합쳤습니다. 열쇠와 청동 문, 빛이 새는 문틈을 Three.js로 직접 만들고 180장의 프레임으로 렌더링해, 스크롤을 내리면 열쇠가 돌아가고 올리면 되돌아갑니다.
A.세 가지 서비스를 같은 크기의 카드로 나란히 놓아 어느 하나가 덜 중요해 보이지 않게 했습니다. PC에서는 세로 스크롤이 가로 이동으로 바뀌어 카드가 한 장씩 지나가고, 휴대폰에서는 손가락으로 넘기거나 화살표 버튼으로 이동합니다.
A.첫 장면에서 열린 문의 안쪽을 보여 주는 장면이기 때문입니다. 열쇠구멍 모양의 창이 화면 가득 커지면 청동 문 앞에 선 사람의 뒷모습이 드러나고, 창 양쪽에는 기업에게 하는 말과 후보자에게 하는 말이 하나씩 놓입니다.
A.「우리는 이력서 너머의 가능성을 봅니다」라는 문장을 읽는 속도에 맞추기 위해서입니다. 스크롤을 내린 만큼 글자가 진해져, 방문자가 회사의 생각을 한 단어씩 따라 읽게 됩니다.
포지션의 역할과 조직의 방향을 먼저 이해하고, 그에 맞는 서치 전략을 세웁니다.
A.B안의 원칙 장면 제목은 「네 개의 원칙이 하나의 결과를 만듭니다」입니다. 다이얼 가운데에 열쇠구멍을 두고, Thoughtful Planning부터 Our Guarantee까지 네 칸을 한 칸씩 돌려 맞추게 했습니다. 왼쪽 다이얼은 버튼을 눌러 직접 돌려 볼 수 있습니다.
FOR EMPLOYERS
FOR CANDIDATES
A.기업과 후보자는 서로 다른 곳에서 출발하기 때문입니다. 원 사이트의 For Employers와 For Candidates 안내에 나뉘어 있던 단계를 두 개의 선으로 그리고, 두 선이 인터뷰에서 만나 계약과 사후 관리로 이어지게 했습니다. 이 페이지가 따라온 일곱 단계도 위쪽 선, 기업의 과정에서 가져왔습니다.
채용 공고를 확인하고 이력서를 보내는 일은 휴대폰에서 시작되는 경우가 많습니다. 두 시안 모두 휴대폰 화면을 따로 설계했습니다. B안의 열쇠 필름은 세로 화면용 프레임을 따로 렌더링했고, A안의 서비스 카드와 B안의 칼럼 목록은 손가락으로 넘깁니다.
두 시안은 같은 회사를 소개하지만, 첫 화면에서 무엇을 먼저 말하는지가 다릅니다. 회사가 방문자에게 가장 먼저 전하고 싶은 말이 무엇인지에 따라 고를 수 있도록 차이를 정리했습니다.
REFERENCE CHECK
YNK는 채용을 결정하기 전에 후보자의 평판을 확인합니다. 두 시안도 고객에게 보내기 전에 같은 항목으로 확인했습니다.
PC, 태블릿, 휴대폰 화면에서 페이지가 가로로 넘치지 않는지 확인했습니다.
모션 줄이기 설정에서는 고정 장면과 영상을 끄고 모든 내용을 순서대로 보여 줍니다.
메뉴와 접수창은 ESC로 닫히고, 닫은 뒤에는 처음 누른 버튼으로 포커스가 돌아갑니다.
접수창은 이름과 이메일, 상담 내용을 확인한 뒤에만 이메일 앱을 엽니다.
공통 GNB와 푸터, 접수창의 보조 문구를 모두 14px 이상으로 맞췄습니다.
모집 여부는 채용 게시판에서 확인하도록 안내하고, B안의 포지션 카드에는 등록일을 함께 적었습니다.
홈페이지는 함께 일할 사람이 회사를 처음 만나는 곳입니다.
회사가 이미 써 온 말과 색에서 출발해, 그 말이 가장 잘 들리는 화면을 함께 찾겠습니다.
미디어·제작사
도레미엔터테인먼트
로고 속 청록색 사다리꼴을 영사기의 빛으로, 이름을 도·레·미 세 음으로 읽은 브랜드 해석, 청록색 하나에서 갈라진 두 팔레트, 씬 리스트로 쓴 정보 구조와 SCENE & SCORE · STORIES THAT STAY 두 가지 시안, 브랜드 필름 두 편까지 담은 드라마 · OST 제작사 홈페이지 리뉴얼 제안 과정
공공·교육
말레이시아 한국교육원
한글을 만든 세 획(천지인)에서 출발한 브랜드 해석, 밤하늘의 골드와 두 나라 꽃의 코럴로 정한 컬러, 18초 모션 필름과 천지인 · 코럴 저니 두 가지 시안, 한글학교 지도와 4,600km 유학 여정까지 담은 교육부 재외교육기관 홈페이지 리뉴얼 제안 과정
교육·학교
경기글로벌스쿨
신앙과 세계를 「한 점에서 세계로」라는 이야기로 묶은 브랜드 해석, 네이비·골드와 울트라마린의 컬러, 빛(LUMEN)과 지평선(HORIZON) 두 가지 시안과 스크롤 모션그래픽까지 담은 기독교 대안학교 메인 홈페이지 리뉴얼 제안 과정
Contact
현재 상황과 목표를 남겨 주시면 가능한 작업 범위와 진행 방식, 예상 견적을 정리해 안내드립니다.
DIRECT
문의가 접수되었습니다. 영업일 1일 안에 작업 범위와 예상 견적을 정리해 회신드립니다.