프로젝트 상담 신청 프로젝트 소개로 건너뛰기

네오플라이PINARELLO OFFICIAL IMPORTER · KOREA

바람이 그린 선

피나렐로 공식 수입원 네오플라이의 홈페이지를 다시 그렸습니다. 첫 화면에서는 바람이 자전거의 윤곽을 그리고, 빛이 그 윤곽을 실제 도그마 F로 바꿉니다.

Client
네오플라이
Scope
홈페이지 리뉴얼 제안
Year
2026
  1. 01 WIND

    보이지 않던 흐름

    가는 흐름선 수백 개가 화면을 가로지릅니다. 선이 휘는 자리에 자전거가 있습니다.

  2. 02 FORM

    선이 그린 형태

    레이저가 지나간 자리마다 프레임과 바퀴의 윤곽이 남습니다.

  3. 03 LIGHT

    빛이 닿은 도그마 F

    스튜디오 조명이 지나가면 선 그림이 실제 사진으로 바뀝니다.

04 LINE

e와 o는 한 획입니다

neofly의 e와 o는 펜을 떼지 않고 그은 선 하나입니다. 같은 크기의 두 원을 잇는 그 선이 도그마 F의 두 바퀴와 겹칩니다.

01 / OVERVIEW소개

피나렐로를
한국의 길로

네오플라이는 이탈리아 자전거 브랜드 피나렐로(PINARELLO)의 한국 공식 수입원입니다. 로드 · 그래블 · MTB · 타임트라이얼 라인업과 MOST 파츠를 들여오고, PARTINGTON · ONE-K · CRW · V-SPRINT의 휠과 콕핏도 함께 공급합니다. 서울 송파의 직영점 피나렐로 하우스를 중심으로 전국 공식 판매점 열두 곳과 함께 일하고, 영남알프스를 달리는 트랜스 알프스 같은 라이딩 이벤트도 엽니다.

수입원의 홈페이지는 두 이름을 함께 들고 있어야 합니다. 방문자가 찾아오는 이유는 피나렐로이지만, 상담하고 고치고 함께 달리는 일은 네오플라이가 합니다. 그래서 이번 리뉴얼은 누구의 목소리로 말할지 정하는 데서 시작했습니다. 두 로고를 나란히 놓고 읽은 끝에, 피나렐로의 바람과 네오플라이의 선을 한 문장으로 묶었습니다.

  • 2

    시안을 보낸 횟수2026년 8월의 첫 시안과 11월의 메인 시안
  • 3

    견주어 본 첫 화면의 방향시간의 선 · 길의 선 · 바람의 선
  • 240

    직접 렌더링한 풍동 필름의 프레임가로 1600 × 900 · 세로 720 × 1280 두 벌
  • 23

    파일 이름이 도색 이름인 자료열두 해의 업로드에서 고른 사진 95장 가운데
  1. 2026.08NOW지금의 홈페이지 읽기

    메뉴와 제품 목록을 읽고, 로드 · 그래블 · MTB · TT를 나누어 볼 수 있는 구조부터 정했습니다.

  2. 2026.08ROUND 1첫 시안

    어두운 격자 화면에 라인업 필터와 A/S 안내를 담은 첫 메인 화면을 제안서와 함께 보냈습니다.

  3. 2026.11ROUND 2세 개의 선

    시간 · 길 · 바람 세 가지 선으로 첫 화면을 그려 견주고 바람을 골랐습니다.

  4. 2026.11ROUND 3풍동 필름

    바람이 자전거의 윤곽을 그리는 240프레임의 필름을 Canvas로 직접 렌더링했습니다.

  5. 2026.11ROUND 4메인 시안

    필름으로 여는 첫 화면부터 판매점 찾기와 지원 안내까지 여덟 장면을 이었습니다.

02 / TWO MARKS두 로고

바람과 선,
두 로고가 나눠 가진 것

