GENESIS NOTES · ABOUT

기술과 창작 사이의사용 가능한 기록

AI·UI·타이포그래피를 직접 시험하고 제작 관점으로 정리한 연구 노트입니다.

WHY THIS NOTE EXISTS

좋아 보이는 것에서
쓸 수 있는 것으로

도구와 스타일을 직접 시험해 핵심 원리와 주의점만 남깁니다. 다음 작업을 위한 판단 기준입니다.

THREE STUDY TRACKS

세 개의 렌즈로 화면을 봅니다

014 AI TOOLS

AI STUDY

도구보다 작업 흐름을 봅니다

네 가지 AI의 강점과 역할을 작업 흐름으로 비교합니다.

0218 UI STYLES

UI STUDY

스타일을 이름과 규칙으로 해체합니다

18개 스타일의 쓰임과 주의점을 정리합니다.

0313 TYPEFACES

TYPE STUDY

읽히는 화면의 뼈대를 연구합니다

한글·영문 폰트의 역할, 성능, 라이선스를 비교합니다.

WORKING PRINCIPLE

관찰하고, 만들고,
다시 설명합니다

01
OBSERVE
서비스와 사례를 직접 보고 차이를 찾습니다.
02
BUILD
작은 샘플로 만들어 원리가 실제로 작동하는지 확인합니다.
03
TRANSLATE
처음 접하는 사람도 판단할 수 있는 언어로 다시 씁니다.

THE CURATOR

이종원 · Technical Artist

10년 이상 아티스트와 개발자 사이를 연결해 왔습니다. 지금은 AI 기술을 창작자가 쓸 수 있는 도구와 설명으로 번역합니다.

Genesis Frameworks ↗LinkedIn ↗

ABOUT ARCHIVE

이전 About 페이지의 상세 이력과 프로젝트 기록입니다.

CURATOR · GENESIS NOTES

이종원

Technical Artist · Genesis Frameworks
SEED Today 웹사이트 리뉴얼 담당

게임업계에서 10년 이상 테크니컬 아티스트로 일했습니다. 프로그래머의 논리적인 언어와 아티스트의 감각적인 언어를 모두 이해하고, 창작자가 기술에 막히지 않도록 그 사이의 도구와 시스템을 설계해 왔습니다.

“기술과 창작 사이를 통역하고, 그 사이의 길을 놓습니다.”

Genesis Frameworks LinkedIn

작년 AI 강의 보기

TECHNICAL ARTIST도구를 만드는 번역자

WHAT IS A TECHNICAL ARTIST?

예술과 기술 사이를 통역합니다

게임은 코드로 만든 시스템 위에서 그림이 움직이는 매체입니다. 그래서 두 가지 언어가 쓰입니다. 하나는 프로그래머의 논리적인 언어이고, 다른 하나는 아티스트의 감각적인 언어입니다.

게임회사에서 아티스트와 개발자의 서로 다른 언어를 이어 왔다면, 이제는 AI의 복잡한 기술과 그것을 처음 만나는 일반 사용자를 잇는 통로를 만들고 있습니다. 누구나 AI를 자신의 일에 맞게 이해하고 직접 활용할 수 있도록, 어려운 기능을 쉬운 도구와 실제 사례로 번역합니다.

01
PROGRAMMER논리의 언어로 시스템을 만듭니다
02
ARTIST감각의 언어로 화면을 만듭니다
03
TECHNICAL ARTIST두 언어를 모두 쓰며 그 사이의 길을 놓습니다

아티스트가 기술적인 장벽에 부딪히지 않고 창작에만 집중하도록, 그 기반이 되는 도구와 파이프라인을 설계하고 다듬는 일입니다. 아래 영상이 그렇게 만든 도구입니다. 복잡한 라이팅 시스템을 몰라도 손잡이를 돌리면 낮과 밤이 바뀝니다.

AI도 같습니다. 기술 그 자체보다, 원하는 곳까지 데려다주는 길이 얼마나 잘 놓여 있는지가 결과를 가릅니다.

영상이 보이지 않으면 YouTube에서 보기

MY AI JOURNEY · 2023—2026

질문에서 협업으로

모델이 좋아질 때마다 AI가 해주는 일뿐 아니라, AI와 함께 일하는 방식도 바뀌었습니다.

2023
코드 리뷰부터 본격적으로
작성 중인 코드를 검토하는 데 AI를 본격적으로 써왔습니다. 그럴듯하게 틀리는 답도 많아 직접 확인하는 습관도 이때 배웠습니다.
2024
질문에 답하는 AI 비서
대화를 주고받으며 생각을 정리하고, 막힌 문제를 함께 풀어가는 일상적인 비서로 사용 범위가 넓어졌습니다.
2025
사용자에서 웹사이트 제작자로
AI를 사용하는 웹사이트를 직접 만들기 시작하며, 답을 받는 사람에서 실제 도구를 만드는 사람으로 전환했습니다.
2026
여러 AI와 함께 만드는 방식
하나의 AI에 모든 일을 맡기기보다 조사, 글쓰기, 이미지, 구현에 맞는 도구를 조합해 협업하고 있습니다.

FROM NEED TO WORKING TOOL

작은 불편에서 시작한 5가지 프로젝트

완벽한 아이디어보다 눈앞의 작은 문제 하나를 고르고, AI와 함께 실제로 작동하는 도구까지 만들어 본 기록입니다.

PROJECT 01 / 05

HISTORY · BIBLE · DIALOGUE

GenesisChat

2025.06

좋아하는 인물과 직접 대화해 보고 싶다는 단순한 호기심에서 시작했습니다. 지금은 성경 인물로 방향을 넓혀 가고 있습니다.

01
시작
역사 인물의 관점과 기억을 가진 AI와 대화해 보고 싶었습니다. 순전히 재미로 시작한 일이었습니다.
02
확장
한 명의 실험이 650명 넘는 인물로 커졌습니다. 지금은 성경 인물로 범위를 넓히는 중입니다.
03
배운 점
재미로 시작한 작은 호기심도 꾸준히 만들면 쓸 수 있는 자산이 됩니다.

SEED APPLIED

성경 인물은 설명만으로는 잘 와닿지 않습니다. 호기심 많은 아이들이나 현지의 전도 대상자가 그 인물과 자기 나라 말로 직접 대화해 보면, 재미와 함께 선교적 의미도 같이 전할 수 있습니다.

프로젝트 열기

PROJECT 02 / 05

CONVERT · RESIZE · MERGE

Genesis Converter

2025.08

로고 하나를 선명하게 바꾸려던 변환기였습니다. 지금은 PDF를 합치고 사진을 폴더째 줄이는 일상 도구가 되었습니다.

01
시작
SEED 로고가 저화질에 특수 포맷이라 웹에 쓸 수 없었습니다. 선명한 SVG로 바꾸는 것이 출발점이었습니다.
02
확장
여러 PDF를 하나로 합치고, 사진 폴더를 통째로 웹사이트에 맞는 크기로 한 번에 줄입니다.
03
배운 점
한 번 필요했던 변환이 매번 쓰는 도구가 되었습니다. 반복되는 일일수록 도구로 만들 가치가 있습니다.

SEED APPLIED

선교사님들이 현장에서 찍은 사진은 그대로 올리기에는 용량이 큽니다. 폴더째 웹사이트에 맞는 크기로 한 번에 줄이면, 게시 전 준비가 훨씬 간단해집니다.

프로젝트 열기

PROJECT 03 / 05

MULTI-MODEL CREATIVE STUDIO

Genesis AI Image Studio

2025.08

AI에게 어떻게 부탁해야 사진이 예쁘게 나올까. 그 방법을 가르치려던 교육 자료에서 출발한 창작 공간입니다.

01
시작
같은 설명을 여러 이미지 AI에 넣으면 무엇이 다를지 비교해 보고 싶었습니다.
02
변화
만드는 사이 AI가 크게 좋아졌습니다. 이제는 복잡한 요령 없이 원하는 이미지를 바로 뽑을 수 있습니다.
03
배운 점
도구가 좋아지면 가르쳐야 할 것도 바뀝니다. 요령보다 무엇을 원하는지가 더 중요해졌습니다.

SEED APPLIED

여기서 얻은 감각이 홈페이지 작업으로 이어졌습니다. SEED Today를 개선할 때도 원하는 화면을 예시 이미지로 먼저 만들어 보고, 그 그림을 기준으로 실제 페이지를 다듬고 있습니다.

프로젝트 열기

PROJECT 04 / 05

IMAGE · PDF VIEWER

Genesis View

2025.12

기도 수첩을 내려받지 않고 웹에서 바로 넘겨 보게 하려고 만들었습니다. 지금은 사진첩까지 같은 도구가 맡고 있습니다.

01
시작
기도 수첩을 보려면 링크를 누르고 내려받아 열어야 했습니다. 그냥 웹에서 바로 넘겨 보게 하고 싶었습니다.
02
확장
연결 앨범과 임베드 생성기를 더했습니다. 이후 갤러리 모드까지 붙어 사진첩도 같은 도구로 해결됩니다.
03
현장
지금 SEED Today의 기도 수첩과 선교 현장 사진첩이 모두 이 뷰어 위에서 돌아갑니다.

SEED APPLIED

지금 SEED Today에서 기도 수첩을 다운로드 없이 바로 넘겨 보는 기능이 이 뷰어입니다. 이후 갤러리 모드를 더해 홈페이지의 선교 현장 사진첩까지 같은 도구로 운영하고 있습니다.

프로젝트 열기

PROJECT 05 / 05

MULTI-CLOUD FILE MANAGER

Genesis Box

2026.01

개발을 몰라도 파일을 올리는 즉시 웹사이트에서 쓸 수 있게 했습니다. 올리는 일과 게시하는 일을 하나로 합쳤습니다.

01
불편
Drive와 Dropbox는 쓰기 쉽습니다. 다만 웹에 올리려면 내려받아 다시 올리는 두 번 일이 생깁니다.
02
해결
S3나 R2 같은 웹 저장소는 사이트에 바로 붙지만 어렵습니다. 그 사이를 누구나 쓸 수 있게 이었습니다.
03
연결
Genesis Box가 올리고 Genesis View가 보여줍니다. 두 도구가 하나의 실무 흐름이 되었습니다.

SEED APPLIED

예전에는 받은 파일을 담당자가 내려받아 홈페이지에 다시 올려야 했습니다. 지금은 올리는 순간 사이트에 반영되어, 자료를 전달하고 게시하는 과정이 한 단계로 줄었습니다.

프로젝트 열기

MISSION WEBSITE RENEWAL

SEED Today, 한 프로젝트 속 AI의 진화

오래된 자료를 읽고 옮기는 일에서 출발해 3D 페이지, 지부 페이지와 이미지 기반 협업까지 발전한 실제 홈페이지 제작기입니다.

