feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 297 KiB |
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 297 KiB |
|
Before Width: | Height: | Size: 560 KiB After Width: | Height: | Size: 393 KiB |
|
Before Width: | Height: | Size: 438 KiB After Width: | Height: | Size: 559 KiB |
|
Before Width: | Height: | Size: 378 KiB After Width: | Height: | Size: 316 KiB |
|
Before Width: | Height: | Size: 449 KiB After Width: | Height: | Size: 436 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 154 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 763 KiB After Width: | Height: | Size: 762 KiB |
|
Before Width: | Height: | Size: 754 KiB After Width: | Height: | Size: 684 KiB |
|
Before Width: | Height: | Size: 211 KiB After Width: | Height: | Size: 215 KiB |
|
Before Width: | Height: | Size: 539 KiB After Width: | Height: | Size: 544 KiB |
|
Before Width: | Height: | Size: 818 KiB After Width: | Height: | Size: 173 KiB |
|
Before Width: | Height: | Size: 164 KiB After Width: | Height: | Size: 173 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 561 KiB After Width: | Height: | Size: 161 KiB |
|
Before Width: | Height: | Size: 474 KiB After Width: | Height: | Size: 461 KiB |
|
Before Width: | Height: | Size: 375 KiB After Width: | Height: | Size: 434 KiB |
|
Before Width: | Height: | Size: 365 KiB After Width: | Height: | Size: 434 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 142 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 142 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 504 KiB After Width: | Height: | Size: 570 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 455 KiB After Width: | Height: | Size: 264 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 362 KiB |
|
Before Width: | Height: | Size: 328 KiB After Width: | Height: | Size: 361 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 495 KiB |
|
|
@ -74,15 +74,15 @@ export const WORK: WorkItem[] = [
|
|||
slug: "thursday-flowers",
|
||||
name: "목요일의 화원",
|
||||
kind: "플로럴 스튜디오 · 한 장",
|
||||
concept: "꽃을 파는 가게가 아니라, 꽃으로 작업하는 사람의 기록 — 서촌 골목 안의 에디토리얼",
|
||||
risk: "첫 화면에 큰 사진을 깔지 않고, 크기가 제각각인 사진 셋을 정렬선 없이 여백 위에 흩뿌립니다",
|
||||
concept: "꽃으로 작업하는 사람의 기록을 대표 사진과 보조 사진으로 엮은 플로럴 에디토리얼",
|
||||
risk: "제목·설명·상담 CTA와 사진을 0.9:1.1 두 열로 나누고, 중심 꽃다발 1장과 보조 사진 2장을 공통 캡션선에 묶습니다",
|
||||
preset: "editorial",
|
||||
date: "2026-08",
|
||||
metrics: ["이미지 603KB", "JS 0.6KB", "본문 대비 13.75:1", "하드 게이트 12/12"],
|
||||
metrics: ["꽃 사진 3장", "상담 CTA", "작업 기록 앵커", "가상 문의·가격 안내"],
|
||||
href: "/work/thursday-flowers/",
|
||||
shot: thursdayFlowers,
|
||||
shotAlt: thursdayFlowers2,
|
||||
alt: "목요일의 화원 첫 화면 — 크림색 배경에 꽃 사진 셋이 서로 다른 위치에 놓여 있습니다",
|
||||
alt: "목요일의 화원 — 크림색 배경에서 중심 꽃다발 사진과 보조 꽃 사진 두 장이 공통 캡션선에 놓인 첫 화면",
|
||||
size: "lg",
|
||||
},
|
||||
|
||||
|
|
@ -91,30 +91,30 @@ export const WORK: WorkItem[] = [
|
|||
slug: "lumina-optics",
|
||||
name: "Lumina Optics",
|
||||
kind: "광학 렌즈 시험소",
|
||||
concept: "하나의 빛줄기, 프리즘 하나 — 굴절과 분산을 매 프레임 GPU로 계산하는 시험대",
|
||||
risk: "렌더링 영상 대신 실제 셰이더 굴절(IOR·분산 슬라이더)을 첫 화면에 두고, 본문은 캔버스와 완전히 분리합니다",
|
||||
concept: "IOR와 분산의 조건·결과를 함께 읽는 가상 광학 시험대",
|
||||
risk: "제목과 가상·측정 아님 안내를 상단에 두고, 9:4 프리즘 캔버스와 두 제어를 같은 작업면에 배치합니다",
|
||||
preset: "refraction / WebGL",
|
||||
date: "2026-08",
|
||||
metrics: ["three.js 165KB 지연로드", "IOR 1.45–2.20 실시간", "WebGL 실패 시 사진 폴백", "하드 게이트 12/12"],
|
||||
metrics: ["IOR 1.45–2.20 조절", "분산 슬라이더", "MTF 곡선", "WebGL 대체 안내"],
|
||||
href: "/work/lumina-optics/",
|
||||
shot: luminaOptics,
|
||||
shotAlt: luminaOptics2,
|
||||
alt: "Lumina Optics — 어두운 시험대 위 프리즘을 통과한 빛이 스펙트럼으로 펴지는 WebGL 장면과 MTF 곡선",
|
||||
alt: "Lumina Optics — 어두운 시험대의 프리즘 스펙트럼, IOR·분산 제어와 MTF 곡선",
|
||||
size: "md",
|
||||
},
|
||||
{
|
||||
slug: "form-architecture",
|
||||
name: "스튜디오 폼 (FORM)",
|
||||
kind: "공간건축연구소 아카이브",
|
||||
concept: "판맞춤 도면 묶음 — 색이 아니라 선과 치수가 말한다",
|
||||
risk: "사진 없는 역연도 텍스트 인덱스와, 스티키 평면도가 섹션을 지나는 동안 스스로 그려지는 구조",
|
||||
concept: "빛과 비례를 사진과 도면으로 함께 읽는 공간건축 기록",
|
||||
risk: "첫 화면에 광폭 사진·짧은 소개·프로젝트 인덱스를 함께 두고, 다음 도면에서 공간의 관계를 읽게 하는 구조",
|
||||
preset: "swiss-minimal",
|
||||
date: "2026-08",
|
||||
metrics: ["무채색 100%", "Radius 0", "scroll-draw 평면도", "하드 게이트 12/12"],
|
||||
metrics: ["광폭 사진과 그림 캡션", "프로젝트 인덱스 6개", "가상 도면 참조 고지", "생성 이미지·가상 사례 표기"],
|
||||
href: "/work/form-architecture/",
|
||||
shot: formArch,
|
||||
shotAlt: formArch2,
|
||||
alt: "스튜디오 폼 — 헤어라인으로 나뉜 텍스트 인덱스와 선으로 그려진 평면도, 흑백 사진 3점",
|
||||
alt: "스튜디오 폼 — 광폭 흑백 파빌리온 사진, 프로젝트 인덱스와 선으로 그린 가상 평면도",
|
||||
size: "md",
|
||||
},
|
||||
|
||||
|
|
@ -123,41 +123,41 @@ export const WORK: WorkItem[] = [
|
|||
slug: "muwol-coffee",
|
||||
name: "무월",
|
||||
kind: "싱글오리진 원두 정기구독",
|
||||
concept: "종이 원장처럼 정직한 구독 — 가격은 첫 화면에, 거래 내역은 원장으로 공개",
|
||||
risk: "세로 GNB와 카드 대신 원장의 행 문법으로 원두를 나열하고, 구독 CTA는 회색조에서 가장 어두운 반전 블록으로",
|
||||
concept: "가격·원두 정보와 향미 좌표를 같은 기록 흐름으로 읽는 싱글오리진 구독 안내",
|
||||
risk: "가로 내비 아래 원두명·중량·예시 가격을 같은 행에 맞추고, 향미 좌표와 구독 안내를 이어 둡니다",
|
||||
preset: "quiet-commerce",
|
||||
date: "2026-08",
|
||||
metrics: ["가격 첫 화면 노출", "앰버 강조 1색", "산미-바디 좌표 플롯", "하드 게이트 12/12"],
|
||||
metrics: ["가격·중량 같은 행", "앰버 강조색", "산미-바디 좌표 플롯", "구독 안내"],
|
||||
href: "/work/muwol-coffee/",
|
||||
shot: muwolCoffee,
|
||||
shotAlt: muwolCoffee2,
|
||||
alt: "무월 로스터리 — 원두 사진과 가격이 함께 놓인 히어로, 향미 좌표 플롯과 생두 매입 원장",
|
||||
alt: "무월 로스터리 — 원두 사진과 원두명·중량·예시 가격 행, 향미 좌표 플롯",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "pulsegate",
|
||||
name: "Pulsegate",
|
||||
kind: "Edge Latency & Synthetic Probe",
|
||||
concept: "발광 없는 계기판 — 코발트는 배경이 아니라 글자와 차트 선으로만 존재한다",
|
||||
risk: "깜빡이는 상태점과 티커를 버리고 정적 24시간 프레임 하나, 그리고 스크롤에 따라 그려지는 배선도를 배치합니다",
|
||||
concept: "시간·단위·위치·응답값을 비교하는 예시 엣지 확인 워크플로",
|
||||
risk: "명령과 제한 설명을 왼쪽 경계에 묶고, 정적 24시간 프레임과 시간·단위 원장을 분리합니다",
|
||||
preset: "dark-instrument",
|
||||
date: "2026-08",
|
||||
metrics: ["코발트=잉크 전용", "CSS scroll-draw 배선도", "단일 가격 행", "하드 게이트 12/12"],
|
||||
metrics: ["24시간 예시 프레임", "선택·보조 시계열", "코발트 신호선", "시간·단위 원장"],
|
||||
href: "/work/pulsegate/",
|
||||
shot: pulsegate,
|
||||
shotAlt: pulsegate2,
|
||||
alt: "Pulsegate — 24시간 p99 차트가 담긴 정적 계기 프레임과 코발트색 선의 배선 다이어그램",
|
||||
alt: "Pulsegate — 24시간 예시 프레임, 코발트 선택선과 시간·단위가 정렬된 엣지 확인 원장",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "hyang-incense",
|
||||
name: "향연",
|
||||
kind: "자연 침향 아카이브",
|
||||
concept: "밝은 편집면 위의 기록 — 여백이 주인공이고 연기 한 줄기가 흔적이다",
|
||||
risk: "상품 사진 대신 사진 없는 목록과 가로 정보 라벨로 기록의 밀도를 만듭니다",
|
||||
concept: "밝은 편집면의 여백과 연기 사진으로 숙성 기록을 읽는 침향 아카이브",
|
||||
risk: "연기 사진은 넓은 여백 안에 두고, 수지 기록과 가로 정보 라벨은 별도 읽기 면으로 정리합니다",
|
||||
preset: "quiet-luxury",
|
||||
date: "2026-08",
|
||||
metrics: ["본문 17px·1.9행간", "중성 배경", "수지 기록 공개", "하드 게이트 12/12"],
|
||||
metrics: ["본문 17px·1.9행간", "중성 배경", "수지 기록", "가로 정보 라벨"],
|
||||
href: "/work/hyang-incense/",
|
||||
shot: hyangIncense,
|
||||
shotAlt: hyangIncense2,
|
||||
|
|
@ -170,30 +170,30 @@ export const WORK: WorkItem[] = [
|
|||
slug: "orbit-aerospace",
|
||||
name: "궤도 우주공학",
|
||||
kind: "75kN 메탄 엔진 사양서",
|
||||
concept: "도면은 말하지 않고 측정만 한다 — 재생냉각 엔진의 단면도와 지상 연소 시험 기록",
|
||||
risk: "홍보 문구 대신 손으로 그린 엔진 단면도를 첫 화면에, 보류된 시험까지 지우지 않은 기록표를 함께 둡니다",
|
||||
concept: "가상 엔진의 단면도·사양·시험 기록을 조건과 함께 읽는 페이지",
|
||||
risk: "모눈은 도면 표면에만 두고, 엔진 단면도·수치·예시 시험 기록을 각자의 읽기 면으로 분리합니다",
|
||||
preset: "technical-schematic",
|
||||
date: "2026-08",
|
||||
metrics: ["모든 수치에 측정조건", "SF-27–31 시험 공개", "구리 액센트 1색", "하드 게이트 12/12"],
|
||||
metrics: ["수치와 측정 조건", "SF-27–31 예시 시험 기록", "구리 리더선", "가상 사양서 표기"],
|
||||
href: "/work/orbit-aerospace/",
|
||||
shot: orbitAerospace,
|
||||
shotAlt: orbitAerospace2,
|
||||
alt: "궤도 우주공학 — 제도 모눈 위 엔진 단면도와 구리색 강조의 사양표, 야간 연소 시험 사진",
|
||||
alt: "궤도 우주공학 — 모눈 도면 표면의 엔진 단면도, 구리 리더선과 조건이 붙은 예시 시험 기록",
|
||||
size: "md",
|
||||
},
|
||||
{
|
||||
slug: "synapse-bci",
|
||||
name: "Synapse BCI Lab",
|
||||
kind: "64채널 신경 인터페이스",
|
||||
concept: "측정 조건이 붙은 계기 — 시뮬레이션은 시뮬레이션이라고 적고, 미측정값은 공백으로 둔다",
|
||||
risk: "64채널 스파이크 래스터 캔버스(화면 밖에서 정지)를 첫 화면에 두고, 윤리 섹션을 콘텐츠로 승격합니다",
|
||||
concept: "시뮬레이션 신호·연구 보고·윤리 경계를 함께 설명하는 신경 인터페이스 개념 페이지",
|
||||
risk: "신호·메타·장치·윤리 레일을 분리하고, 64채널 래스터에는 시뮬레이션과 데이터 한계를 가까이 표기합니다",
|
||||
preset: "dark-instrument",
|
||||
date: "2026-08",
|
||||
metrics: ["래스터 SIM 명시", "미측정값 '—' 표기", "윤리 섹션 상위", "하드 게이트 12/12"],
|
||||
metrics: ["래스터 SIM 표기", "미측정값 '—'", "윤리 섹션", "임상·참여자 데이터 없음"],
|
||||
href: "/work/synapse-bci/",
|
||||
shot: synapseBci,
|
||||
shotAlt: synapseBci2,
|
||||
alt: "Synapse BCI — 골드색 스파이크 틱이 흐르는 64채널 래스터 캔버스와 신경 칩 접사 사진",
|
||||
alt: "Synapse BCI — 금색 64채널 래스터 신호, 시뮬레이션 범례와 장치 설명 레일",
|
||||
size: "md",
|
||||
},
|
||||
|
||||
|
|
@ -202,45 +202,45 @@ export const WORK: WorkItem[] = [
|
|||
slug: "baekje-celadon",
|
||||
name: "비색의 침묵",
|
||||
kind: "고려청자 특별전 큐레이션",
|
||||
concept: "암실의 세 개의 방 — 사진이 어두울수록 유약이 가까워진다",
|
||||
risk: "전시 포스터 형식을 버리고 빙렬 매크로를 풀블리드 판으로, 상감 접사와 '제1실·제2실' 방 번호 문법으로 구성합니다",
|
||||
concept: "암실의 청자 사진과 전시실 정보를 같은 레일에서 읽는 가상 전시 구성",
|
||||
risk: "기존 4:5 청자 사진을 컨테이너 안에 두고, 제1·2실 번호·재질 설명·매크로 캡션을 공통 레일로 정리합니다",
|
||||
preset: "editorial-archival",
|
||||
date: "2026-08",
|
||||
metrics: ["빙렬 풀블리드 판", "비색 액센트 1색", "3개 방 구조", "하드 게이트 12/12"],
|
||||
metrics: ["빙렬 사진 판", "비색 강조", "전시실 번호", "가상 관람 안내"],
|
||||
href: "/work/baekje-celadon/",
|
||||
shot: baekjeCeladon,
|
||||
shotAlt: baekjeCeladon2,
|
||||
alt: "비색의 침묵 — 암실 스포트라이트 아래 청자 주자 사진과 빙렬 매크로의 풀블리드 판",
|
||||
alt: "비색의 침묵 — 암실 스포트라이트 아래 4:5 청자 사진, 전시실 번호와 빙렬 매크로 캡션",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "overtone-sound",
|
||||
name: "오버톤 사운드랩",
|
||||
kind: "공간 음향 · DSP 연구소",
|
||||
concept: "어두운 스튜디오 바닥의 목록 — 격자는 일부러 비틀었다",
|
||||
risk: "절차적 유사-FFT 캔버스(오디오 디코드 없음)와 스태거 2열 아카이브, 압축 타입 스케일로 반복을 피합니다",
|
||||
concept: "공간 음향 작업명·연도·공간·기술 메타를 읽는 가상 아카이브",
|
||||
risk: "왼쪽 텍스트 표면과 오른쪽 파형 표면을 나누고, 화면 밖에서 정지하는 캔버스와 스태거 2열 기록을 연결합니다",
|
||||
preset: "anti-grid",
|
||||
date: "2026-08",
|
||||
metrics: ["캔버스 파형·화면밖 정지", "스태거 2열 아카이브", "앰버 1색", "하드 게이트 12/12"],
|
||||
metrics: ["파형 캔버스", "화면 밖 정지", "스태거 2열 아카이브", "가상 작업 기록 표기"],
|
||||
href: "/work/overtone-sound/",
|
||||
shot: overtoneSound,
|
||||
shotAlt: overtoneSound2,
|
||||
alt: "오버톤 사운드랩 — 앰버색 파형이 흐르는 어두운 히어로와 어긋난 두 열의 작업 목록",
|
||||
alt: "오버톤 사운드랩 — 어두운 텍스트 표면과 앰버 파형 표면, 어긋난 두 열의 가상 작업 기록",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "font-foundry",
|
||||
name: "한성활자연구소",
|
||||
kind: "본문용 한글 활자 파운드리",
|
||||
concept: "글자가 상품이다 — 첫 화면의 거대 글리프, 나머지는 재료와 눈금",
|
||||
risk: "Lorem ipsum 없는 스페시멘과 자간·행간·크기가 실시간 반영되는 조판 시험대를 전면에 배치합니다",
|
||||
concept: "같은 문장에서 실제 마루부리와 Pretendard의 조판 차이를 살피는 활자 스튜디오",
|
||||
risk: "종이 소개면과 적갈색 표본면을 맞물리고, 같은 폭·22px·1.8행간 비교와 조판 제어를 전면에 둡니다",
|
||||
preset: "editorial-archival",
|
||||
date: "2026-08",
|
||||
metrics: ["시험대 슬라이더 3종", "Lorem 0회", "벽돌 강조 1색", "하드 게이트 12/12"],
|
||||
metrics: ["마루부리·Pretendard 선택", "22px·1.8 동일 폭 비교", "크기·자간·행간 조절", "기본값 초기화"],
|
||||
href: "/work/font-foundry/",
|
||||
shot: fontFoundry,
|
||||
shotAlt: fontFoundry2,
|
||||
alt: "한성활자연구소 — 따뜻한 중성 바탕 위 거대한 한글 글리프와 슬라이더 3개의 조판 시험대",
|
||||
alt: "한성활자연구소 — 종이색 소개면과 적갈색 흰 글자 표본, 실제 서체를 고르는 조판 시험대",
|
||||
size: "sm",
|
||||
},
|
||||
|
||||
|
|
@ -248,31 +248,31 @@ export const WORK: WorkItem[] = [
|
|||
{
|
||||
slug: "gaon-lms",
|
||||
name: "가온 학적부",
|
||||
kind: "학습관리 콘솔 · 8화면",
|
||||
concept: "기록 중심의 관리 콘솔 — 형광펜 밑줄과 상태 라벨이 정보를 구분한다",
|
||||
risk: "관리 콘솔의 기본값인 파란 사이드바와 카드 그리드를 버리고, 학적부의 행 문법으로 화면 여덟 개를 묶어 짓습니다",
|
||||
kind: "학습관리 콘솔 · 9개 뷰",
|
||||
concept: "수업·출석·과제·상담 기록을 9개 뷰에서 대조하는 학적부형 관리 화면",
|
||||
risk: "요약 기록 밴드와 표의 행 문법으로 9개 뷰를 묶고, 상태는 텍스트·색·오른쪽 정렬 수치로 함께 구분합니다",
|
||||
preset: "ledger-console",
|
||||
date: "2026-08",
|
||||
metrics: ["뷰 9종 전환", "모바일 바텀내비 + 더보기 시트", "안드로이드 백 키 = 앱 내 뒤로", "safe area · 44px 터치타깃", "홈 설치(PWA) · 인쇄 2종", "채점 범위 검증", "키보드 단축키 1–9 · /"],
|
||||
metrics: ["9개 뷰 전환", "수강생 검색·상태 필터", "출석 상태 순환", "자료 조회·학기 리포트", "키보드 1–9 · /"],
|
||||
href: "/work/gaon-lms/",
|
||||
shot: gaonLms,
|
||||
shotAlt: gaonLms2,
|
||||
alt: "가온 학적부 — 종이 톤 대시보드의 주간 출석 막대와 과제 마감 표, 흑연 사이드바",
|
||||
alt: "가온 학적부 — 종이 톤 기록면의 주간 출석 막대와 과제 표, 9개 뷰를 여는 흑연 사이드바",
|
||||
size: "md",
|
||||
},
|
||||
{
|
||||
slug: "dure-enrollment",
|
||||
name: "두레대학 수강신청",
|
||||
kind: "수강신청 · 6화면",
|
||||
concept: "정돈된 수강신청 — 명료한 제목과 IBM Plex 본문, 벽돌색 상태 라벨이 정보를 구분한다",
|
||||
risk: "여섯 화면이 하나의 상태(신청·관심)를 공유합니다. 시간 겹침·학점 초과·정원 마감은 신청 전에 막습니다",
|
||||
concept: "과목 목록과 시간표를 한 작업면에서 비교하는 수강신청 화면",
|
||||
risk: "신청·관심 상태를 여섯 화면에서 공유하고, 시간 겹침·학점 초과·정원 마감은 신청 전의 상태 안내로 남깁니다",
|
||||
preset: "timetable-ink",
|
||||
date: "2026-08",
|
||||
metrics: ["시간 겹침 즉시 차단", "취소 실행취소", "색인탭 6종 · 모바일 바텀내비", "안드로이드 백 키 = 앱 내 뒤로", "safe area · 44px 터치타깃", "홈 설치(PWA) · 인쇄 2종", "이수 학점 실시간 집계"],
|
||||
href: "/work/dure-enrollment/",
|
||||
shot: dureEnrollment,
|
||||
shotAlt: dureEnrollment2,
|
||||
alt: "두레대학 수강신청 — 과목 목록과 벽돌색 상태 라벨이 놓이는 주간 시간표 격자",
|
||||
alt: "두레대학 수강신청 — 과목 목록, 벽돌색 상태 라벨과 주간 시간표를 함께 보는 작업면",
|
||||
size: "md",
|
||||
},
|
||||
|
||||
|
|
@ -281,54 +281,54 @@ export const WORK: WorkItem[] = [
|
|||
slug: "cheongon-care",
|
||||
name: "청온 케어",
|
||||
kind: "위생 케어 & 관제 콘솔 · 2모드",
|
||||
concept: "임상 수준의 6단계 위생 프로토콜 — 정찰제 견적과 실시간 배차 관제 콘솔",
|
||||
risk: "고객용 견적 신청 폼과 관리자용 관제 대시보드가 단일 웹앱에서 실시간 상태를 공유하는 풀-루프 인터랙션",
|
||||
concept: "6단계 위생 프로토콜 예시와 견적 입력·운영 화면을 함께 보여 주는 케어 안내",
|
||||
risk: "소개와 견적 행동은 읽기 레일에, 생활 공간 사진과 검수 항목 예시는 한 장면에 두는 구조",
|
||||
preset: "ledger-console",
|
||||
date: "2026-08",
|
||||
metrics: ["고객·관리자 2모드", "실시간 정찰제 견적기", "32개 QC 체크리스트", "에메랄드 1색", "하드 게이트 15/15"],
|
||||
metrics: ["고객·운영 2모드", "견적 입력·합계 명세", "32개 검수 항목 예시", "6단계 프로토콜 안내", "청록 상태 라벨"],
|
||||
href: "/work/cheongon-care/",
|
||||
subLinks: [
|
||||
{ label: "임상 6단계 위생 프로토콜 & ATP 리포트", href: "/work/cheongon-care/protocol/" }
|
||||
{ label: "6단계 검수 절차 예시", href: "/work/cheongon-care/protocol/" }
|
||||
],
|
||||
shot: cheongonCare,
|
||||
shotAlt: cheongonCare2,
|
||||
alt: "청온 케어 — 정밀 입주 케어가 완료된 거실 전경과 독일 카처 고온 스팀 위생 장비",
|
||||
alt: "청온 케어 — 생활 공간 사진 옆에 6단계 위생 절차와 견적 입력·합계 명세를 둔 안내 화면",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "cask-archive",
|
||||
name: "캐스크 아카이브",
|
||||
kind: "독립병입자 위스키바 & 도슨트",
|
||||
concept: "시간과 배럴이 빚어낸 단 하나의 원액 — 독립병입자 공식 인증 원장과 1:1 도슨트",
|
||||
risk: "일반 메뉴판 대신 단일 캐스크 넘버와 통관 필증이 기록된 캐스크 원장 및 향미 필터를 첫 화면에 배치",
|
||||
concept: "캐스크 번호·향미 조건을 원장으로 읽는 독립병입 위스키 안내",
|
||||
risk: "큰 병 사진 아래에 캐스크 번호·종류·향미 조건을 같은 폭의 원장형 캡션으로 묶는 구조",
|
||||
preset: "editorial-archival",
|
||||
date: "2026-08",
|
||||
metrics: ["독립병입자 4종 인증", "실시간 캐스크 원장 검색", "1:1 도슨트 예약", "앰버 골드 1색", "하드 게이트 15/15"],
|
||||
metrics: ["캐스크 번호·향미 조건", "검색·필터", "1:1 도슨트 세션 선택", "예시 원장·예약 안내", "앰버 강조"],
|
||||
href: "/work/cask-archive/",
|
||||
subLinks: [
|
||||
{ label: "1:1 위스키 도슨트 테이스팅 마스터클래스", href: "/work/cask-archive/docent/" }
|
||||
],
|
||||
shot: caskArchive,
|
||||
shotAlt: caskArchive2,
|
||||
alt: "캐스크 아카이브 — 오크 배럴 상판 위 싱글 캐스크 위스키 보틀과 스코틀랜드 숙성고 전경",
|
||||
alt: "캐스크 아카이브 — 어두운 앰버 표면의 병 사진과 캐스크 번호·향미 조건 원장형 캡션",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "materia-interior",
|
||||
name: "마테리아 스튜디오",
|
||||
kind: "하이엔드 공간 인테리어 건축",
|
||||
concept: "빛과 트래버틴이 빚어내는 침묵 — 물성과 자연광의 궤적을 설계하는 아틀리에",
|
||||
risk: "썸네일 그리드를 버리고 트래버틴·오크·리넨의 실측 물성 스펙과 자연광/야간 조도 앰비언스 실시간 전환을 제공",
|
||||
concept: "빛·재료·공간 사진을 대표·보조 프로젝트로 엮는 인테리어 포트폴리오",
|
||||
risk: "5:7 사진 우세 히어로와 대표 프로젝트를 앞세우고, 재료 설명과 Day/Night 보기 전환을 같은 기록 흐름에 둡니다",
|
||||
preset: "editorial",
|
||||
date: "2026-08",
|
||||
metrics: ["자연광·야간 조도 전환", "트래버틴 물성 스펙", "더블 베젤 갤러리", "브론즈 1색", "하드 게이트 15/15"],
|
||||
metrics: ["Day/Night 조도 전환", "트래버틴 물성 스펙", "대표·보조 프로젝트", "24개 상세 갤러리", "브론즈 강조"],
|
||||
href: "/work/materia-interior/",
|
||||
subLinks: [
|
||||
{ label: "24개 공간 심층 아카이브 갤러리 (한남 듀플렉스)", href: "/work/materia-interior/projects/hannam-duplex/" }
|
||||
],
|
||||
shot: materiaInterior,
|
||||
shotAlt: materiaInterior2,
|
||||
alt: "마테리아 스튜디오 — 트래버틴 벽체 펜트하우스 거실 전경과 천연 마감재 플랫레이",
|
||||
alt: "마테리아 스튜디오 — 빛이 들어오는 공간 사진, 재료 설명과 대표 프로젝트 캡션",
|
||||
size: "sm",
|
||||
},
|
||||
|
||||
|
|
@ -337,63 +337,63 @@ export const WORK: WorkItem[] = [
|
|||
slug: "rfs-cfd",
|
||||
name: "RFS — 실시간 유체 시뮬레이터",
|
||||
kind: "데이터센터 열관리 GPU 엔진",
|
||||
concept: "암실과 사양서 — 유동이 있는 곳은 어둡고, 읽는 곳은 밝다",
|
||||
risk: "히어로에서 브라우저가 실제로 열유동을 풉니다. 슬라이더로 랙 부하와 급기량을 바꾸면 그 자리에서 유동이 달라집니다",
|
||||
concept: "운전 조건과 열유동 표현을 함께 읽는 데이터센터 열관리 데모",
|
||||
risk: "왼쪽의 설명·운전 장면·슬라이더·읽기 결과와 오른쪽 열유동 캔버스를 하나의 계기면에 둡니다",
|
||||
preset: "darkroom-spec",
|
||||
date: "2026-08",
|
||||
metrics: [
|
||||
"WebGL2 실시간 열유동 (three.js 미사용)",
|
||||
"라이트/다크 반전을 토큰 규칙으로",
|
||||
"수치는 전부 개발 저장소 출처",
|
||||
"정확도 지표는 싣지 않음",
|
||||
"하드 게이트 15/15",
|
||||
"운전 조건 슬라이더",
|
||||
"열유동 캔버스",
|
||||
"2D 축소 표현 라벨",
|
||||
"라이트/다크 읽기 표면",
|
||||
"화면 밖 정지·감소 모션",
|
||||
],
|
||||
href: "/work/rfs-cfd/",
|
||||
shot: rfsCfd,
|
||||
shotAlt: rfsCfd2,
|
||||
alt: "RFS — 어두운 전산실 단면에서 서버랙 위로 초록 열기둥이 오르고 주변에 청록 냉기가 순환하는 실시간 유체 화면",
|
||||
alt: "RFS — 어두운 계기면의 서버랙 열유동 캔버스와 랙 부하·급기량 조절값",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "twentyoz-corp",
|
||||
name: "트웬티온스 (TWENTYOZ)",
|
||||
kind: "ICT 기업 홈페이지 리디자인",
|
||||
concept: "네 개의 현장 — 회사 소개가 아니라, 같은 기술이 어느 현장에서 무엇을 하는지의 목록",
|
||||
risk: "첫 화면에 회사 이름과 슬로건을 두지 않습니다. 현장을 고르면 제품·기술·납품 사례가 통째로 바뀝니다",
|
||||
concept: "네 현장 탭에서 제품·기술·납품 기록을 읽는 ICT 기업 홈페이지",
|
||||
risk: "히어로 높이를 제한하고 네 현장 탭·선택 패널·제품 상세 진입을 첫 화면의 주요 행동으로 둡니다",
|
||||
preset: "field-record",
|
||||
date: "2026-08",
|
||||
metrics: [
|
||||
"현행 사이트 감사: 대비 실패 172개 요소",
|
||||
"한글 폰트 미지정 → Pretendard 지정",
|
||||
"현장 전환 JS 0바이트 (라디오 그룹)",
|
||||
"신호 적색 1색",
|
||||
"하드 게이트 15/15",
|
||||
"현장 탭 4개",
|
||||
"제품·기술·납품 기록",
|
||||
"라디오 그룹 상태 전환",
|
||||
"제품 상세 경로",
|
||||
"앰버 현장 이미지",
|
||||
],
|
||||
href: "/work/twentyoz-corp/",
|
||||
shot: twentyozCorp,
|
||||
shotAlt: twentyozCorp2,
|
||||
alt: "트웬티온스 — 종이 톤 위에 네 개의 현장 탭이 가로로 놓이고 선택된 현장의 제품과 납품 사례가 아래에 펼쳐진 화면",
|
||||
alt: "트웬티온스 — 앰버 현장 이미지 위 네 개의 현장 탭과 선택된 제품·기술·납품 기록",
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
slug: "saebyeok-cheonggwa",
|
||||
name: "새벽청과",
|
||||
kind: "청과 도매 직거래",
|
||||
concept: "오늘 새벽 두 시의 값 — 값이 매일 바뀐다는 사실을 첫 화면의 주인공으로 삼는다",
|
||||
risk: "상품 사진 대신 오늘의 시세판이 히어로입니다. 낙찰가와 판매가를 같은 것처럼 적지 않고, 당도를 표시할 수 없는 품목은 '—' 로 둡니다",
|
||||
concept: "새벽 시장 사진의 시간 맥락과 예시 시세표를 분리해 읽는 청과 거래 안내",
|
||||
risk: "사진·제목은 어두운 상단에 두고, 낙찰가·단위·등락·선택 로트는 불투명한 종이 시세표에 정렬합니다",
|
||||
preset: "market-board",
|
||||
date: "2026-08",
|
||||
metrics: [
|
||||
"시세판이 히어로",
|
||||
"등급·당도·규격 실제 표준규격 근거",
|
||||
"등급·당도·규격 표기",
|
||||
"제철 12개월 띠 · 이번 달 자동 표시",
|
||||
"새벽 남색 1색 · 사진만 유채색",
|
||||
"하드 게이트 15/15",
|
||||
"선택 상태와 예시 시세 안내",
|
||||
],
|
||||
href: "/work/saebyeok-cheonggwa/",
|
||||
shot: saebyeokCheonggwa,
|
||||
shotAlt: saebyeokCheonggwa2,
|
||||
alt: "새벽청과 — 새벽 도매시장 통로 사진 위에 품목·산지·등급·당도·낙찰가가 적힌 오늘의 시세판",
|
||||
alt: "새벽청과 — 어두운 새벽 시장 사진과 분리된 종이 표면의 예시 시세표",
|
||||
size: "sm",
|
||||
},
|
||||
|
||||
|
|
@ -402,16 +402,15 @@ export const WORK: WorkItem[] = [
|
|||
slug: "hannam-jari",
|
||||
name: "한남자리",
|
||||
kind: "맞춤 주거 브리핑 · 운영 화면",
|
||||
concept: "집보다 기준을 먼저 — 다섯 조건을 AI가 비교하고 공인중개사가 다시 확인하는 개인 브리핑 데스크",
|
||||
risk: "가상 매물을 실제 광고처럼 꾸미지 않습니다. 입력한 조건, AI의 추론, 중개사가 확인할 사실을 한 화면에서 분리합니다",
|
||||
concept: "다섯 조건으로 예시 주거 후보와 확인 책임을 분리해 보는 브리핑·운영 화면",
|
||||
risk: "조건의 라벨·입력값·결과 행동을 같은 조건판에 두고, 가상 자료·AI 참고·중개사 확인을 상태 텍스트로 구분합니다",
|
||||
preset: "domestic-briefing-desk",
|
||||
date: "2026-08",
|
||||
metrics: [
|
||||
"공개·관리자 2화면",
|
||||
"조건 5개 단일 기준",
|
||||
"후보 3건·서류철 5종",
|
||||
"생성 이미지 범위 표시",
|
||||
"브라우저 E2E 90/90",
|
||||
"AI 추론·중개사 확인 분리",
|
||||
],
|
||||
href: "/work/hannam-jari/",
|
||||
subLinks: [
|
||||
|
|
@ -419,23 +418,22 @@ export const WORK: WorkItem[] = [
|
|||
],
|
||||
shot: hannamJari,
|
||||
shotAlt: hannamJari2,
|
||||
alt: "한남자리 — 밝은 석재색 브리핑 데스크와 서울 주거 외관 이미지, 다섯 가지 맞춤 조건 입력판",
|
||||
alt: "한남자리 — 밝은 브리핑 데스크의 다섯 조건 입력판과 예시 후보 비교 정보",
|
||||
size: "md",
|
||||
},
|
||||
{
|
||||
slug: "griddle-club",
|
||||
name: "철판클럽",
|
||||
kind: "도심 버거 매장 · 가맹 안내",
|
||||
concept: "눌러 굽고 바로 건넨다 — 주문 뒤 조립하는 서울형 철판 버거와 운영 조건을 함께 보여 주는 두 갈래 사이트",
|
||||
risk: "음식 사진만으로 가맹을 약속하지 않습니다. 상권, 점포, 주방 동선과 아직 정하지 못한 비용을 상담 전에 먼저 펼칩니다",
|
||||
concept: "서울형 철판 버거의 조합과 가맹 운영 조건을 두 경로에서 안내하는 사이트",
|
||||
risk: "상품·예시 가격·조합 시작 행동은 사진 아래 정상 흐름의 코발트 shelf에 두고, 가맹 조건·비용은 단계 원장으로 정렬합니다",
|
||||
preset: "seoul-counter-service",
|
||||
date: "2026-08",
|
||||
metrics: [
|
||||
"브랜드·가맹 2화면",
|
||||
"버거 조합기",
|
||||
"비용 미정 항목 공개",
|
||||
"생성 이미지 범위 표시",
|
||||
"브라우저 E2E 90/90",
|
||||
"가맹 안내 별도 경로",
|
||||
],
|
||||
href: "/work/griddle-club/",
|
||||
subLinks: [
|
||||
|
|
@ -443,7 +441,7 @@ export const WORK: WorkItem[] = [
|
|||
],
|
||||
shot: griddleClub,
|
||||
shotAlt: griddleClub2,
|
||||
alt: "철판클럽 — 밝은 종이색 화면과 코발트색 강조, 철판에서 구운 버거를 포장하는 서울형 매장 장면",
|
||||
alt: "철판클럽 — 밝은 종이색 화면의 버거 사진 아래 코발트 상품 shelf와 조합 시작 행동",
|
||||
size: "md",
|
||||
},
|
||||
];
|
||||
|
|
|
|||