수입원의 홈페이지에는 로고가 두 개 놓입니다. 브랜드인 PINARELLO와 회사인 neofly입니다. 둘 중 하나를 고르는 대신 두 로고를 확대해 같은 자리에 겹쳐 놓고, 각자 무엇을 그리고 있는지 읽었습니다.

  1. PINARELLO

    끝이 가늘어지는 P와 결 세 줄

    피나렐로의 P는 위에서 크게 돌아 내려오며 끝이 바늘처럼 가늘어지는 한 획입니다. 줄기 왼쪽에는 짧은 결 세 줄이 붙어 있습니다. 우리는 이 결을 바람으로 읽었습니다. 빠르게 지나간 것의 뒤에 남는 자국이기 때문입니다.

  2. NEOFLY

    e와 o를 잇는 한 획

    neofly의 e와 o는 따로 쓴 두 글자가 아닙니다. e의 가로획 끝에서 시작한 선이 e를 한 바퀴 돌고, S자로 넘어가 o를 돌아 끝납니다. 시안에 쓴 로고 그림(가로 1,101px)으로 재면 이 선의 길이는 약 1,224px로 로고 전체 폭보다 깁니다.

  3. ONE SENTENCE

    두 로고를 한 문장으로

    바람과 선을 이으면 메인 시안의 첫 문장이 됩니다. 「가장 빠른 선은 바람이 그립니다」. 피나렐로의 결은 바람이 되고, 네오플라이의 한 획은 그 바람이 그린 선이 됩니다.

03 / TWO WHEELS두 바퀴

e와 o 사이를 벌리면
자전거가 됩니다

한 획이라는 것만으로는 부족했습니다. e와 o의 둥근 부분에 원을 맞춰 크기와 간격을 재고, 메인 시안의 풍동 필름 마지막 장면에서 도그마 F의 두 바퀴를 같은 방법으로 쟀습니다.

흰 스튜디오 배경의 도그마 F 측면 사진

중심 간격 2.23× 반지름

  1. SAME SIZE

    같은 크기의 두 원

    e와 o의 둥근 부분에 맞춘 원은 반지름이 97.2px과 96.7px입니다. 차이는 0.5%입니다. 같은 크기의 두 원을 선 하나가 잇는 모양은 로드 바이크의 두 바퀴와 같습니다.

  2. DISTANCE

    간격만 다릅니다

    로고에서 두 원의 중심은 반지름의 2.23배만큼 떨어져 있습니다. 시안 필름의 도그마 F는 2.90배입니다. o를 그만큼 오른쪽으로 옮기면 e는 뒷바퀴, o는 앞바퀴에 겹칩니다.

  3. THE BIKE

    로고 아래의 도그마 F

    벌린 획 아래에 스튜디오 사진을 깔면 e의 원은 뒷바퀴, o의 원은 앞바퀴, S자 획은 두 바퀴 사이를 지납니다. 첫 화면의 마지막 장면은 이 겹침으로 끝납니다.

e의 반지름
97.2px
o의 반지름
96.7px
로고의 중심 간격
2.23r
도그마 F의 바퀴 간격
2.90r
04 / ARCHIVE열두 해의 자료

가장 자주 바뀐 것은
모델이 아니라 색이었습니다

시안에 쓸 자료를 찾으려고 2014년부터 2026년까지 홈페이지에 올라온 업로드 폴더를 열었습니다. 골라 낸 자료는 사진 95장과 영상 5편, 모두 100개였고 그중 79개가 2025년과 2026년에 올라온 것이었습니다.

사진 95장 가운데 23장은 파일 이름부터 도색 이름이었습니다. 럭스터 베니스, 옵시디언 에메랄드, 제이드 스펙트라처럼 같은 프레임에 새 색이 나올 때마다 사진이 한 장씩 늘었습니다.

  1. 42014
  2. 12015
  3. 42016
  4. 02017
  5. 12018
  6. 12019
  7. 12020
  8. 02021
  9. 12022
  10. 42023
  11. 42024
  12. 222025
  13. 572026
고른 자료 100개의 업로드 연도. 2017년과 2021년에 올라온 자료 가운데에서는 고른 것이 없습니다.
  • 2025.06
  • 2025.06
  • 2025.06
  • 2025.06
  • 2025.06
  • 2025.06
  • 2026.01
  • 2026.01
  • 2026.06
  • 2026.06
  • 2026.06
  • 2026.06
  • 2026.07
  • 2026.07
  • 2026.07
  • 2026.07
  • 2026.07
  • 2026.07
  • 2026.07
  • 2026.10
  • 2026.10
  • 2026.11
  • 2026.11
도색 이름이 붙은 사진 23장에서 프레임 가운데의 도장 색을 재어 색상 순서로 늘어놓았습니다. 무채색은 오른쪽 끝에 밝은 것부터 두었습니다.