IMAGE SLOT · 1600 × 1000 PNG
01GEMINI CLI
자료 분석
옮겨야 할 자료가 어디에 무엇이 있는지부터 파악해야 했습니다. 사람이 하나씩 열어 보는 대신 AI에게 먼저 읽혔습니다.
1. 문제
  메뉴는 겹겹이 복잡했고, 넘겨받은 자료는 15,341개였습니다. 기존 사이트의 관리자 권한도 없었습니다.
2. 방법
  폴더 안의 파일을 스스로 읽고 정리하는 Gemini CLI에 자료를 맡겼습니다. 사이트의 사진과 문서를 훑어 미리 분석하게 했습니다.
3. 결과
  무엇이 어디에 있는지 언제든 답해 주는, 기존 사이트를 가장 잘 아는 분석가가 생겼습니다.
IMAGE SLOT · 1600 × 1000 PNG
02CLAUDE COWORK
콘텐츠 이전
게시글과 사진을 사람이 하나씩 옮기는 대신, 양쪽 사이트의 접속 권한을 주고 이전 작업 자체를 맡겨 보았습니다.
1. 문제
  옮겨야 할 게시글과 사진이 너무 많았습니다. 이걸 하나씩 손으로 옮기는 게 맞나 싶었습니다.
2. 방법
  한번 맡겨 보자는 마음으로 양쪽 사이트의 접속 권한을 열어 주었습니다. 그리고 Cowork에 이전 작업을 그대로 넘겼습니다.
3. 결과
  대부분의 콘텐츠가 사람 손을 거의 거치지 않고 새 홈페이지로 옮겨졌습니다.
지구본 불러오는 중
드래그해서 회전 · 스크롤로 확대
03CLI WORKFLOW
3D 페이지 제작
코드 작업을 돕는 AI 환경을 활용해 3D 비주얼과 인터랙션이 들어간 페이지를 실제 웹 경험으로 구현했습니다.
다음 업데이트 자리이미지와 상세 설명을 같은 섹션에 이어서 추가할 수 있습니다.
IMAGE SLOT · 1600 × 1000 PNG
04REFERENCE TO PAGE
USA · Canada 확장
기존 링크와 한 장의 소개 자료를 출발점으로 삼아 각 지부의 이야기와 정보를 독립된 페이지로 구성했습니다.
다음 업데이트 자리이미지와 상세 설명을 같은 섹션에 이어서 추가할 수 있습니다.
IMAGE SLOT · 1600 × 1000 PNG
05DRAW · REVIEW · BUILD
이미지 기반 협업
말로만 지시하는 단계를 넘어 예시 이미지를 함께 만들고, 그 그림을 기준으로 화면을 반복해서 다듬었습니다.
다음 업데이트 자리이미지와 상세 설명을 같은 섹션에 이어서 추가할 수 있습니다.

MULTI-MODEL ORCHESTRATION · 2026

한 모델이 아니라, 작업 흐름을 설계합니다

조사는 Gemini, 구조화는 Claude, 구현은 ChatGPT, 시각 실험은 Grok처럼 역할을 나눕니다. 최고의 한 명보다 역할이 분명한 AI 팀이 실제 일을 더 멀리 가져갑니다.

01탐색Gemini
02사고Claude
03실행ChatGPT
04시각화Grok

GPT01 / 04

BUILD & EXECUTE

완성까지 밀어붙이는 실행 에이전트

아이디어를 웹·앱·자동화로 만들고, 긴 작업을 에이전트에게 맡길 때

최근 산업 변화 · 3줄 요약

여러 작업을 동시에 나눠 맡기는 에이전트 기능 확장
지시해 두면 뒤에서 알아서 진행하는 장시간 작업 강화
기업과 기관에서도 안심하고 쓰도록 보안 선택지 확대

AI 사용하기 API 키 · 개발자

GM02 / 04

SEARCH & RESEARCH

검색과 생태계를 잇는 리서치 엔진

방대한 정보·문서·영상과 Google 생태계를 한 흐름으로 분석할 때

최근 산업 변화 · 3줄 요약

검색에서 비교와 구매 결정까지 한 흐름으로 잇는 기능 확장
Google 문서·메일과 연결되어 뒤에서도 일하는 기능 추가
이미지 생성(Nano Banana)으로 도표·인포그래픽 표현 강화

AI 사용하기 API 키 · 개발자

CL03 / 04

THINK & CODE

깊게 생각하고 구조화하는 코딩 파트너

복잡한 코드·문서·계획을 논리적으로 정리하고 검증할 때

최근 산업 변화 · 3줄 요약

코딩 도구 Claude Code를 중심으로 개발 현장 채택 확대
Cowork 등으로 문서 작업과 팀 협업 영역까지 확장
오래 생각한 뒤 답하는 확장 사고로 복잡한 문제 해결 강화

AI 사용하기 API 키 · 개발자

GR04 / 04

VISUAL & EXPLORE

빠르게 보고, 만들고, 탐색하는 비주얼 실험실

실시간 이슈와 이미지·영상 아이디어를 빠르게 검증할 때

최근 산업 변화 · 3줄 요약

사진 한 장으로 영상을 만드는 Imagine의 품질·속도 향상
X(구 트위터)의 실시간 소식과 웹 검색을 바로 활용
외부 도구 연결과 자동화로 할 수 있는 일의 범위 확대

AI 사용하기 API 키 · 개발자

멀티 모델 오케스트레이션을 위한 AI 도구 비교
도구	최근 산업/전략 변화	특히 잘하는 일 (핵심 역할)	실무/현장 활용 예시	사용 전 확인 및 팁
GPTChatGPT	여러 작업을 동시에 나눠 맡기는 에이전트 기능 확장 지시해 두면 뒤에서 알아서 진행하는 장시간 작업 강화 기업과 기관에서도 안심하고 쓰도록 보안 선택지 확대	프로젝트 구축 · 자율 실행	웹·앱 제작, 자동화 파이프라인, 백그라운드 프로젝트 빌드	작업 범위·권한·완료 기준을 정하고 결과를 직접 테스트
GMGemini	검색에서 비교와 구매 결정까지 한 흐름으로 잇는 기능 확장 Google 문서·메일과 연결되어 뒤에서도 일하는 기능 추가 이미지 생성(Nano Banana)으로 도표·인포그래픽 표현 강화	초거대 문맥 · 검색 · 생태계 연결	문서·영상·코드베이스 분석, 시장 조사, 정밀 인포그래픽	검색 결과의 출처와 날짜를 확인하고, 구매·결제는 직접 승인
CLClaude	코딩 도구 Claude Code를 중심으로 개발 현장 채택 확대 Cowork 등으로 문서 작업과 팀 협업 영역까지 확장 오래 생각한 뒤 답하는 확장 사고로 복잡한 문제 해결 강화	고난도 코딩 · 깊은 추론 · 문서 구조화	복잡한 리팩토링, 기획서·소식지·수업안, 논리 검증	민감한 자료는 넣지 않고, 중요한 판단은 사람이 직접 검토
GRGrok	사진 한 장으로 영상을 만드는 Imagine의 품질·속도 향상 X(구 트위터)의 실시간 소식과 웹 검색을 바로 활용 외부 도구 연결과 자동화로 할 수 있는 일의 범위 확대	비주얼 생성 · 실시간 탐색 · 직관적 피드백	포스터·영상 시안, 최신 이슈 탐색, 아이디어 빠른 검증	실시간 정보도 출처와 맥락을 확인하고 얼굴·음성·저작권을 검토

2026년 8월 공식 발표를 바탕으로 한 역할 지도이며 순위표가 아닙니다. 기능과 제공 범위는 모델·요금제·지역에 따라 달라질 수 있습니다.

HUMAN IN THE LOOP

AI는 조력자이지, 최종 판단자가 아닙니다

AI가 만든 결과물은 내 말과 목적에 맞게 다시 편집한 뒤 사용합니다.

개인정보와 보안이 필요한 지역 정보는 입력하지 않기
성경 구절, 통계, 날짜, 인명과 출처는 원문 확인하기
목회적·신학적·윤리적 판단은 사람이 맡기

GPT

MAKE · BUILD · ITERATE

ChatGPT

아이디어를 실제 결과물로 만드는 작업실

대화를 이어가며 막연한 아이디어를 구체화하고, 웹페이지·이미지·코드처럼 눈에 보이는 결과물로 발전시킬 때 유용합니다.

BEST AT

이런 일에 잘 맞습니다

무언가를 직접 만들고 싶을 때

01WEBSITE

웹사이트 제작

행사 안내, 사역 소개, 수업 자료를 한 페이지 웹사이트나 작은 도구로 빠르게 구현합니다.

02IMAGE

이미지 제작

수업 장면, 포스터, 썸네일처럼 설명만으로 시작하기 어려운 시각 자료의 초안을 만듭니다.

03CODE

코딩과 자동화

반복 업무를 줄이는 간단한 프로그램부터 실제로 작동하는 프로토타입까지 함께 다듬습니다.

IN THE FIELD

선교 현장 활용

공개 가능한 단기선교 안내 페이지 만들기
어린이 수업용 장면 이미지와 활동지 시안 제작
수업 자료를 정리하는 작은 웹 도구 만들기

다른 도구를 먼저 볼 때최신 출처를 중심으로 깊이 조사해야 한다면 Gemini를, 긴 글의 어조와 구조를 세밀하게 다듬는 일이 중심이라면 Claude를 먼저 살펴보세요.

TRY THIS FIRST

첫 질문은 이렇게

STARTER PROMPT

선교사 대상 AI 입문 수업을 소개하는 한 페이지 웹사이트를 기획해 줘. 대상은 AI 초보자이고, 친근한 한국어와 큰 글씨를 사용해 줘.

대상, 목적, 꼭 들어갈 내용, 원하는 분위기를 먼저 알려주면 첫 결과가 훨씬 선명해집니다.

SEED TODAY · FROM IDEA TO OPERATIONS

SEED에서의 적용

ChatGPT로 화면을 제안하는 데서 멈추지 않았습니다. 실제 홈페이지를 만들고, 선교 현장의 자료와 기능을 연결하고, 담당자가 직접 운영할 수 있는 관리 환경까지 하나의 흐름으로 구현했습니다.

현재 홈페이지 보기 ↗

MOCK-UP → DESIGN → BUILD → LAUNCH

페이지 목업이 실제 홈페이지가 되기까지

처음부터 정답 화면을 바로 만든 것이 아닙니다. 여러 페이지 시안을 빠르게 비교하고, 선택한 방향을 실제 콘텐츠와 운영 목적에 맞게 다듬었습니다. 이후 반응형 화면 구현, 기존 자료 이전, 공개 전 점검까지 이어서 아이디어를 지금 사용 중인 서비스로 완성했습니다.

