예술 & 사진

Philippe Reynaud

사진가에게 최고의 디자인은 눈에 띄지 않는 디자인입니다.

연도
2026
제작 기간
2주
기술 스택
React · Vite · Tailwind · Vercel
  • 디자인
  • 개발
  • SEO
https://www.philippe-reynaud.fr/
Philippe Reynaud 웹사이트 메인 페이지 — 예술 & 사진, Kayzen Web 제작
서체 패밀리
1
강조 색상
0
Lighthouse SEO
100/100
출발점

해결해야 했던 과제.

배경

Philippe Reynaud는 파인아트 사진가입니다. 흑백 프린트 작업, 전시, 오리지널 작품 판매를 합니다.

제약

사진가의 포트폴리오는 디자인이 사라져야 하는 유일한 종류의 사이트입니다. 모든 색, 두드러진 타이포그래피, 모든 효과가 이미지와 경쟁합니다. 그리고 팔리는 것은 이미지입니다.

해법

뼈대만 남긴 인터페이스: 중립 회색, 절제된 타이포그래피, 최소한의 내비게이션. 프린트는 중립 배경 위에 큰 크기로 보여 주고, 인화 용지, 크기, 에디션 등 프린트 사양을 함께 표기합니다. 판매는 장바구니가 아니라 문의로 처리합니다.

주장이 아닌 측정

납품 시점에 측정한 점수.

운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.

PageSpeed
89
성능: 100점 만점에 89점
88
접근성: 100점 만점에 88점
100
권장사항: 100점 만점에 100점
100
검색엔진 최적화: 100점 만점에 100점
디자인 & 아트 디렉션

모든 선택에는 이유가 있습니다.

  1. 완전한 중립 회색

    이미지 주변에 어떤 색조도 두지 않았습니다. 배경이 조금만 따뜻하거나 차가워도 흑백 프린트의 인상이 달라집니다. 파인아트 사진가에게는 치명적입니다.

  2. 드러나지 않는 타이포그래피

    한 가지 서체 패밀리, 두 가지 크기, Medium을 넘는 굵기는 사용하지 않습니다. 작품 제목은 절제된 크기로 이미지 아래에 두며, 절대 이미지 위에 얹지 않습니다.

  3. 프린트 사양 표기

    인화 용지, 크기, 에디션 번호. 아트 프린트 구매자는 이미지만큼이나 실물 오브제를 삽니다. 이 정보는 작품의 일부입니다.

프로젝트 색상 팔레트

  • 그레이 950

    #111111

    텍스트

  • 그레이 100

    #F2F2F2

    갤러리 배경

  • 그레이 500

    #7A7A7A

    보조 레이블

  • 화이트

    #FFFFFF

    페이지 표면

타이포그래피 체계

제목용 서체

Inter 500

본문용 서체

Inter 400

한 가지 서체 패밀리, 굵은 웨이트 없음. 포트폴리오에서 타이포그래피는 봉사하는 역할이지, 서명이 되어서는 안 됩니다.

엔지니어링

보이지 않는 곳의 기술.

  • React
  • Vite
  • Tailwind
  • Vercel
  1. 실제로 필요한 해상도의 이미지

    각 프린트는 실제로 표시되는 크기에 맞춰 최신 포맷으로 제공됩니다. 사진 사이트에서는 재현 품질이 곧 상품입니다. 과도하게 압축하는 것도, 불필요하게 무겁게 하는 것도 어리석은 일입니다.

  2. 파악된 접근성 과제 하나

    88점: 일부 보조 레이블의 명도 대비가 기준에 못 미칩니다. 절제된 타이포그래피라는 선택의 직접적인 결과입니다. 수정 방법은 이미 파악되었고, 실질적인 시각적 타협은 필요 없습니다.

검색엔진 최적화

사이트가 검색되는 방식.

  1. 작가명과 시리즈

    작가의 이름이 핵심 검색어이고, 시리즈와 전시 제목이 그 뒤를 잇습니다. 작가 포트폴리오는 일반 키워드가 아니라 고유명사로 검색됩니다.

  2. VisualArtwork 마크업

    각 프린트에 유형, 작가, 크기를 표기합니다. 작품에 기대되는 표준 마크업이며, 이미지 검색에도 반영됩니다.

사이트 구조

납품한 결과물.

  • 홈
  • 시리즈
  • 구매 가능한 프린트
  • 전시
  • 약력
  • 문의
방법론

프로젝트 진행 과정.

  1. 방향 설정

    이미지를 위해 디자인을 지웁니다.

  2. 디자인

    중립 회색, 단일 서체, 프린트 정보.

  3. 개발

    필요한 해상도의 이미지, 최신 포맷.

질문

자주 받는 질문.

정보가 부족할 수는 있습니다. 프린트 정보도, 약력도, 분명한 연락처도 없다면요. 하지만 시각적으로 지나치게 조용할 수는 없습니다. 이미지 밖으로 시선을 끄는 모든 것은 판매에 불리하게 작용합니다.

같은 수준의 기준을, 귀하의 사이트에도.

현재 사이트 무료 진단, 24시간 이내 견적, 그리고 방금 읽으신 것과 같은 서면 분석을 제공합니다. 3회 무이자 분할 결제가 가능하며, 이용 가능한 지역 지원금은 계약 전에 확인합니다.

공유