그래서 메인 시안에는 색을 위한 장면을 두 개 넣었습니다. 첫 화면 끝에서 같은 도그마 F의 도색 네 가지를 넘겨 보는 장면, 그리고 아트 페인트 네 가지를 포스터처럼 넘기는 장면입니다.

05 / FIRST DRAFT첫 시안

정리는 됐지만,
누구의 이야기인지 흐렸습니다

2026년 8월, 제안서와 함께 첫 메인 화면을 보냈습니다. 어두운 바탕에 제품 사진을 격자로 놓고, 라인업 필터와 A/S 안내, 판매점과 지원을 한 페이지에 담았습니다.

석 달 뒤 다시 펼쳐 놓고 빨간 펜을 들었습니다. 남길 것과 바꿀 것이 분명하게 나뉘었습니다.

8월 첫 시안의 메인 페이지 전체 화면: PINARELLO OFFICIAL KOREA 제목, 제품 사진 세 장, 안내 카드 세 개, 라인업 필터와 제품 격자, 이벤트, 판매점, 지원
  1. 1

    바꾼 것

    첫 문장이 누구의 것인지

    「PINARELLO OFFICIAL KOREA.」는 사실이지만 다른 수입원도 쓸 수 있는 문장입니다. 메인 시안에서는 피나렐로가 프레임을 만드는 이유로 첫 문장을 바꿨습니다.

  2. 2

    바꾼 것

    사진 세 장의 콜라주

    도그마 X · F · 그래블 사진이 같은 크기로 나란히 있어 무엇을 먼저 봐야 할지 정하지 않았습니다. 메인 시안은 도그마 F 하나에서 시작합니다.

  3. 3

    남긴 것

    공식 수입 · A/S · 그란폰도 카드

    수입원이 하는 일을 세 줄로 줄인 카드는 좋았습니다. 메인 시안의 소개 장면에 수입 · 공급, 공식 판매점, 라이딩 이벤트로 남겼습니다.

  4. 4

    남긴 것

    라인업 필터

    ALL · ROAD · GRAVEL · MTB · TT로 나누는 필터는 지금 홈페이지에 없던 것입니다. 메인 시안에서는 가로로 넘기는 라인업 위의 탭이 되었습니다.

  5. 5

    바꾼 것

    판매점과 약도

    지도 한 장은 본사 한 곳만 보여 줍니다. 메인 시안은 열두 곳을 지역 탭으로 나눠 가장 가까운 곳을 바로 찾게 했습니다.

첫 시안 화면의 연락처 · 주소 · 대표자 · 사업자등록번호는 다른 글자로 바꾸거나 가렸습니다.

06 / THREE LINES세 개의 선

시간 · 길 · 바람,
세 가지 선으로 그리기

두 번째 시안을 그리기 전에 「선」 하나를 주제로 첫 화면을 세 번 그렸습니다. 1952년에서 시작하는 시간의 선, 서울에서 영남알프스까지 이어지는 길의 선, 자전거의 윤곽을 그리는 바람의 선입니다. 세 화면 모두 같은 회사를 설명하지만 첫 문장의 주어가 다릅니다.

ALINE OF WIND

가장 빠른 선은 바람이 그립니다

풍동의 흐름선이 자전거의 윤곽을 그리고, 빛이 그 윤곽을 실제 도그마 F로 바꿉니다. 피나렐로가 프레임을 깎는 이유인 공기역학을 첫 화면의 연출로 옮겼습니다.

  • 풍동
  • 윤곽
  • 스튜디오 빛
  • Ink#050809
  • Teal#1FC2B0
  • Orange#FF5A1F
  • Paper#F3F1EC

Archivo 125% · 900 · Italic

좋은 점
제품이 첫 화면의 주인공이 되고, 피나렐로에만 있는 이야기로 시작합니다.
아쉬운 점
필름을 직접 렌더링해야 하므로 만드는 품이 가장 많이 듭니다.
바람의 선 방향의 PC 첫 화면
바람의 선 방향의 모바일 첫 화면

BLINE OF TIME

가장 오래된 선은 시간이 그립니다