여러 목업을 제안하고 선택한 시안을 피드백으로 고도화
모바일과 데스크톱을 함께 고려한 실제 페이지 구현
기존 콘텐츠 이전과 최종 공개까지 한 흐름으로 연결

현장에서 달라진 점

머릿속 아이디어를 먼저 화면으로 확인한 뒤 개발 기준으로 사용해, 디자인 선택과 실제 구현 사이의 시행착오를 크게 줄였습니다.

seed-today.org 방문하기

섬기는 땅들 보기 ↗

CONTENT → VIEWER → MISSION NETWORK

자료를 보여주는 데서, 선교 현장을 연결하는 경험으로

홈페이지 안의 기능들이 따로 놀지 않도록 연결했습니다. 선교 현장 사진은 갤러리 뷰어로, 선교편지와 기도수첩은 PDF 뷰어로 편하게 열어볼 수 있게 했습니다. 지역에서 국가로, 다시 각 선교사님의 소개와 사역 정보로 자연스럽게 이어지는 탐색 구조도 함께 만들었습니다.

선교 현장 사진을 몰입해서 볼 수 있는 갤러리·홈 갤러리 뷰어
다운로드 없이 바로 읽는 선교편지·기도수첩 PDF 뷰어
지역·국가·선교사 소개와 실제 사역 정보를 하나의 흐름으로 연동

현장에서 달라진 점

방문자는 흩어진 자료를 찾아다니지 않고 사진, 편지, 지역, 선교사, 사역 정보를 한 흐름 안에서 이해할 수 있게 되었습니다.

지역과 선교사 페이지 보기

운영자 관리 화면

ADMIN SYSTEM · OPERATIONS SUPPORT

만들고 끝내지 않고, 직접 관리할 수 있는 홈페이지로

사이트의 완성은 오픈 날이 아니라 운영이 시작되는 날이라고 생각했습니다. 담당자가 개발자를 기다리지 않고 콘텐츠와 메뉴를 정리할 수 있도록 관리자 화면을 재구성하고, 갤러리·자료·선교 지역처럼 복잡한 기능도 한곳에서 관리할 수 있는 구조와 운영 지원까지 마련했습니다.

실제 업무 순서에 맞춰 관리자 메뉴와 콘텐츠 유형을 재구성
메뉴 순서·카테고리·공개 자료를 한 화면에서 정리하도록 구현
운영 중 수정과 확장이 가능하도록 관리 방법 안내와 기술 지원

현장에서 달라진 점

새 기능을 만드는 것뿐 아니라, 담당자가 스스로 사이트를 유지하고 다음 콘텐츠를 이어갈 수 있는 운영 기반까지 남겼습니다.

홈페이지 관리 구현과 운영 지원까지

MY CASE ARCHIVE

나의 결과물

ChatGPT와 함께 아이디어를 화면으로 만들고, 기존 작업을 다시 디자인하고, 반복 업무를 자동화한 실제 사례입니다.

시간과 계절, 날씨가 움직이는 Celestial Cycle 게임 제품 사이트

CASE 01 · INTERACTIVE WEB

스스로 움직이는 게임 제품 사이트

ChatGPT의 이미지 생성과 창의적인 아이디어를 바탕으로, 제품을 나열하는 페이지를 넘어 시간·계절·날씨가 살아 움직이는 Celestial Cycle의 세계를 만들었습니다.

실제 사이트 보기 ↗

직접 만든 Wix 사이트와 ChatGPT를 거쳐 재탄생한 Genesis Frameworks 사이트 비교

CASE 02 · REDESIGN

손수 만든 사이트의 고급스러운 재탄생

직접 디자인한 Wix 포트폴리오의 내용과 정체성은 살리고, ChatGPT와 함께 Genesis Frameworks의 브랜드 경험을 더 정교하고 고급스럽게 다시 만들었습니다.

새 사이트 보기 ↗

CASE 03 · AUTOMATION

매일 아침 수동 게시를 자동화로

새벽기도가 끝날 때마다 손수 올리던 기도 영상을 코드로 자동 검증·예약 게시하도록 바꿔, 반복 작업을 간단하고 안정적인 운영으로 만들었습니다.

실제 운영 화면

BEFORE YOU USE IT

마지막 3가지 확인

01생성된 코드와 링크는 실제로 열어 보고 직접 확인합니다.
02사실, 인용, 날짜는 원문과 다시 대조합니다.
03이미지는 초상권과 저작권, 현지 문화 맥락을 확인합니다.

NEXT TOOL

다음 도구도 비교해 보세요

SEARCH · COMPARE · RESEARCH

Gemini

보고 있는 것에서 바로 시작하는 리서치 파트너

웹페이지를 옆에 띄워 둔 채 빠르게 질문하고 요약하거나, 여러 후보의 근거를 모아 점수와 우선순위가 있는 비교표로 발전시킬 때 가장 많이 사용합니다.

BEST AT

이런 일에 잘 맞습니다

현재 화면을 읽고, 근거를 비교표로 정리할 때

01SIDE-BY-SIDE

현재 화면을 함께 보기

지금 열어 둔 웹페이지를 Gemini와 나란히 보며 내용 요약, 사이트 리뷰와 후속 질문을 바로 이어갑니다.

02COMPARE

근거가 보이는 비교표

여러 후보의 장단점과 출처를 같은 기준으로 모으고, 점수와 중요도 가중치를 넣어 선택 근거를 만듭니다.

03FAST RESEARCH

빠른 검색과 요약

페이지에서 생긴 궁금증을 바로 검색하고, 필요한 부분만 짧게 요약한 뒤 더 깊은 조사 질문으로 연결합니다.

IN THE FIELD

선교 현장 활용

교회 홈페이지 플랫폼 7개를 같은 기준으로 비교하기
디자인·관리·비용·위험도에 중요도 가중치를 넣어 선택하기
SEED USA 페이지를 화면 옆에서 읽고 핵심 사역을 즉시 요약하기

다른 도구를 먼저 볼 때조사 결과를 자연스러운 소식지나 긴 글로 다듬는 것이 중심이라면 Claude를, 조사 내용을 바로 웹페이지로 구현하려면 ChatGPT를 함께 사용해 보세요.

TRY THIS FIRST

첫 질문은 이렇게

STARTER PROMPT

지금 보고 있는 페이지를 먼저 5줄로 요약해 줘. 그다음 내가 결정해야 할 기준을 찾아 표로 만들고, 부족한 정보는 공식 출처를 검색해 링크와 확인 날짜를 함께 적어 줘.

처음부터 긴 보고서를 부탁하기보다 현재 화면 요약 → 비교 기준 확인 → 출처 조사 → 표 작성 순서로 대화를 이어가면 빠릅니다.

HOW I ACTUALLY USE GEMINI

내가 많이 쓰는 두 가지 방식

멀리 있는 답을 한 번에 받기보다, 지금 보는 화면에서 시작해 검색과 비교를 빠르게 이어갑니다.

SEED USA 웹페이지를 보며 Gemini에게 사이트 요약을 요청한 실제 화면 — SEED USA 페이지 + Gemini 화면 · 실제 사용 사례

SEE → ASK → SUMMARIZE

내가 보는 페이지를 함께 보며 바로 질문하기

별도로 주소를 복사하고 긴 배경 설명을 쓰지 않아도, 보고 있는 페이지의 맥락을 Gemini와 공유해 빠르게 리뷰하고 요약합니다. 처음 받은 요약에서 궁금한 항목을 다시 묻고, 필요한 내용만 검색해 이어가는 방식으로 많이 사용합니다.

01
같이 보기
조사할 웹페이지와 Gemini를 한 화면에 나란히 엽니다.
02
빠르게 묻기
“무엇을 하는 곳인지”, “중요한 내용은 무엇인지”부터 질문합니다.
03
검색으로 넓히기
요약에서 부족한 내용만 다시 검색하고 출처와 함께 정리합니다.

RESEARCH → COMPARISON

흩어진 조사 결과를 선택 가능한 비교표로

열린문 홈페이지 리뉴얼을 위해 7개 플랫폼의 특징과 출처를 찾고, 디자인·관리·교회 시스템 연동·위험도·비용을 같은 기준으로 비교했습니다. 단순 장단점에서 끝내지 않고 중요도에 가중치를 줘 왜 이 선택이 맞는지 설명할 수 있는 자료로 만들었습니다.

7비교 플랫폼
8핵심 평가 영역
★★★★★중요도 가중치

실제 비교 시트 보기

PLATFORM COMPARISON우선순위를 반영한 비교 결과

WEIGHTED SCORE

WordPress.org8.48
WordPress.com10.20
Tithely7.96
Webflow9.47
Framer9.27
Subsplash8.99
Church Co11.59

DesignComplexityManagementGivingPlanning CenterAppRiskCost

열린문 홈페이지 리뉴얼 작업목록 · Platform Comparison

BEFORE YOU USE IT

마지막 3가지 확인

01가격과 재고, 기능 제공 여부는 공식 페이지에서 다시 확인합니다.
02출처의 날짜와 작성 주체를 확인하고 오래된 정보는 분리합니다.
03연결된 Google 자료의 공유 범위와 계정 권한을 점검합니다.

NEXT TOOL

다음 도구도 비교해 보세요

REVIEW · EVALUATE · IMPROVE

Claude

아쉬운 결과를 다음 시도의 재료로 바꾸는 두 번째 눈

직접 그림을 그리는 도구라기보다, 이미 만들어진 결과를 꼼꼼히 보고 문제의 원인을 짚은 뒤 더 나은 프롬프트와 수정 방향을 제안하는 데 강합니다.

BEST AT

이런 일에 잘 맞습니다

결과가 마음에 들지 않을 때 원인을 찾고 다음 시도를 개선할 때

01EVALUATOR

결과물 정밀 리뷰

이미지와 웹사이트를 보고 어색한 부분, 놓친 디테일과 우선 고칠 문제를 구체적으로 찾아냅니다.

02PROMPT REWRITE

피드백을 프롬프트로

결과가 나빴던 이유를 분석하고, 다음 생성에서 바로 사용할 수정 프롬프트와 제외 조건으로 바꿉니다.

03DESIGN PARTNER

사이트 디자인 조력

많은 플러그인과 도구를 연결해 기능 구현을 넘어 레이아웃, 시각적 완성도와 사용 경험을 다듬습니다.

IN THE FIELD

선교 현장 활용

ChatGPT로 만든 웹사이트나 이미지가 아쉬울 때 두 번째 리뷰 받기
이미지의 노이즈, 조명, 구도처럼 놓치기 쉬운 문제를 세밀하게 진단하기
피드백을 다음 생성에 바로 쓸 포지티브·네거티브 프롬프트로 바꾸기

다른 도구를 먼저 볼 때완성형 결과를 직접 구축하는 일은 ChatGPT가 빠르고, Claude는 그 결과를 다시 보고 품질을 끌어올리는 두 번째 눈으로 활용하기 좋습니다.

TRY THIS FIRST

첫 질문은 이렇게

STARTER PROMPT

이 결과물을 엄격한 검토자 관점에서 검토해 줘. 잘된 점보다 어색한 점과 원인을 먼저 찾고, 우선순위별 수정안과 다음 시도에 그대로 사용할 개선 프롬프트를 작성해 줘.

원래 의도, 마음에 들지 않는 부분과 사용한 도구를 함께 알려주면 더 정확한 수정 프롬프트를 받을 수 있습니다.

HOW I ACTUALLY USE CLAUDE

만드는 AI 옆에, 평가하는 AI를 둡니다

첫 결과가 마음에 들지 않을 때 다시 무작정 생성하지 않고, Claude에게 무엇이 문제인지 검토받은 뒤 다음 프롬프트를 만듭니다.

SITE PLANNING · LECTURE DESIGN · COPY REVIEW

강의안이 먼저 서고, 웹사이트가 그 흐름을 따라갔습니다

이 사이트는 화면부터 만든 프로젝트가 아닙니다. Claude와 함께 흩어진 메모와 경험을 읽고, 누구에게 무엇을 가르칠지부터 정리했습니다. 선교사님과 AI 입문자가 부담 없이 따라올 수 있도록 강의 목표, 설명 순서, 실제 사례, 안전 기준을 먼저 세운 뒤 그 흐름을 그대로 웹페이지의 구조와 문장으로 옮겼습니다.

자료 파악기존 강의 자료와 실제 사용 경험에서 핵심 메시지를 추출
강의 설계강사 소개 → 실제 사례 → AI 비교 → 도구별 실습 순서로 재구성
사이트 기획수업 중 바로 보여줄 수 있도록 각 탭의 역할과 정보 위계를 정의
카피 검토기술 용어를 줄이고 선교 현장에서 이해하기 쉬운 문장으로 반복 개선

CLAUDE가 더한 가치

기획과 강의안이 먼저 정리되니 이 사이트는 AI 기능을 나열하는 소개서가 아니라, 실제 수업의 시작부터 실습까지 안내하는 하나의 강의 도구가 되었습니다.

GENESIS TUTORIALCLASS BLUEPRINT

CLAUDE CO-PLANNED

01
AUDIENCE선교사님 · AI 입문자
어려운 기술보다 바로 써보는 경험에서 시작
02
LEARNING GOAL내 일에 맞는 AI 조합 찾기
순위가 아니라 역할과 실제 활용을 중심으로 비교
03
CLASS FLOW이야기 → 사례 → 비교 → 실습
강사의 경험에서 시작해 자신의 작업으로 연결
04
SAFETY사람이 확인하고 판단하기
개인정보, 출처, 저작권과 신학적 판단을 끝에 점검

SHOW → REVIEW → REWRITE

결과가 아쉬울 때 쓰는 꼼꼼한 검토자

Claude가 직접 그림을 그리지 않더라도, 만들어진 그림을 보고 누구보다 꼼꼼하게 따져줄 수 있습니다. 눈처럼 보이는 노이즈가 왜 생겼는지 분석하고, 빼야 할 단어와 더해야 할 표현을 다음 생성용 프롬프트로 정리해 주는 방식입니다.

01
결과물 보여주기
ChatGPT나 이미지 도구로 만든 결과와 원래 의도를 함께 전달합니다.
02
원인까지 평가받기
어색한 부분만 찾는 데서 끝내지 않고 왜 그렇게 보이는지 질문합니다.
03
다음 프롬프트 만들기
수정 방향을 포지티브·네거티브 프롬프트로 바꿔 바로 다시 시도합니다.

생성 이미지의 노이즈 문제를 분석하고 개선 프롬프트를 제안한 실제 Claude 피드백 화면 — 이미지 문제 진단 → 제외 조건 → 개선 프롬프트 · 실제 사용 사례

PROMPT + VIDEO AI6:52부터 재생

CLAUDE PROMPT → VIDEO AI

좋은 프롬프트가 영상의 퀄리티를 바꿉니다

Claude는 장면의 분위기, 카메라 움직임, 피사체의 행동과 시간의 흐름을 세밀한 영상 프롬프트로 구성하는 데 강합니다. 이렇게 잘 작성된 프롬프트를 영상 생성 AI와 통합해 사용하면, 막연한 한두 문장으로 만들 때보다 의도가 또렷하고 완성도 높은 영상을 얻을 수 있습니다.

01원하는 장면과 감정을 Claude에게 설명하기
02카메라·동작·조명까지 포함한 영상 프롬프트 만들기
03영상 생성 AI에 연결해 높은 퀄리티로 완성하기

YouTube에서 보기

BEFORE YOU USE IT

마지막 3가지 확인

01AI의 지적을 모두 따르지 말고 원래 의도와 맞는지 확인합니다.
02이미지 생성 도구에 맞는 문법으로 프롬프트를 다시 조정합니다.
03디자인 취향과 최종 선택은 사람이 결정합니다.

NEXT TOOL

다음 도구도 비교해 보세요

CHARACTERIZE · ANIMATE · PLAY

Grok

사진 한 장에 캐릭터와 움직임을 더하는 가장 쉬운 영상 도구

평범한 사진을 AI 캐릭터처럼 바꾼 뒤, 복잡한 영상 프롬프트 없이도 바로 움직이게 만들어 짧고 재미있는 영상으로 확장할 수 있습니다.

BEST AT

이런 일에 잘 맞습니다

한 장의 사진이나 로고에 쉽고 빠르게 움직임과 재미를 더할 때

01PHOTO TO CHARACTER

사진을 캐릭터처럼

일상의 사진을 표정과 개성이 살아 있는 일러스트·애니메이션 캐릭터 이미지로 바꿉니다.

02ONE IMAGE TO VIDEO

한 장에서 바로 영상으로

캐릭터 이미지나 로고 한 장을 올리고 복잡한 명령 없이 짧은 움직임을 빠르게 만듭니다.

03QUICK DELIGHT

작은 재미 더하기

정적인 소개 이미지, 가족 사진과 서비스 로고에 생동감을 더해 눈에 머무는 콘텐츠로 만듭니다.

IN THE FIELD

선교 현장 활용

가족이나 사역 현장 사진을 친근한 캐릭터 영상으로 만들기
행사 포스터와 로고에 짧은 움직임을 더해 홍보 영상으로 활용하기
긴 영상 편집 없이 소셜 미디어용 6초 콘텐츠를 빠르게 만들기

다른 도구를 먼저 볼 때장면과 카메라 동작을 세밀하게 통제해야 하는 영상은 Claude로 프롬프트를 먼저 다듬고, 빠른 재미와 즉석 실험은 Grok으로 시작하기 좋습니다.

TRY THIS FIRST

첫 질문은 이렇게

STARTER PROMPT

이 사진을 밝고 친근한 애니메이션 캐릭터 스타일로 바꿔 줘. 인물의 특징과 표정은 유지하고, 완성된 이미지를 자연스럽고 재미있게 움직이는 짧은 영상으로 만들어 줘.

영상에서는 긴 설명 없이 이미지만 올려도 먼저 시도할 수 있습니다. 원하는 분위기나 움직임이 있을 때만 한 문장으로 덧붙이세요.

HOW I ACTUALLY USE GROK

사진 한 장이면, 재미있는 영상까지

사진을 캐릭터 이미지로 바꾸고, 완성된 한 장을 다시 올려 짧은 영상으로 만듭니다. 복잡한 영상 편집이나 긴 명령 없이 바로 시도할 수 있습니다.

SEED TODAY · LIVE HERO VIDEO

SEED 홈페이지의 첫인상을 10초 영상으로 만들었습니다

SEED가 여러 나라와 선교 현장을 연결하는 공동체라는 메시지를 첫 화면에서 바로 느낄 수 있도록, 지구와 빛의 연결을 중심으로 메인 배너를 영상화했습니다. Grok으로 빠르게 움직임을 만들고 실제 홈페이지의 히어로 영역에 연결해, 정적인 이미지보다 생동감 있게 SEED의 세계 선교 네트워크를 전달합니다.

01
핵심 이미지 정하기
세계 지도와 이어지는 빛으로 SEED의 연결성을 한 장면에 담았습니다.
02
Grok으로 움직임 만들기
빛이 번지고 연결이 살아나는 짧은 배너 영상으로 발전시켰습니다.
03
실제 홈페이지에 적용하기
10초 영상을 반복 재생되는 메인 비주얼로 연결해 첫인상을 완성했습니다.

SEED Today에서 실제 배너 보기

PHOTO → CHARACTER → VIDEO

평범한 사진이 움직이는 캐릭터가 됩니다

원본 사진의 인물과 분위기를 살려 만화 같은 캐릭터 이미지로 만든 뒤, 그 이미지 한 장을 Grok에 넣으면 됩니다. 세밀한 모션 명령을 쓰지 않아도 표정과 움직임이 생기며, 일상의 한 장면에 재미를 더할 수 있습니다.

01사진 한 장 선택
02AI 캐릭터 이미지로 변환
03복잡한 명령 없이 영상 만들기

036초 영상

ONE IMAGE → INSTANT MOTION

흑백 로고에서 살아 움직이는 회사 로고로

Genesis Frameworks의 흑백 로고를 AI 회사 로고 이미지로 재해석하고, 완성된 이미지 한 장을 다시 짧은 로고 영상으로 만든 실제 과정입니다. 별도 편집 없이도 회사의 정체성에 움직임과 재미를 더할 수 있습니다.

01 · 흑백 회사 로고

02 · AI 회사 로고

03 · 회사 로고 영상

BEFORE YOU USE IT

마지막 3가지 확인

01영상과 에이전트 기능은 현재 제공 환경과 요금제를 확인합니다.
02사람의 얼굴과 음성은 초상권과 동의를 확인합니다.
03생성된 인물과 로고가 원본의 정체성을 해치지 않는지 확인합니다.

NEXT TOOL

다음 도구도 비교해 보세요

UI STUDY BLOG · VOL. 01

화면을 만드는
언어를 수집합니다

18개 UI 스타일을 감정, 쓰임, 주의점으로 비교합니다.

STYLES: 18
REFERENCE SITES: 39
FORMAT: Study blog

HOW I READ A STYLE

모양보다 쓰임을 먼저 봅니다

정보와 사용 상황을 먼저 정하고, 필요한 시각 언어만 선택합니다. 대표 사이트는 관찰을 위한 출발점입니다.

PHYSICAL METAPHOR

스큐어모피즘

Skeuomorphism