1952년 트레비소에서 시작한 피나렐로의 시간을 한 줄의 시간자로 그립니다. 크림색 종이 위의 장체 숫자와 붉은 선 하나로 이탈리아 사이클링 잡지의 표지처럼 엽니다.

  • 1952
  • 트레비소
  • 잡지 표지
  • Paper#F2ECE0
  • Ink#15130F
  • Treviso Red#C42B1C
  • Stone#B9AE9C

Archivo 62% · 900

좋은 점
브랜드의 무게가 바로 전해지고, 인쇄물과 이어 쓰기 좋습니다.
아쉬운 점
오래된 브랜드라는 이야기는 다른 수입 브랜드도 할 수 있습니다.
시간의 선 방향의 PC 첫 화면
시간의 선 방향의 모바일 첫 화면

CLINE OF ROAD

가장 먼 선은 길이 그립니다

서울의 직영점에서 영남알프스의 능선까지 이어지는 길 하나를 등고선 지도 위에 그립니다. 판매점 열두 곳은 노선도의 정류장이 됩니다.

  • 등고선
  • 정류장
  • 고도
  • Slate#101418
  • Contour#26313A
  • Road#EEF0EA
  • Amber#FFB21A

Archivo 125% · 800 · Italic

좋은 점
네오플라이가 하는 일(판매점 · 이벤트)이 가장 잘 보입니다.
아쉬운 점
첫 화면에 자전거가 없고, 길은 모든 자전거 브랜드의 이야기입니다.
길의 선 방향의 PC 첫 화면
길의 선 방향의 모바일 첫 화면
세 가지 첫 화면을 견준 기준
기준A 바람B 시간C 길
피나렐로에만 있는 이야기로 시작하는가잘 맞음보통약함
첫 화면에서 제품이 보이는가잘 맞음잘 맞음약함
네오플라이가 하는 일이 보이는가보통보통잘 맞음
새 도색이 나올 때 바꾸기 쉬운가잘 맞음보통보통
모바일 첫 화면이 따로 성립하는가잘 맞음보통보통

잘 맞음보통약함

바람을 고르고,
길은 라이드 장면으로

첫 화면은 바람에 맡겼습니다. 피나렐로에만 있는 이야기로 시작하면서 제품을 가장 크게 보여 주기 때문입니다. 버리기 아까웠던 길의 선은 메인 시안의 라이드 장면으로 옮겼습니다. 트랜스 알프스의 고도선과 지역별 판매점 탭이 그 흔적입니다.

07 / COLOR색

바탕은 잉크와 종이,
강조색은 프레임에서

메인 시안의 바탕색은 검정에 가까운 잉크 세 단계와 종이색입니다. 화면 대부분을 이 네 색으로 칠하고, 그 위에 강조색 두 가지를 아주 적게 씁니다.

오렌지 #FF5A1F는 첫 화면 끝에 있는 네 번째 색 버튼, 이네오스 레플리카와 같은 색입니다. 틸 #1FC2B0은 풍동 필름의 흐름선 색으로, 아쿠아 알로이 도색의 밝은 면(#20BBC2)과 가깝습니다. 시안 PC 화면 캡처 15개를 재 보면 두 강조색은 합쳐서 화면의 1%도 차지하지 않습니다.

  • Ink

    #050809RGB 5 8 9

    기본 배경

    첫 화면과 어두운 장면의 바탕색입니다.

  • Ink 2

    #0B1214RGB 11 18 20

    겹친 면

    어두운 장면 안의 카드와 메뉴 판에 씁니다.

  • Ink 3

    #131C1FRGB 19 28 31

    나눈 면

    카드의 테두리와 한 단계 밝은 면입니다.

  • Paper

    #F3F1ECRGB 243 241 236

    밝은 배경

    소개 · 파츠 · 판매점처럼 읽는 장면의 바탕색입니다.

  • White

    #FFFFFFRGB 255 255 255

    글자 · 스튜디오

    어두운 바탕의 글자, 스튜디오 사진의 흰 배경입니다.

  • Teal

    #1FC2B0RGB 31 194 176

    선 · 진행

    풍동 필름의 흐름선, 진행 막대, 지금 위치 표시에만 씁니다.

  • Teal Deep

    #0C7F75RGB 12 127 117

    밝은 배경의 틸

    밝은 바탕에서 틸이 글자로 필요할 때 씁니다.

  • Orange

    #FF5A1FRGB 255 90 31

    한 점

    모조품 주의처럼 꼭 봐야 할 곳에 한 점씩만 씁니다.