다이얼·스위치·재질처럼 현실의 물건이 가진 단서를 디지털 화면에 옮깁니다. 사용법을 설명하지 않아도 손이 먼저 움직이게 만드는 디자인입니다.

언제 쓰면 좋은가

음악·영상 제작 도구
시뮬레이터와 교육용 인터랙션
복고 감성이 중요한 경험

관찰 포인트

실제 재료를 닮은 표면
눌림과 회전을 보여주는 깊이
익숙한 물리적 조작 방식

사용 전 메모장식을 사실적으로 만드는 데 집중하면 정보가 묻힙니다. 조작 원리를 설명하는 핵심 컨트롤에만 사용하는 편이 좋습니다.

대표 사이트

Webamp Poolsuite

LESS, BUT CLEARER

미니멀리즘

Minimalism

ALSO KNOWN AS엔터프라이즈 클린Enterprise ModernClean Utility

색과 장식을 덜어내고 여백, 타이포그래피, 핵심 행동만 남깁니다. 화이트·라이트 그레이와 블루 포인트를 사용하는 엔터프라이즈 클린은 이 원칙을 신뢰성과 접근성 중심으로 확장한 변형입니다.

언제 쓰면 좋은가

SaaS와 제품 소개
글로벌 B2B·핀테크·클라우드
하나의 전환에 집중한 랜딩

관찰 포인트

넓은 여백과 정갈한 타이포그래피
높은 명도 대비와 블루 포인트
직관적인 내비게이션과 절제된 인터랙션

사용 전 메모회색과 얇은 글자만 남기면 개성과 접근성이 함께 사라집니다. 충분한 대비와 명확한 인터랙션 경계를 유지하고, 전용 아이콘이나 정교한 다이어그램으로 브랜드 전문성을 보완합니다.

대표 사이트

Apple Salesforce Stripe Linear

SOFT 3D OBJECTS

클레이모피즘

Claymorphism

점토를 빚은 듯 부드럽고 통통한 3D 형태를 사용합니다. 디지털 제품에 친근함과 놀이감을 더하면서도 중요한 행동을 큰 덩어리로 보여줍니다.

언제 쓰면 좋은가

어린이·교육 서비스
온보딩과 웰니스
게임화된 친근한 제품

관찰 포인트

둥근 덩어리와 큰 반경
파스텔 컬러
부드럽고 짧은 그림자

사용 전 메모모든 요소를 부풀리면 위계가 사라집니다. 아이콘·대표 카드처럼 감정을 전달하는 일부 요소에 집중합니다.

대표 사이트

Duolingo Clay

LAYERED TRANSLUCENCY

글래스모피즘

Glassmorphism

반투명 패널과 배경 블러로 앞뒤 레이어를 구분합니다. 배경의 색과 빛을 유지하면서 그 위에 정보나 도구가 떠 있다는 느낌을 줍니다.

언제 쓰면 좋은가

대시보드 오버레이
날씨·미디어 UI
이미지 위의 소형 컨트롤

관찰 포인트

반투명 표면
배경 블러
얇고 밝은 테두리

사용 전 메모긴 본문 전체에 유리를 씌우면 대비가 급격히 약해집니다. 정보층보다 내비게이션과 보조 컨트롤에 절제해 사용합니다.

대표 사이트

Microsoft Fluent 2 Raycast

MORE IS THE MESSAGE

맥시멀리즘

Maximalism

큰 활자, 강렬한 색, 콜라주와 겹침을 적극적으로 사용합니다. 정보를 조용히 정리하기보다 브랜드의 태도와 에너지를 먼저 각인시킵니다.

언제 쓰면 좋은가

문화·음악·패션
축제와 캠페인
개성이 우선인 편집형 사이트

관찰 포인트

과감한 크기 대비
충돌하는 색과 패턴
의도적인 겹침과 밀도

사용 전 메모모든 것이 소리치면 아무것도 강조되지 않습니다. 핵심 행동과 본문에는 숨 쉴 수 있는 조용한 구역을 남깁니다.

대표 사이트

The Verge MSCHF

SOFT EXTRUSION

뉴모피즘

Neumorphism

배경과 같은 색의 표면에 밝고 어두운 그림자를 짝지어, 컨트롤이 화면에서 솟거나 눌린 듯 표현합니다. 촉감이 느껴지는 차분한 UI입니다.

언제 쓰면 좋은가

스마트홈 컨트롤
음악·웰니스 앱
소수의 토글과 다이얼

관찰 포인트

한 계열의 표면색
서로 반대인 두 그림자
눌림·돌출 상태

사용 전 메모경계가 흐려 버튼과 배경을 구분하기 어렵습니다. 충분한 대비, 명시적인 레이블, 분명한 선택 상태를 함께 제공합니다.

대표 사이트

Neumorphism.io Soft UI Dashboard

LOUD & DIRECT

네오 브루탈리즘

Neo-brutalism

굵은 외곽선, 평면 원색, 단단한 오프셋 그림자로 화면의 구조를 숨기지 않습니다. 완벽하게 매끈한 제품보다 솔직하고 독립적인 태도를 보여줍니다.

언제 쓰면 좋은가

인디 브랜드와 크리에이터
개성 강한 포트폴리오
젊고 직접적인 캠페인

관찰 포인트

굵은 검은 테두리
평면 원색
딱딱한 오프셋 그림자

사용 전 메모본문까지 같은 강도로 밀어붙이면 금방 피곤해집니다. 카드 외곽과 주요 행동에 힘을 주고 읽기 영역은 차분하게 둡니다.

대표 사이트

Gumroad Minick · Neobrutalism

REFRACTIVE MATERIAL

리퀴드 글래스

Liquid Glass

단순히 흐린 유리판을 놓는 데서 나아가, 주변 콘텐츠와 움직임에 따라 빛이 굴절되고 가장자리가 반응하는 재료형 인터페이스입니다.

언제 쓰면 좋은가

OS·앱 내비게이션
미디어 컨트롤
콘텐츠 위에 떠 있는 도구 모음

관찰 포인트

굴절되는 배경
유동적인 하이라이트
환경에 반응하는 명암

사용 전 메모효과 자체가 콘텐츠보다 앞서면 안 됩니다. 유리는 주요 컨트롤 층에 사용하고 텍스트 대비와 저사양 성능을 함께 확인합니다.

대표 사이트

Apple · Liquid Glass Apple HIG · Materials

INTERFACE IN SPACE

스페이셜 UI

Spatial UI

창과 오브젝트를 평면이 아니라 공간 안에 놓습니다. 거리, 가림, 그림자와 크기 변화가 정보의 관계와 깊이를 설명합니다.

언제 쓰면 좋은가

AR·VR 교육
3D 제품 전시
박물관·공간 데이터·원격 협업

관찰 포인트

깊이와 원근
공간에 고정된 창
시선·손동작을 고려한 큰 표적

사용 전 메모깊이는 장식이 아니라 위계를 설명해야 합니다. 너무 많은 창과 떠 있는 텍스트는 피로와 멀미를 만들 수 있습니다.

대표 사이트

Apple Vision Pro Spatial

STORY-LED LANDING

시네마틱 다크 · 몰입형 3D

Cinematic Dark & Immersive 3D

ALSO KNOWN AS스크롤리텔링ScrollytellingInteractive Journey

어두운 무대, 극적인 빛, 강한 3D 오브젝트와 짧은 카피로 세계관을 먼저 경험하게 합니다. 스크롤리텔링은 사용자의 진행에 맞춰 오브젝트와 설명을 순차적으로 전개하는 내러티브 변형입니다.

언제 쓰면 좋은가

AI·첨단 기술 브랜드
플래그십 제품 발표와 인터랙티브 투어
브랜드 비전·지속가능성 리포트

관찰 포인트

집중된 조명과 대표 3D 오브젝트
스크롤 기반 장면 전환
시선 흐름에 맞춘 텍스트 페이드

사용 전 메모첫인상은 강하지만 정보 탐색은 느릴 수 있습니다. 스크롤을 강제로 제어하지 말고 스킵 버튼, 빠르게 읽는 요약, 정적 대체 화면을 함께 제공합니다.

대표 사이트

Lusion Active Theory

RAW & FUNCTIONAL

브루탈리즘

Brutalism

기본 시스템 폰트, 날것의 파란색 하이퍼링크, 반응형을 고려하지 않은 듯한 원시적 그리드로 상업적 디자인 공식을 의도적으로 해체합니다.

언제 쓰면 좋은가

실험적 인디 브랜드
예술·문화 아카이브
컨셉추얼 포트폴리오

관찰 포인트

스타일링 없는 기본 HTML 폼 요소
날카로운 직각 레이아웃
모노스페이스·Times 폰트

사용 전 메모네오 브루탈리즘과 달리 예쁘게 정돈된 규칙 자체를 거부합니다. 가독성과 내비게이션 사용성이 크게 떨어질 수 있으므로 브랜드 선언용 랜딩이나 아카이브에 제한적으로 사용합니다.

대표 사이트

Yale School of Art Brutalist Websites

PLAYFUL POSTMODERN

멤피스 디자인

Memphis Design

80년대 포스트모더니즘을 계승한 스타일로, 파스텔과 비비드 컬러의 대담한 조합, 지그재그 패턴, 산발적으로 흩뿌려진 기하학적 도형을 활용합니다.

언제 쓰면 좋은가

이벤트 프로모션
키즈·캐주얼 브랜드
창작자 커뮤니티 랜딩

관찰 포인트

물결·도트·지그재그 패턴
비정형 기하학 오브젝트
밝고 발랄한 멀티컬러 팔레트

사용 전 메모배경 장식이 지나치게 산만하면 본문 집중도가 분산됩니다. 패턴은 섹션 구분선이나 여백의 악센트로만 배치하고 본문 영역은 단색으로 비워둡니다.

대표 사이트

Memphis Milano Cellar · Memphis Postmodern

NOSTALGIA GUI

레트로 OS · 픽셀 아트

Retro OS & Pixel Art

윈도우 95/98이나 클래식 Mac OS 창 프레임, 비트맵 아이콘, 도트 그래픽을 현대 웹 인터랙션과 결합합니다.

언제 쓰면 좋은가

레트로 게임·서브컬처 플랫폼
개발자 도구와 긱 취향 제품
노스탤지어 캠페인

관찰 포인트

2단계 경사진 입체 테두리
픽셀 타이포그래피
드래그 가능한 윈도우 창 메타포

사용 전 메모모바일 뷰포트에서는 다중 윈도우 UI가 깨지기 쉽습니다. 작은 화면에서는 일반 카드형 레이아웃으로 자연스럽게 폴백하도록 설계합니다.

대표 사이트

Webamp Poolsuite Windows 93

RATIONAL STRUCTURE

스위스 스타일 · 바우하우스 UI

Swiss Style & Bauhaus UI

장식을 배제하고 엄격한 수학적 모듈러 그리드, 대담한 산세리프 활자, 비대칭 레이아웃으로 정보 위계를 극대화합니다.

언제 쓰면 좋은가

디자인·건축 스튜디오
폰트 파운드리
고밀도 데이터·저널형 웹사이트

관찰 포인트

엄격하게 정렬된 다단 그리드
강한 활자 크기 대비
흑백 중심에 원색 1종 포인트

사용 전 메모여백과 그리드 간격의 통일성이 깨지면 미완성 페이지처럼 보입니다. 반응형 화면에서도 비례가 유지되도록 그리드 규칙을 정밀하게 구현합니다.

대표 사이트

Minick · Swiss Style The Grid · Swiss Study

TACTILE & GROUNDED

오가닉 · 어시

Organic & Earthy

종이 질감, 테라코타·올리브·베이지 등 자연 유래 웜톤 컬러, 손글씨나 유기적인 곡선 드로잉으로 아날로그 인쇄물의 따뜻함을 전합니다.

언제 쓰면 좋은가

친환경·지속가능성 브랜드
웰니스·명상 앱
공예·라이프스타일 매거진

관찰 포인트

미세한 노이즈·종이 텍스처
세리프와 필기체의 조화
부드러운 유기적 곡선

사용 전 메모텍스처 이미지 용량이 커지면 초기 로딩 속도에 영향을 줍니다. CSS 노이즈나 저용량 SVG 필터를 활용해 성능 저하를 방지합니다.

대표 사이트

Aesop Digital Heroes · Organic & Earthy

MODULAR HIERARCHY

벤토 그리드 UI

Bento Grid

일본의 도시락처럼 사각형 모듈을 다양한 비율로 패치워크하여 여러 기능, 제품 스펙, 지표를 한 화면에 직관적으로 요약합니다.

언제 쓰면 좋은가

SaaS 기능 소개 랜딩
멀티 디바이스 스펙 요약
기업 솔루션 포트폴리오

관찰 포인트

둥근 모서리의 카드 그리드
카드별 색·아이콘·데이터 시각화
비대칭이지만 균형 잡힌 다단 배치

사용 전 메모모든 카드의 시각적 밀도가 같으면 시선이 분산됩니다. 가장 중요한 핵심 기능 카드 1~2개는 2칸 이상 차지하도록 크기 위계를 둡니다.

대표 사이트

Apple · MacBook Air Raycast

HIGH PRECISION TECH

하이테크 다크 · 테크니컬 UI

High-tech Dark Mode

순수 흑색 대신 미세한 그레이·네이비 다크 캔버스 위에 1px 보더, 모노스페이스 코드 폰트, 정밀한 기술 다이어그램을 얹습니다.

언제 쓰면 좋은가

개발자 플랫폼
AI 인프라
클라우드·보안 기업과 엔지니어링 도구

관찰 포인트

미세한 그리드 배경 라인
단색의 얇은 1px 스트로크
절제된 형광 악센트 컬러

사용 전 메모텍스트가 너무 얇으면 다크 배경에서 번짐 현상이 발생합니다. 본문 폰트 굵기와 행간을 라이트 모드보다 여유 있게 잡습니다.

대표 사이트

Vercel Railway

HUMAN-CENTERED MODERN

일러스트레이션 시스템

Expressive System Illustration

차갑게 느껴질 수 있는 디지털 제품에 자체 제작된 일러스트와 2D·3D 캐릭터 시스템을 결합해 브랜드의 감성과 친근함을 전달합니다.

언제 쓰면 좋은가

협업 도구
B2C 금융·결제 서비스
헬스케어·교육 플랫폼

관찰 포인트

일관된 브랜드 드로잉 톤
기능을 설명하는 그래픽
감성적인 빈 상태 화면

사용 전 메모일러스트가 실제 제품 UI를 가리면 기능 이해도가 떨어집니다. 실제 인터페이스와 일러스트를 명확한 비율로 분리해 배치합니다.

대표 사이트

Slack Notion

MY WORKING RULE

기본 골격은 미니멀하고 읽기 쉽게. 감정을 전달할 한 장면에만 스타일을 강하게. 그리고 언제나 기능이 장식보다 먼저.

새로운 패턴을 발견할 때마다 이 기록은 계속 업데이트됩니다.

FONT STUDY BLOG · VOL. 01

읽히는 화면은
글자에서 시작됩니다

한글·영문 균형부터 숫자, 장문, 로딩까지 실제 화면 기준으로 비교합니다.

가 Aa 01Type
is UI.

한글 · Latin · 0123456789

DISPLAY 72 / BODY 16 / LABEL 12

HOW I CHOOSE A TYPEFACE

취향보다 역할을 먼저 정합니다

서비스 언어와 데이터 비중에 맞는 서체를 실제 문장으로 시험합니다.

KOREAN PRODUCT UI가나다
Aa Bb

복잡한 정보를 더 쉽고 정확하게 읽습니다.

0123456789Regular · Medium · Bold

KOREAN PRODUCT UI

Pretendard

PAIR WITH · Inter

한·영 혼용 서비스의 기본값

익숙한 시스템 UI 인상과 정돈된 한·영 균형을 함께 가져갑니다. 화면 수가 많고 오래 운영할 한국어 제품에서 가장 먼저 검토하기 좋은 중립적인 조합입니다.

강점

한글과 영문의 높이 차이가 적음
여러 굵기를 하나로 다루는 가변 폰트
앱·웹·관리 화면에 두루 어울리는 중립성

Noto Sans KR

PAIR WITH · Noto Sans

문자 범위가 넓은 다국어 표준

한글뿐 아니라 여러 언어와 기호를 안정적으로 담는 범용 서체입니다. 화려한 인상보다 누락 없는 문자 지원과 운영 안정성이 중요한 서비스에 강합니다.

강점

광범위한 유니코드 문자 지원
공공·학술 문서에 적합한 안정성
Google·Adobe 생태계의 높은 호환성

Spoqa Han Sans Neo

PAIR WITH · Inter · tnum

숫자와 표를 정확하게 읽히는 조합

숫자·한글·영문의 간격이 안정적이라 금액, 변화율, 건강 수치처럼 잘못 읽으면 안 되는 데이터를 빠르게 비교하게 합니다.

강점

숫자와 다국어의 균형
높은 정보 밀도에서도 또렷한 본문
고정폭 숫자와 결합한 안정적인 열 정렬

Wanted Sans

PAIR WITH · Mona Sans

정돈됐지만 조금 더 선명한 제품 인상

기하학적인 획과 현대적인 그로테스크 인상을 이용해 중립적인 제품 UI에 스타트업다운 속도감과 개성을 더합니다.

강점

현대적인 기하학적 인상
가변 축을 활용한 유연한 위계
제품 화면과 마케팅 제목의 자연스러운 연결

Gmarket Sans

PAIR WITH · DM Sans · Poppins

짧은 순간에 메시지를 크게 전달

굵고 기하학적인 형태로 배너, 가격 혜택, 캠페인 제목의 에너지를 높입니다. 구매 흐름 전체보다 시선을 잡아야 하는 순간에 효과적입니다.

강점

강한 크기와 굵기 대비
친근하고 빠른 정보 전달
프로모션과 카드 제목의 높은 주목도

MaruBuri

PAIR WITH · Fraunces · Georgia

긴 글에 호흡과 온기를 더하는 세리프

획의 대비와 부리 형태가 문장에 리듬을 만들어 기사, 묵상, 에세이처럼 오래 읽는 콘텐츠를 화면 속 문서가 아닌 읽을거리로 느끼게 합니다.

강점

장문에서 자연스러운 읽기 리듬
인쇄물 같은 신뢰와 품격
산세리프 UI와 분명한 콘텐츠 구분

JetBrains Mono

PAIR WITH · Geist Mono · Roboto Mono

비슷한 문자를 확실히 구분하는 도구

모든 글자의 폭을 맞추고 0·O, 1·I·l 같은 문자를 구분해 코드, 식별 번호, 로그처럼 정확성이 우선인 정보의 실수를 줄입니다.

강점

코드와 열의 일정한 정렬
비슷한 문자 형태의 명확한 구분
기술적인 메타 정보에 어울리는 인상

SF Pro

PAIR WITH · Apple system-ui

Apple 플랫폼의 기본 인터페이스 언어

iOS·iPadOS·macOS에서 화면 크기에 맞는 광학 크기와 폭을 활용하는 Apple 시스템 서체입니다. Apple 제품용 UI 목업과 실제 Apple 플랫폼 경험을 설계할 때 기준점이 됩니다.

강점

Apple OS에 맞춘 높은 완성도
9개 굵기와 가변 optical size
좁은 화면과 작은 글자에 안정적인 판독성

Inter

PAIR WITH · Pretendard · Noto Sans KR

영문 UI를 가장 안정적으로 시작하는 기준

스크린을 위해 설계된 높은 x-height와 다양한 OpenType 기능으로 작은 레이블, 숫자, 복잡한 제품 화면을 또렷하게 정리합니다.

강점

작은 크기에서도 선명한 영문
숫자·기호와 UI 피처의 높은 완성도
가변 폰트와 폭넓은 굵기

Plus Jakarta Sans

PAIR WITH · Pretendard

제품에 현대적인 브랜드 표정을 더하는 영문

높은 x-height와 열린 공간, 날카롭고 부드러운 곡선을 함께 가진 현대적 산세리프입니다. 중립적인 UI보다 AI·SaaS 랜딩과 브랜드 제목에 더 뚜렷한 표정을 만듭니다.

강점

현대적이고 감각적인 라틴 글자
가변 굵기와 tabular figures
제목과 카드에서 선명한 브랜드 인상

Roboto

PAIR WITH · Noto Sans KR

Android와 Google 제품 경험의 기준

기하학적 골격과 자연스러운 곡선을 결합한 Android 시스템 서체입니다. 다양한 화면 밀도와 언어 환경에서 예측 가능한 UI를 만드는 데 강합니다.

강점

Android 생태계의 높은 익숙함
작은 UI와 데이터의 안정적인 가독성
Roboto Flex의 다양한 가변 축

NanumSquare Neo

PAIR WITH · DM Sans

모던한 한글 제목과 브랜드 화면

네이버가 만든 기하학적 한글 산세리프로 부드러운 곡선과 반듯한 네모꼴이 브랜드 화면에 친근하고 현대적인 인상을 줍니다.

강점

제목에서 또렷한 기하학적 인상
한글 브랜드와 프로모션에 높은 주목도
여러 굵기를 활용한 강한 위계

Source Han Sans

PAIR WITH · Noto Sans CJK

한·중·일을 하나의 체계로 연결

Adobe와 Google이 함께 개발한 범 CJK 서체로 한국어·중국어·일본어의 많은 글리프를 하나의 디자인 언어로 운영할 수 있게 합니다.