잉크 세 단계56.6% 종이 · 흰색22.9% 사진 · 필름20.2% 틸0.2% 오렌지0.1% 미만
메인 시안 PC 화면 캡처 15개에서 시안 색과 가까운(RGB 거리 26 안) 화소의 비율입니다. 틸과 오렌지는 선과 점으로만 쓰여 막대에서 거의 보이지 않습니다.

같은 프레임, 네 가지 표정

도그마 F 제이드 스펙트라

JADE SPECTRA

시안의 색 버튼 #0F8F84

  • #19423B46.2%
  • #226B6329.5%
  • #9B462E12.7%
  • #5FB5B211.6%

흰 배경과 타이어 · 부품의 무채색을 빼고 남은 도장 화소를 네 묶음으로 나눈 비율입니다.

RIDE THE SENSES, 아트 페인트 네 가지

  • 도그마 F 옵시디언 에메랄드 포스터

    OBSIDIAN EMERALD옵시디언 에메랄드

    1. #054248 48.1%
    2. #449484 29.5%
    3. #1F2223 13.6%
    4. #256762 7.6%
    5. #DAE4E3 1.2%

    #054248#449484#1F2223

  • 도그마 F 몰텐 샌드 포스터

    MOLTEN SAND몰텐 샌드

    1. #F0D9BC 41.5%
    2. #A38866 23.1%
    3. #C9B08F 20.3%
    4. #201F1E 10.6%
    5. #4E4944 4.6%

    #F0D9BC#A38866#C9B08F

  • 도그마 F 코발트 팬텀 포스터

    COBALT PHANTOM코발트 팬텀

    1. #6A5E90 38%
    2. #9EC32D 36.9%
    3. #262627 14.4%
    4. #6B6B69 5.5%
    5. #8E9E59 5.2%

    #6A5E90#9EC32D#262627

  • 도그마 F 팬텀 아이스 포스터

    PHANTOM ICE팬텀 아이스

    1. #D6D7D6 40.2%
    2. #9D8D9C 36.3%
    3. #222222 12.6%
    4. #B9B0B9 8%
    5. #595457 2.9%

    #D6D7D6#9D8D9C#222222

글자로 쓸 수 있는 짝

글자 / 바탕보기대비판정쓰임
흰색 / 잉크20.09:1작은 글자까지어두운 장면의 제목과 본문
틸 / 잉크8.99:1작은 글자까지진행 막대, 지금 위치, 짧은 라벨
오렌지 / 잉크6.44:1본문 가능모조품 주의 같은 한 점의 경고
잉크 / 종이17.80:1작은 글자까지밝은 장면의 본문
틸 / 종이1.97:1글자 불가밝은 배경에서는 글자로 쓰지 않음
Teal Deep / 종이4.31:1큰 글자만밝은 장면의 작은 강조 글자
오렌지 / 종이2.76:1글자 불가큰 숫자나 점으로만
잉크 / 틸8.99:1작은 글자까지틸 버튼 위의 글자

대비는 WCAG 2.1 기준으로 계산했습니다. 4.5:1 이상은 본문, 3:1 이상은 큰 글자에 씁니다.

08 / TYPE글꼴

영문은 넓고 비스듬하게,
한글은 똑바로

영문 제목은 폭과 굵기, 기울기를 한 글꼴 안에서 바꿀 수 있는 가변 글꼴 Archivo로 썼습니다. 폭을 가장 넓게(125%), 가장 굵게(900), 이탤릭으로 두면 피나렐로 로고처럼 앞으로 쏠린 글자가 됩니다.

한글은 Pretendard를 세워 둔 채로 씁니다. 한글을 기울이거나 자간을 벌리면 오히려 읽기 어려워지기 때문입니다. 영문 라벨에만 자간을 넓게 줍니다.

RIDE WITH NEOFLY

DISPLAY · LATIN

DOGMA F
RIDE THE SENSES

Archivo · 125% · 900 · Italic

모델 이름, 장면 번호, 큰 마무리 문장처럼 짧은 영문에만 씁니다.

HEADLINE · KOREAN


Pretendard · 800 · 자간 −3.5%

한글 제목은 굵게 세우고 자간만 조금 좁힙니다. 기울이지 않습니다.

LABEL

PINARELLO OFFICIAL IMPORTER · KOREA