강점

CJK 언어 전반의 광범위한 문자 지원
다국어 제품의 일관된 톤
오픈소스 기반의 안정적인 배포

산업에 따라 우선순위가 달라집니다

브랜드의 분위기보다 사용자가 가장 자주 읽고 판단하는 정보부터 봅니다.

산업	시작 조합	핵심 목표	설계 포인트
IT · B2B SaaS	Pretendard + Inter	고밀도 화면과 컨트롤의 명확성	1.4–1.5× 행간 · 중립적 위계
핀테크 · 데이터	Spoqa Han Sans Neo + Inter	숫자 오독 방지와 열 정렬	tabular-nums · 중간 굵기
이커머스 · 리테일	Pretendard + DM Sans	빠른 정보 전달과 구매 전환	큰 제목 대비 · 본문은 차분하게
AI · 개발자 도구	Pretendard + Mona / Geist	기술적 정밀함과 미래지향적 인상	모노스페이스를 악센트로
미디어 · 저널	MaruBuri + Fraunces	장문 독서의 피로 감소	좁은 본문 폭 · 1.6–1.8× 행간

RESPONSIVE TYPE SCALE

크기·행간·자간을 하나의 시스템으로

큰 글자는 촘촘하게, 작은 글자는 조금 넓게. 역할별 규칙을 코드와 디자인에 함께 둡니다.

DISPLAY가Aa

SIZE: 48–72px
WEIGHT: 700–900
LINE: 1.00–1.10
TRACK: −0.03em

히어로 제목

HEADING가Aa

SIZE: 28–36px
WEIGHT: 600–700
LINE: 1.20–1.30
TRACK: −0.02em

섹션 제목

TITLE가Aa

SIZE: 20–24px
WEIGHT: 600
LINE: 1.30–1.40
TRACK: −0.01em

카드 제목

BODY가Aa

SIZE: 15–16px
WEIGHT: 400
LINE: 1.50–1.60
TRACK: 0

본문과 설명

LABEL가Aa

SIZE: 13–14px
WEIGHT: 500–600
LINE: 1.20–1.30
TRACK: +0.005em

버튼과 탭

CAPTION가Aa

SIZE: 11–12px
WEIGHT: 400–500
LINE: 1.30–1.40
TRACK: +0.01em

메타 정보

SOURCE & LICENSE MAP

어디서 받고, 어디까지 쓸 수 있는가

폰트 이름이 같아도 배포처와 사용 조건은 다릅니다. 실제 도입 전에는 연결된 공식 소스의 최신 라이선스를 다시 확인합니다.

구분	폰트	공식 소스	라이선스 메모
Google Fonts	Noto Sans KR · Inter · Plus Jakarta Sans · DM Sans · Poppins	Google Fonts CDN / 다운로드 ↗	SIL OFL · 상업적 사용 가능
Google · Android	Roboto	Google Fonts / Android ↗	Apache 2.0 · 상업적 사용 가능
독립 오픈소스	Pretendard	GitHub / jsDelivr · cdnjs ↗	SIL OFL 1.1 · Google Fonts 미등록
독립 오픈소스	Spoqa Han Sans Neo	Spoqa GitHub / 공식 Webfont ↗	SIL OFL 1.1 · Google Fonts 미등록
독립 오픈소스	Wanted Sans	Wanted Lab GitHub ↗	SIL OFL 1.1 · Google Fonts 미등록
Adobe · Google	Source Han Sans	Adobe Fonts GitHub ↗	SIL OFL 1.1 · CJK 오픈소스
Apple 시스템	SF Pro	Apple Developer Fonts ↗	Apple 라이선스 · 웹폰트 재배포 전 조건 확인
Naver	NanumSquare Neo · MaruBuri	Naver 한글한글 아름답게 ↗	네이버 글꼴 라이선스 · 공식 조건 확인
Gmarket	Gmarket Sans	Gmarket 공식 배포처 ↗	자체 무료 라이선스 · 수정·재판매 조건 확인

라이선스 안내는 설계용 요약이며 법률 자문이 아닙니다. 배포 방식과 제품 환경에 따라 공식 라이선스 전문을 확인하세요.

PRACTICAL FONT STACKS

실무에서는 fallback까지 함께 설계합니다

첫 폰트가 로드되지 않아도 비슷한 시스템 서체로 자연스럽게 이어지는 순서를 만듭니다.

KOREAN PRODUCT

한국어 중심 서비스

"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif

한·영을 하나의 제품 톤으로 정리할 때

GLOBAL MULTILINGUAL

글로벌 다국어 서비스

Inter, "Noto Sans KR", "Noto Sans", system-ui, sans-serif

영문 UI를 Inter로 잡고 한글·다국어 fallback을 연결할 때

APPLE NATIVE

Apple 시스템 경험

-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif

SF Pro 파일을 직접 임베드하지 않고 시스템 서체를 사용할 때

ANDROID PRODUCT

Android 중심 서비스

Roboto, "Noto Sans KR", "Noto Sans", sans-serif

Android의 익숙함과 다국어 지원을 함께 가져갈 때

2026 FONT TRENDS & ENGINEERING

새로운 글자보다, 더 나은 전달 방식

가변 축·로딩 전략·움직임은 유행을 위한 기능이 아닙니다. 읽는 속도와 화면 안정성을 개선할 때만 선택합니다.

Variable Fonts

weight·width·optical size를 하나의 파일과 축으로 다룹니다. 파일 수를 줄이는 데서 끝나지 않고 화면 크기와 상황에 따라 글자의 표정을 연속적으로 조절합니다.

실제 사용하는 축만 남기고 브라우저별 렌더링을 확인합니다.

Self-hosting

외부 CDN 의존을 줄이고 폰트 파일·캐시·개인정보 흐름을 제품이 직접 관리합니다. 사용자와 가까운 CDN에서 같은 도메인으로 전달하면 예측 가능성이 높아집니다.

라이선스 파일과 출처를 저장소에 함께 보관합니다.

WOFF2 + Subset

현대 브라우저에는 WOFF2를 우선하고, 글리프가 많은 한글·CJK는 unicode-range로 나눕니다. 첫 화면에 필요한 문자부터 보내 초기 전송량을 관리합니다.

전체 폰트 하나보다 실제 콘텐츠 기준 subset을 측정합니다.

Font Display & Metrics

swap만 고정 답으로 쓰지 않습니다. optional, size-adjust, ascent-override, descent-override를 함께 비교해 폰트 교체 순간의 줄바꿈과 CLS를 줄입니다.

fallback과 웹폰트의 높이·폭을 실제 문장으로 맞춥니다.

Incremental Font Transfer

필요한 글리프를 요청 시점에 추가로 전달하는 IFT는 큰 문자 집합의 다음 배포 방식을 보여 줍니다. 아직은 지원 환경과 운영 복잡도를 확인할 실험 영역입니다.

현재 제품에는 안정적인 subset을, 연구 프로젝트에는 IFT를 시험합니다.

Kinetic Typography

Scroll-driven Animation과 가변 축을 연결해 스크롤에 따라 굵기와 폭이 변합니다. 움직임 자체가 정보의 단계와 감정을 설명할 때 의미가 있습니다.

prefers-reduced-motion 대체 화면과 정적 가독성을 먼저 설계합니다.

System Stack, Again

설치 폰트 전송이 없는 system-ui는 모바일·도구형 제품에서 여전히 가장 빠른 선택입니다. 브랜드 개성보다 속도와 익숙함이 중요할 때 다시 기준점이 됩니다.

웹폰트가 정말 사용자 경험을 개선하는지 먼저 묻습니다.

PERFORMANCE CHECKLIST

느낌이 아니라 로딩을 측정합니다

폰트는 이미지처럼 네트워크를 타고, 레이아웃처럼 화면을 움직입니다. 첫 방문과 느린 기기에서 확인해야 실제 사용자 경험을 알 수 있습니다.

01
Network
preload는 첫 화면 핵심 파일에만 사용하고, 외부 호스트를 쓸 때만 preconnect를 검토합니다.
02
Subset
한글 전체 파일 대신 서비스에 실제 등장하는 문자와 unicode-range 분할을 기준으로 만듭니다.
03
FOIT · FOUT
느린 3G와 캐시 없는 첫 방문에서 빈 글자·폰트 교체·줄바꿈 변화를 직접 확인합니다.
04
LCP · CLS
히어로 제목의 표시 시점과 폰트 교체 전후 레이아웃 이동을 Core Web Vitals로 측정합니다.
05
Coverage
Chrome DevTools Coverage에서 내려받았지만 쓰지 않은 글리프·굵기·CSS를 찾아 줄입니다.
06
Field Test
WebPageTest와 실제 저사양 모바일에서 재방문 캐시까지 비교한 뒤 배포 방식을 결정합니다.

KOREAN UI DEEP DIVE

한글 화면은 혼용 문장에서 결정됩니다

가나다만 예쁜 폰트보다 영문·숫자·단위·버튼이 한 화면에서 자연스럽게 이어지는 조합을 고릅니다.

BASELINE

한·영·숫자를 한 줄에서 봅니다

폰트 이름보다 실제 버튼·가격·날짜 문장을 먼저 놓습니다. x-height와 한글 네모꼴 높이가 다르면 영문 크기, letter-spacing, line-height를 토큰 단위로 보정합니다.

NUMBERS

변하는 숫자는 폭부터 고정합니다

금액·타이머·통계에는 font-variant-numeric: tabular-nums를 사용합니다. 숫자 열은 오른쪽 정렬하고 단위와 부호가 떨리지 않는지 확인합니다.

READING

장문은 45–75자 폭으로 읽힙니다

한국어 본문은 15–18px, 1.6–1.8배 행간을 출발점으로 삼고 한 줄의 길이를 제한합니다. 뉴스·묵상·가이드는 카드보다 문단의 호흡을 먼저 봅니다.

DENSITY

모바일과 데스크톱의 밀도는 다릅니다

작은 화면에서는 제목 단계와 부가 정보를 줄이고 터치 표적 주변 여백을 확보합니다. 데스크톱에서는 글자만 키우지 말고 본문 폭과 열 간격을 함께 조정합니다.

REAL COPY TEST

한 문장 안에서 모두 시험합니다

한글·영문·숫자·기호·긴 문단을 실제 제품 폭에 놓습니다. 아래 문장을 후보 폰트마다 바꾸어 보며 기준선, 줄바꿈, 숫자 폭을 비교합니다.

MISSION UPDATE · 2026.08.12선교 현장의 오늘을
더 빠르게 연결합니다.

Genesis Notes는 복잡한 기술을 누구나 이해하고 사용할 수 있는 언어로 번역합니다. 후원 현황 1,250건 · 진행률 78.4% · 다음 업데이트 09:30

₩12,345,6780O1Il / Aa 가각

FLUID TYPEfont-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);

최소·선호·최대 크기를 묶어 화면 너비에 따라 부드럽게 조절합니다.

CONTAINER TYPE@container (min-width: 40rem) { font-size: 1.125rem; }

뷰포트가 아니라 카드·콘텐츠 영역의 실제 너비에 맞춰 단계를 바꿉니다.

TYPE ENGINEERING

좋은 글자는 빠르고 정확해야 합니다

01Variable
여러 굵기를 단일 가변 폰트로 정리해 요청 수를 줄입니다.
02Subset
한글은 WOFF2와 unicode-range로 필요한 글자만 나눠 불러옵니다.
03Numbers
표와 타이머에는 tabular-nums를 켜 숫자의 폭을 고정합니다.
04Weights
Regular · Medium · Bold처럼 핵심 3개 굵기부터 시작해 불필요한 로드를 줄입니다.
05Access
본문 명암비 4.5:1 이상과 실제 기기에서의 작은 글자를 확인합니다.
06Fallback
OS와 언어가 바뀌어도 레이아웃이 무너지지 않는 font stack을 시험합니다.

MY WORKING RULE

폰트 이름을 고르는 것이 아니라, 사용자가 읽는 경험을 설계합니다.

실제 문장 · 실제 숫자 · 실제 화면 폭에서 테스트한 뒤 결정합니다.

CURATED UI ARCHIVE · 2026

보고 지나친 영감을
다시 찾을 수 있게

UI 효과, 제품 흐름, 제작 도구와 영상을 목적별로 모았습니다.

REFERENCES: 26
CATEGORIES: 6
MY SAVED: 0

26 REFERENCES FOUND

ALL CATEGORIES

WEBSITE

Product UX & Components

Manus

웹사이트·슬라이드·디자인·게임 제작까지 한 화면에서 지시하고 결과를 완성하는 실행형 AI 작업 공간. AI 에이전트의 입력 구조와 제작 흐름을 참고하기 좋다.

#AI agent
#website builder
#workflow

WEBSITE

Web Inspiration

Recent.design · Godly

Godly에서 이어진 현대 웹사이트 큐레이션으로, 완성도 높은 랜딩을 빠르게 탐색.

#landing
#modern
#curation

LIBRARY

Web Inspiration

Land-book

랜딩, 포트폴리오, 이커머스 등 페이지 목적별 웹 디자인 모음.

#landing
#portfolio
#layout

LIBRARY

Web Inspiration

Lapa Ninja

랜딩 페이지와 섹션 단위 패턴을 산업·색상별로 찾는 자료실.

#landing
#sections
#marketing

WEBSITE

Motion & Interaction

HOVERSTAT.ES

인터랙션과 콘텐츠 표현이 독특한 대안적 웹 디자인 아카이브.

#hover
#experimental
#interaction

ARTICLE

Motion & Interaction

Codrops

웹 인터랙션, WebGL, 타이포 효과를 데모와 코드로 배우는 실험실.

#webgl
#animation
#tutorial

LIBRARY

Motion & Interaction

GSAP

UI·SVG·텍스트·WebGL과 스크롤 연출을 정교하게 제어하는 프로용 JavaScript 애니메이션 라이브러리. 쇼케이스와 데모를 구현 레퍼런스로 함께 볼 수 있다.

#JavaScript
#ScrollTrigger
#SVG

WEBSITE

Motion & Interaction

Animista

등장·퇴장·텍스트·배경 효과를 미리 보고 시간, 이징, 반복 방향을 조절해 CSS 키프레임 코드를 바로 만드는 애니메이션 빌더.

#CSS
#keyframes
#animation builder

LIBRARY

Motion & Interaction

Design Spells

작지만 인상적인 제품 디테일과 마이크로 인터랙션 수집소.

#microinteraction
#details
#delight

VIDEO

Product UX & Components

Page Flows

온보딩·결제·검색 등 실제 제품 흐름을 화면 녹화로 확인.

#user flow
#video
#ux

LIBRARY

Product UX & Components

Navbar Gallery

드롭다운·메가 메뉴·사이드바 등 내비게이션 유형별 사례 모음.

#navigation
#menu
#header

LIBRARY

Product UX & Components

Footer.design

웹사이트 푸터 구성과 정보 위계를 집중해서 비교하는 갤러리.

#footer
#layout
#navigation

LIBRARY

Product UX & Components

The Component Gallery

여러 디자인 시스템의 같은 컴포넌트를 나란히 비교하는 저장소.

#design system
#patterns
#accessibility

LIBRARY

Product UX & Components

Uiverse

버튼, 카드, 로더 등 오픈소스 UI 효과를 코드와 함께 탐색.

#css
#components
#code

LIBRARY

Product UX & Components

21st.dev

React 컴포넌트, 마케팅 블록, 템플릿과 shadcn 테마를 탐색하고 프롬프트나 소스로 가져오는 디자인 엔지니어링 라이브러리.

#React
#shadcn
#components

WEBSITE

3D & Asset Pipeline

Tinkercad

브라우저에서 간단한 3D 모델, 회로, 코드 블록을 만들 수 있는 입문 제작 도구.

#3D
#modeling
#education

WEBSITE

3D & Asset Pipeline

Hyper3D Rodin

텍스트나 이미지를 기반으로 편집 가능한 3D 에셋을 생성하는 AI 제작 도구.

#AI
#image to 3D
#3D asset

WEBSITE

3D & Asset Pipeline

NormalMap Online

이미지에서 노멀·디스플레이스·AO 같은 텍스처 맵을 브라우저로 생성.

#normal map
#texture
#material

WEBSITE

3D & Asset Pipeline

Lithophane Maker

사진을 빛으로 드러나는 리소판 3D 프린팅 모델로 변환하는 생성기.

#3D print
#photo
#lithophane

WEBSITE

3D & Asset Pipeline

Spline

실시간 협업과 웹 임베드를 지원하는 브라우저 기반 인터랙티브 3D 디자인 도구.

#interactive 3D
#web
#collaboration

LIBRARY

3D & Asset Pipeline

Mixamo

3D 캐릭터 자동 리깅과 모션 애니메이션 적용을 빠르게 시험하는 라이브러리.

#character
#rigging
#animation

WEBSITE

3D & Asset Pipeline

Sparc3D

단일 이미지 기반 3D 형태 생성 연구 모델을 직접 시험할 수 있는 Hugging Face Space.

#AI 3D
#research
#Hugging Face

WEBSITE

Graphic & Vector Tools

Photopea

PSD를 포함한 다양한 포맷을 열고 편집할 수 있는 브라우저 이미지 에디터.

#image editor
#PSD
#graphics

LIBRARY

Graphic & Vector Tools

2 Colors

두 가지 색으로 구성된 대비 좋은 컬러 조합을 빠르게 탐색하고 복사.

#color
#palette
#pairing

WEBSITE

Graphic & Vector Tools

SVGator

코드 없이 SVG 일러스트와 아이콘에 인터랙션과 애니메이션을 제작.

#SVG
#animation
#no-code

LIBRARY

Graphic & Vector Tools

Phosphor Icons

인터페이스와 다이어그램에 쓰기 좋은 일관된 오픈소스 아이콘 패밀리. 검색, 크기·색상 조절과 여섯 가지 굵기 변형을 지원한다.

#icons
#open source
#six weights

기술과 창작 사이의사용 가능한 기록

좋아 보이는 것에서쓸 수 있는 것으로

도구보다 작업 흐름을 봅니다

스타일을 이름과 규칙으로 해체합니다

읽히는 화면의 뼈대를 연구합니다

관찰하고, 만들고,다시 설명합니다

이종원 · Technical Artist

이종원

예술과 기술 사이를 통역합니다

질문에서 협업으로

코드 리뷰부터 본격적으로

질문에 답하는 AI 비서

사용자에서 웹사이트 제작자로

여러 AI와 함께 만드는 방식

작은 불편에서 시작한 5가지 프로젝트

SEED Today, 한 프로젝트 속 AI의 진화

자료 분석

콘텐츠 이전

3D 페이지 제작

USA · Canada 확장

이미지 기반 협업

한 모델이 아니라, 작업 흐름을 설계합니다

완성까지 밀어붙이는 실행 에이전트

검색과 생태계를 잇는 리서치 엔진

깊게 생각하고 구조화하는 코딩 파트너

빠르게 보고, 만들고, 탐색하는 비주얼 실험실

AI는 조력자이지, 최종 판단자가 아닙니다

도구별 공부 노트

완성까지 밀어붙이는 실행 에이전트

검색과 생태계를 잇는 리서치 엔진

깊게 생각하고 구조화하는 코딩 파트너

빠르게 보고, 만들고, 탐색하는 비주얼 실험실

탐색 → 사고 → 실행 → 시각화

이런 일에 잘 맞습니다

웹사이트 제작

이미지 제작

코딩과 자동화

선교 현장 활용

첫 질문은 이렇게

SEED에서의 적용

페이지 목업이 실제 홈페이지가 되기까지

자료를 보여주는 데서, 선교 현장을 연결하는 경험으로

만들고 끝내지 않고, 직접 관리할 수 있는 홈페이지로

나의 결과물

스스로 움직이는 게임 제품 사이트

손수 만든 사이트의 고급스러운 재탄생

매일 아침 수동 게시를 자동화로

마지막 3가지 확인

이런 일에 잘 맞습니다

현재 화면을 함께 보기

근거가 보이는 비교표

빠른 검색과 요약

선교 현장 활용

첫 질문은 이렇게

내가 많이 쓰는 두 가지 방식

내가 보는 페이지를 함께 보며 바로 질문하기

흩어진 조사 결과를 선택 가능한 비교표로

마지막 3가지 확인

이런 일에 잘 맞습니다

결과물 정밀 리뷰

피드백을 프롬프트로

사이트 디자인 조력

선교 현장 활용

첫 질문은 이렇게

만드는 AI 옆에, 평가하는 AI를 둡니다

강의안이 먼저 서고, 웹사이트가 그 흐름을 따라갔습니다

결과가 아쉬울 때 쓰는 꼼꼼한 검토자

좋은 프롬프트가 영상의 퀄리티를 바꿉니다

마지막 3가지 확인

이런 일에 잘 맞습니다

사진을 캐릭터처럼

한 장에서 바로 영상으로

작은 재미 더하기

선교 현장 활용

첫 질문은 이렇게

사진 한 장이면, 재미있는 영상까지

SEED 홈페이지의 첫인상을 10초 영상으로 만들었습니다

평범한 사진이 움직이는 캐릭터가 됩니다

흑백 로고에서 살아 움직이는 회사 로고로

마지막 3가지 확인

좋아 보이는 것에서
쓸 수 있는 것으로

관찰하고, 만들고,
다시 설명합니다