Archivo · 112% · 600 · tracking 16%

장면 이름과 메뉴 같은 영문 라벨은 폭을 조금 넓히고 자간을 16% 줍니다.

09 / THE FILM풍동 필름

240프레임으로 그린
바람

첫 화면의 필름은 영상 소스를 사서 쓰지 않고 브라우저의 Canvas로 직접 그렸습니다. 화면을 4px 격자로 나눠 격자점마다 자전거 윤곽까지의 거리를 계산하고, 흐름선 210개가 그 거리를 따라 자전거를 비켜 가게 했습니다. 같은 난수 시드로 그리기 때문에 몇 번을 다시 그려도 같은 장면이 나옵니다.

풍동 필름의 한 장면

WIND바람

FRAME 061 / 240

  1. 001 – 060 · WIND

    흐름선 389개

    가까운 흐름선 210개, 배경의 먼 선 170개, 화면 앞을 흐리게 스치는 선 9개를 겹쳤습니다. 흐름선의 약 12%는 오렌지, 나머지는 틸과 옅은 민트입니다.

  2. 061 – 150 · FORM

    윤곽을 감는 두 반경

    선은 윤곽에 바짝 붙어 감기는 좁은 반경과 멀리서부터 넓게 휘는 반경을 함께 따릅니다. 그 위를 레이저 막이 지나가며 프레임과 바퀴의 선을 남깁니다.

  3. 151 – 240 · LIGHT

    선이 지고 사진만 남게

    스튜디오 조명이 비스듬히 지나간 뒤 흐름선이 천천히 사라져, 마지막 장면은 흰 배경의 도그마 F 사진만 남습니다. 세로 화면용 720 × 1280 판을 따로 렌더링했습니다.

10 / STRUCTURE구조

살 사람, 탄 사람,
달릴 사람

수입원 홈페이지를 찾는 사람은 크게 셋입니다. 어떤 모델을 살지 고르는 사람, 이미 산 자전거를 오래 타려는 사람, 함께 달릴 무대를 찾는 사람입니다. 메뉴 다섯 개와 쇼핑 버튼 하나를 이 세 사람의 길에 맞춰 놓았습니다.

BUY

살 사람

어떤 모델을 살지 고르는 사람

  1. PINARELLO라인업 일곱 갈래와 도색
  2. PARTS & WHEELSMOST 파츠와 휠
  3. SHOPS시승 · 피팅할 판매점
  4. SHOPPING ↗스마트스토어

OWN

탄 사람

이미 산 자전거를 오래 타려는 사람

  1. SUPPORT모조품 주의 · 설명서 · 보증
  2. SUPPORTA/S 문의
  3. SHOPS가까운 정비

RIDE

달릴 사람

함께 달릴 무대를 찾는 사람

  1. RIDE트랜스 알프스 · 그란폰도
  2. SUPPORT카페 · 블로그 · 소식

여덟 장면, 32,571px

  1. 풍동 필름 · 네 가지 색7,380
  2. 소개1,424
  3. 라인업8,254
  4. 아트 페인트3,780
  5. 파츠 · 휠4,233
  6. 라이드 · 트랜스 알프스3,610
  7. 공식 판매점1,711
  8. 지원 · 마무리1,880
메인 시안을 1440 × 900 화면에서 끝까지 내리는 스크롤 길이입니다. 진한 막대는 화면이 고정된 채 장면이 바뀌는 구간으로, 전체의 84%입니다.
11 / MAIN DRAFT메인 시안
메인 시안 · 바람의 선

LINE OF WIND풍동 필름으로 열고, 판매점과 지원으로 닫는 여덟 장면

바람이 자전거를 그리는 필름으로 시작해 도색 네 가지, 일곱 갈래의 라인업, 아트 페인트, 파츠와 휠, 라이딩 이벤트, 판매점, 지원 순서로 내려갑니다.

  • 스크롤로 넘기는 풍동 필름 240프레임과 네 가지 도색
  • 세로 스크롤을 가로로 바꾼 라인업 일곱 갈래
  • 지역 탭으로 줄여 보는 공식 판매점 열두 곳
  • 모바일은 세로 필름 240프레임을 따로 렌더링
Ink · Teal · Orange · Paper
  1. 같은 프레임, 네 가지 표정

    필름이 끝나면 같은 도그마 F의 도색 네 가지를 스크롤로 넘깁니다. 바탕색도 도색을 따라 바뀝니다.

  2. 가로로 넘기는 라인업

    세로 스크롤을 가로 이동으로 바꿔 일곱 갈래의 모델을 한 줄로 지나갑니다. 위의 탭이 지금 갈래를 알려 줍니다.

  3. 아트 페인트 포스터

    RIDE THE SENSES 네 가지 도색을 포스터처럼 한 장씩 닦아 내며 넘깁니다.

  4. 쌓이는 파츠 카드

    MOST · PARTINGTON · ONE-K · CRW 카드가 한 장씩 위로 쌓입니다.

  5. 트랜스 알프스의 고도선

    영남알프스 능선의 오르내림을 선 하나로 그리고, 세 코스의 거리를 숫자로 셉니다.

  6. 지역으로 찾는 판매점

    전체 · 서울 · 경기 인천 · 영남 탭으로 열두 곳을 줄여 봅니다.

모바일 풍동 필름
모바일 도그마 F
모바일 라인업
모바일 아트 페인트
모바일 파츠 · 휠
모바일 라이드
모바일 공식 판매점
모바일 지원

녹화 화면의 라이드 영상은 사람 얼굴이 나오지 않는 컷만 이은 같은 길이의 영상으로 바꿨고, 네오플라이의 주소 · 전화와 판매점의 주소 · 전화 · 메일 주소는 다른 글자로 바꾸거나 흐리게 가렸습니다.

12 / DETAIL디테일

고르고, 찾고,
확인하는 장치

메인 시안에서 방문자가 손으로 만지는 곳은 세 군데입니다. 라인업을 갈래로 나누는 탭, 판매점을 지역으로 줄이는 탭, 모조품을 구별하는 안내입니다. 아래에서 직접 눌러 볼 수 있습니다.

01 · LINEUP

달리는 길이 달라도 기준은 하나입니다

  • DOGMA F
    01

    ROAD · RACE

    DOGMA F

    그랜드 투어의 속도를 담은 레이스 바이크

  • DOGMA X
    02

    ROAD · ENDURANCE

    DOGMA X

    더 멀리, 더 편안하게. 긴 하루를 위한 도그마

  • F SERIES
    03

    ROAD · RACE

    F SERIES

    레이스 지오메트리를 완성차로

  • DOGMA GR
    04

    GRAVEL · RACE

    DOGMA GR

    그래블 레이스를 위한 도그마

  • GREVIL MX
    05

    GRAVEL · ADVENTURE

    GREVIL MX

    포장이 끝나는 곳에서 시작하는 그래블 바이크

  • DOGMA XC
    06

    MTB · CROSS COUNTRY

    DOGMA XC

    크로스컨트리 레이스를 위한 풀 서스펜션

  • BOLIDE F
    07

    TIME TRIAL · TRIATHLON

    BOLIDE F

    시계와 싸우는 라이더를 위한 에어로 머신

메인 시안에서는 이 목록이 세로 스크롤을 따라 가로로 지나가고, 위의 탭이 지금 보고 있는 갈래를 알려 줍니다.

02 · OFFICIAL SHOPS

가까운 곳에서 직접 만나 보세요

12곳

  1. 서울 송파직영점 · 피나렐로 하우스
  2. 서울 송파
  3. 서울 송파
  4. 서울 서초
  5. 경기 성남
  6. 경기 구리
  7. 경기 김포
  8. 인천 서구취급점
  9. 대구 수성
  10. 경북 구미취급점
  11. 울산 중구
  12. 경남 하동

메인 시안에는 매장 이름 · 주소 · 전화번호가 함께 있습니다. 이 기록에서는 지역 이름만 남겼습니다.

03 · NOTICE

도그마 모조품 주의

정식 수입 제품이 아닌 모조품이 유통되고 있어, 지원 장면의 첫 카드에 오렌지 점과 함께 안내를 둡니다. 「정품 구별 방법 보기」를 누르면 정품과 모조품의 헤드튜브 · 로고 · 마감을 나란히 비교한 안내문이 열립니다.

도그마 모조품 주의 안내문의 윗부분: 정품과 모조품 프레임 사진 비교
13 / RETROSPECT돌아보며

바람을 고른 이유는
지금도 같습니다

8월의 첫 시안과 11월의 메인 시안, 그 사이에 그려 본 세 개의 선까지 여러 갈래를 제안했지만 최종 선택으로 이어지지는 않았습니다.

그래도 첫 화면을 바람에 맡기자는 판단은 지금 다시 해도 같을 것입니다. 피나렐로가 프레임을 그렇게 깎는 이유와 네오플라이가 그 자전거를 한국에 전하는 이유가 같은 장면 안에 있기 때문입니다.

  1. ROUND 18월의 첫 시안

    어두운 격자 화면에 라인업 필터와 A/S 안내를 담은 첫 메인 화면

  2. ROUND 2세 개의 선

    시간 · 길 · 바람으로 그려 본 첫 화면 세 가지와 평가표

  3. ROUND 3풍동 필름

    Canvas로 직접 렌더링한 240프레임, 가로 · 세로 두 벌

  4. ROUND 411월의 메인 시안

    필름 · 네 가지 색 · 라인업 · 아트 페인트 · 파츠 · 라이드 · 판매점 · 지원의 여덟 장면

  1. 01이름이 둘인 회사는 순서를 먼저 정합니다

    첫 시안은 제목을 PINARELLO로 크게 썼고, 메인 시안의 초안도 머리 로고가 PINARELLO였습니다. 마지막 수정본에서 머리 로고를 neofly로 바꾸고 PINARELLO 로고는 바닥글에 함께 두었습니다. 이야기는 피나렐로가 하고, 안내는 네오플라이가 합니다.

  2. 02색에는 장면을 따로 줍니다

    새 도색은 철마다 나옵니다. 사진 한 장만 바꾸면 되는 자리를 미리 만들어 두면, 새 색이 나와도 홈페이지 전체를 고치지 않아도 됩니다.

  3. 03연락처는 판매점 열두 곳에 둡니다

    수입원이 직접 운영하는 곳은 한 곳이지만 상담과 정비는 열두 곳에서 합니다. 지역 탭으로 목록을 줄여 가장 가까운 곳을 바로 찾게 했습니다.

14 / CREDITS제작 정보
PROJECT CARD2026

NEOFLY · WEBSITE RENEWAL

바람이 그린 선

피나렐로 공식 수입원 네오플라이의 홈페이지 리뉴얼 제안

Client네오플라이 · 피나렐로 공식 수입원
Scope홈페이지 리뉴얼 제안 · 로고 읽기 · 메인 시안
Period2026년 8월 ~ 11월
Rounds8월의 첫 시안 · 세 개의 선 · 11월의 메인 시안
Film풍동 필름 240프레임(Canvas 2D 렌더링, 가로 · 세로 두 벌)
Identity지금의 로고 · Ink #050809 · Teal #1FC2B0 · Orange #FF5A1F · Paper #F3F1EC
ToolsGSAP · ScrollTrigger · Lenis · Canvas
TypefaceArchivo · Pretendard
Studio블루캔버스
NEXT브랜드가 이미 가진 선에서 출발하는 홈페이지를 함께 그리겠습니다.

가장 빠른 선을
함께 그리겠습니다

로고 속 작은 획과 열두 해의 자료에서 출발해, 오래 타는 사람이 다시 찾는 홈페이지를 만들겠습니다.

다른 프로젝트

    Contact

    막연한 아이디어도 괜찮습니다.
    프로젝트를 함께 정리해 보세요

    현재 상황과 목표를 남겨 주시면 가능한 작업 범위와 진행 방식, 예상 견적을 정리해 안내드립니다.

    질문 4개 · 약 2분

    작업 범위

    어떤 작업을 함께 하면 좋을까요?

    여러 개 선택할 수 있습니다. 아직 정하지 못했다면 ‘기타’를 눌러 주세요.

    예산

    생각하시는 예산 범위는 어느 정도인가요?

    범위만 알려주셔도 제안 구성에 큰 도움이 됩니다.

    프로젝트 설명

    어떤 상황인지 들려주세요.

    다듬어지지 않아도 괜찮습니다. 아래 항목을 누르면 작성 틀이 채워집니다.

    0

    RFP, 참고 문서 등을 최대 2개까지 업로드할 수 있습니다. 지원 형식: PDF, PPT, Word, Excel, JPG, PNG, ZIP

    연락처

    어디로 회신드릴까요?

    작업 범위 · 예산 · 프로젝트 설명 · 연락처를 채워 주세요.