디자이너의 코딩노트

사과에 글자 새기는 AI 이미지, 어떤 툴이 잘 만들까

케이에이치랩 — Wed, 20 May 2026 08:00:41 +0900

SNS에서 AI 그래픽 이미지를 보고 직접 따라 만들어보기로 했다. 사과 껍질에 텍스트가 조각된 이미지였는데, 어떤 툴로 어떻게 만드는지 궁금해졌다. ChatGPT와 yeri.ai 두 가지에 동일한 프롬프트를 입력해봤는데, 결과물 방향이 꽤 달랐다.

어떤 이미지를 만들었나

주제는 사과 껍질에 텍스트가 조각된 이미지. 실제로 칼로 새긴 것처럼 자연스러운 조각 질감을 AI로 표현할 수 있는지 확인해보고 싶었다. 잡지 표지 스타일로 연출하는 것이 목표였다.

사용한 프롬프트

두 툴 모두 동일한 프롬프트를 사용했다.

an apple with the word "METRO" carved into the skin, photorealistic, studio lighting, magazine cover style

프롬프트 핵심 키워드 설명
· carved into the skin — 껍질에 조각된 느낌을 표현하는 핵심 동사. "engraved into", "embossed on"으로 바꾸면 다른 질감이 나온다
· photorealistic — 사진처럼 사실적인 결과물 유도
· studio lighting — 조명을 깔끔하게 잡아 디테일이 잘 보이게 함
· magazine cover style — 잡지 표지 느낌의 구도와 분위기 요청

yeri.ai 결과

yeri.ai는 Stable Diffusion 기반의 한국어 AI 이미지 생성 서비스다. 설치 없이 웹에서 바로 사용할 수 있고 무료 크레딧이 기본 제공된다. 결과물은 사과 껍질에 METRO 글자가 실제로 조각된 것처럼 자연스럽게 표현됐다. 글자 주변의 과육 질감, 빛에 따른 음영까지 사실적으로 표현되어 있어 완성도가 높았다.

yeri.ai가 생성한 이미지

ChatGPT(DALL-E) 결과

ChatGPT에서 동일한 프롬프트를 입력했다. 결과물은 예상과 조금 달랐다. 사과에 텍스트가 조각된 것은 같지만, 화면 상단에 타이틀 텍스트가 크게 배치되고 하단에 바코드까지 들어간 진짜 잡지 표지 레이아웃으로 생성됐다. "magazine cover style"이라는 키워드를 더 문자 그대로 해석한 것이다.

조각 텍스트 자체의 질감 표현은 yeri.ai보다 약간 아쉬웠지만, 잡지 표지 전체를 하나의 이미지로 구성해준다는 점에서 활용도가 다르다.

ChatGPT가 생성한 이미지

같은 프롬프트, 다른 해석

두 결과물을 비교했을 때 가장 흥미로운 점은 프롬프트 해석 방향의 차이다. yeri.ai는 사과 자체에 집중해 조각 질감을 사실적으로 표현했고, ChatGPT는 "magazine cover"라는 키워드를 더 적극적으로 반영해 레이아웃 전체를 잡지처럼 구성했다. 어느 쪽이 더 낫다기보다는 원하는 결과물에 따라 선택이 달라진다.

항목	ChatGPT (DALL-E)	yeri.ai (Stable Diffusion)
한국어 UI	❌	✅
무료 사용	제한적 (무료 플랜 가능)	✅ 크레딧 기본 제공
조각 질감 표현	보통	자연스럽고 사실적
프롬프트 해석	키워드를 문자 그대로 해석 (잡지 레이아웃 전체 생성)	핵심 오브젝트에 집중 (사과 조각 표현에 충실)
활용 포인트	전체 레이아웃 컨셉 잡을 때	오브젝트 단일 표현에 강함

같은 yeri.ai인데도 결과가 다른 이유

yeri.ai에서 같은 프롬프트로 생성했는데도 결과물이 다르게 나오는 경우가 있다. 이유는 세 가지다.

첫 번째는 씨앗(Seed) 값이다. Seed는 이미지 생성의 랜덤성 기준점 같은 것으로, 값이 다르면 같은 프롬프트라도 완전히 다른 이미지가 나온다. 생성 결과 화면에서 Seed 값을 확인할 수 있고, 같은 값을 입력하면 동일한 이미지를 재현할 수 있다.

두 번째는 모델 차이다. yeri.ai는 Stable Diffusion을 자체적으로 파인튜닝한 커스텀 모델을 사용한다. Stable Diffusion 기본 베이스 모델과는 학습 데이터와 세부 설정이 다르기 때문에 결과물 스타일이 달라진다. 같은 엔진 기반이더라도 어디서 돌리느냐에 따라 결과가 달라지는 것이 정상이다.

세 번째는 내부 파라미터다. CFG Scale(프롬프트 충실도), Steps(생성 단계 수), Sampler 종류 등이 플랫폼마다 기본값이 다르게 설정되어 있어 퀄리티와 스타일에 영향을 준다.

같은 이미지를 다시 만들고 싶다면
생성 결과 화면의 씨앗(Seed) 값을 메모해두자. 같은 프롬프트 + 같은 Seed = 동일한 이미지 재현 가능하다.

마치며

AI 이미지 생성은 프롬프트를 어떻게 쓰느냐가 결과물의 대부분을 결정한다. 재질감 표현에 쓰이는 동사 하나("carved into", "engraved into", "embossed on")만 바꿔도 전혀 다른 이미지가 나온다. 툴마다 같은 프롬프트를 다르게 해석하기 때문에 원하는 방향에 맞는 툴을 선택하는 것도 중요하다. 직접 두 가지를 비교해보니 각각의 특성이 확실하게 보였다.

요약 · 재질에 텍스트를 새기는 표현은 carved into / engraved into / embossed on 동사가 핵심이다
· yeri.ai는 오브젝트 질감 표현이 사실적이고 한국어 UI라 접근성이 좋다
· ChatGPT(DALL-E)는 "magazine cover style" 같은 레이아웃 키워드를 적극적으로 반영한다
· 같은 프롬프트라도 툴마다 해석 방향이 다르므로 목적에 맞게 선택하는 것이 중요하다

디자이너가 처음 쓴 VS Code 터미널 — 기본 명령어와 사용법 정리

케이에이치랩 — Tue, 19 May 2026 08:00:21 +0900

처음 VS Code를 쓸 때 터미널이 뭔지 몰라서 그냥 닫아버린 적이 있었다. 검은 화면에 글자만 나오는 게 낯설었다. 그런데 React 개발을 시작하면서 터미널 없이는 아무것도 못 하게 됐다. 서버 실행, 패키지 설치, Git 작업까지 터미널에서 다 하기 때문이다.

처음 쓰는 사람 기준으로 VS Code 터미널 기본 사용법을 정리했다.

터미널 여는 법

VS Code에서 터미널을 여는 방법은 세 가지다.

1
단축키 Ctrl + ` (백틱 키 — 숫자 1 왼쪽에 있는 키)
2
상단 메뉴 Terminal → New Terminal
3
상단 메뉴 보기 → 터미널

터미널이 현재 열린 폴더 기준으로 열린다 VS Code에서 폴더를 열고 터미널을 실행하면 그 폴더 위치에서 터미널이 시작된다. 프로젝트 폴더를 먼저 열고 터미널을 실행해야 명령어가 제대로 동작한다.

자주 쓰는 터미널 명령어

React 개발하면서 매일 쓰는 명령어들이다.

# 개발 서버 실행
pnpm dev

# 패키지 설치
pnpm install

# 새 패키지 추가
pnpm add 패키지명

# Git 상태 확인
git status

# 변경사항 커밋
git add .
git commit -m "커밋 메시지"

# GitHub에 푸시
git push

터미널 멈추는 법 — Ctrl + C

개발 서버를 실행하면 터미널이 계속 돌아가는 상태가 된다. 이 상태에서 서버를 멈추려면 Ctrl + C를 누르면 된다. 처음엔 이걸 몰라서 터미널 창을 그냥 닫았는데, 그러면 서버가 백그라운드에서 계속 돌아가는 경우가 있어서 Ctrl + C로 제대로 종료하는 게 맞다.

터미널을 여러 개 열 수 있다 터미널 패널 오른쪽 + 버튼을 누르면 터미널을 추가로 열 수 있다. 개발 서버를 켜둔 채로 Git 작업을 따로 하고 싶을 때 두 개를 동시에 열어두면 편하다.

VS Code 터미널은 Ctrl + `로 열 수 있다.
React 개발에서는 pnpm dev로 서버 실행, pnpm install로 패키지 설치, Git 명령어로 버전 관리를 터미널에서 한다.
서버를 멈출 때는 Ctrl + C, 터미널이 여러 개 필요하면 + 버튼으로 추가하면 된다.

디자이너가 실무에서 피그마 쓰는 법 — 프레임, 컴포넌트, 링크 공유까지

케이에이치랩 — Mon, 18 May 2026 09:33:12 +0900

피그마를 처음 쓸 때는 포토샵이나 일러스트레이터랑 비슷한 툴이라고 생각했다. 쓰다 보니 달랐다. 화면 설계와 프로토타입, 공유까지 한 곳에서 할 수 있어서 실무에서 점점 더 많이 쓰게 됐다.

특히 웹앱 기획할 때 와이어프레임부터 실제 디자인까지 피그마 하나로 진행했다. 실무에서 자주 쓰는 기능들을 정리했다.

프레임 — 페이지의 기준이 되는 영역

피그마에서 작업을 시작할 때는 먼저 프레임(Frame)을 만든다. 프레임은 작업할 화면의 크기를 정의하는 영역이다. 모바일이면 375×812, 데스크탑이면 1440×900 같은 식으로 기기 크기에 맞게 설정한다.

프레임 안에서 작업하면 나중에 프로토타입 연결이나 공유할 때 화면 단위로 깔끔하게 관리할 수 있다.

단축키 F를 누르면 바로 프레임 툴로 전환된다 오른쪽 패널에서 기기별 프리셋을 선택하면 iPhone, Android, 데스크탑 등 자주 쓰는 크기를 바로 적용할 수 있다.

컴포넌트 — 반복되는 요소는 한 번만 만든다

버튼, 카드, 헤더처럼 여러 화면에서 반복되는 요소는 컴포넌트(Component)로 만들어두면 편하다. 원본을 수정하면 모든 화면에 자동으로 반영된다. 디자인 일관성을 유지하면서 수정 시간을 크게 줄일 수 있다.

1
반복 사용할 요소 선택
2
우클릭 → Create Component (또는 Ctrl + Alt + K)
3
다른 화면에서 쓸 때는 Assets 패널에서 드래그해서 사용

프로토타입 — 클릭하면 화면이 넘어가게

피그마에서 Prototype 탭으로 전환하면 프레임 간 연결을 설정할 수 있다. 버튼을 클릭했을 때 다음 화면으로 넘어가는 것처럼 실제 앱처럼 동작하는 프로토타입을 만들 수 있다. 개발 전에 흐름을 확인하거나 공유할 때 유용하다.

링크 공유 — 파일 없이 바로 공유

피그마의 가장 편한 기능 중 하나가 링크 공유다. 우측 상단 Share 버튼으로 링크를 생성하면 상대방이 피그마 계정 없이도 브라우저에서 바로 디자인을 확인할 수 있다. 클라이언트에게 시안을 보여주거나 개발자에게 디자인 스펙을 전달할 때 파일을 따로 보낼 필요가 없어서 편하다.

개발자 모드(Dev Mode)로 CSS 스펙을 바로 확인할 수 있다 피그마 링크를 받은 개발자는 Dev Mode에서 각 요소의 크기, 색상, 폰트, 간격 등 CSS 스펙을 바로 확인할 수 있다. 디자이너가 별도로 스펙 문서를 만들지 않아도 된다.

피그마는 화면 설계, 컴포넌트 관리, 프로토타입, 공유까지 하나의 툴에서 할 수 있다.
프레임으로 화면 크기를 잡고, 반복 요소는 컴포넌트로 만들고, 링크로 바로 공유하는 흐름이 실무에서 가장 많이 쓰는 방식이다.

크리에이터링크 도메인 연결하는 법 — 카페24 구매 도메인 연결 경험

케이에이치랩 — Sun, 17 May 2026 10:00:02 +0900

크리에이터링크로 사이트를 만들면 기본 제공되는 주소는 xxx.creatorlink.net 형태다. 클라이언트 사이트라면 독립 도메인을 연결해야 한다. 카페24에서 구매한 도메인을 크리에이터링크에 연결한 경험을 정리했다.

처음엔 도메인 연결이 어렵게 느껴졌는데, 크리에이터링크에서 도메인 등록 가이드를 제공하고 있어서 가이드를 따라 하면 크게 막히는 부분 없이 진행할 수 있었다.

도메인 연결 전에 준비할 것

1
도메인 구매 — 카페24, 가비아 등 도메인 등록 업체에서 원하는 도메인 구매
2
크리에이터링크 유료 요금제 — 독립 도메인 연결은 유료 요금제에서만 가능하다
3
크리에이터링크 도메인 연결 가이드 확인 — 관리 페이지 내 도메인 설정 메뉴에서 가이드 링크를 제공한다

전체 흐름

도메인 연결은 크게 두 가지 작업이 필요하다. 크리에이터링크에 연결할 도메인을 등록하는 것과, 도메인 구매 업체(카페24 등)에서 DNS 설정을 변경하는 것이다. 크리에이터링크에서 제공하는 설정값을 도메인 업체 관리 페이지에 입력하면 연결이 완료된다.

1
크리에이터링크 관리 페이지 → 도메인 설정
2
연결할 도메인 주소 입력 후 가이드 확인
3
카페24(또는 구매 업체) 관리 페이지에서 DNS 설정 변경
4
연결 완료까지 최대 24~72시간 대기

크리에이터링크 관리 페이지 도메인 설정 화면

연결 후 바로 안 될 수 있다 — DNS 전파 시간 필요 도메인 설정을 완료해도 바로 연결되지 않는 경우가 있다. DNS 전파에 시간이 걸리기 때문인데, 보통 수 시간에서 최대 72시간까지 걸릴 수 있다. 설정이 맞다면 기다리면 된다.

도메인 업체마다 설정 화면이 다르다 카페24, 가비아, 후이즈 등 도메인 업체마다 DNS 설정 화면이 다르게 생겼다. 크리에이터링크 가이드에서 업체별 설정 방법을 안내하는 경우도 있으니 가이드를 먼저 확인하는 게 좋다.

크리에이터링크 도메인 연결은 크리에이터링크에 도메인을 등록하고, 도메인 구매 업체에서 DNS 설정을 변경하는 두 가지 작업으로 이루어진다.
크리에이터링크 내 도메인 설정 메뉴에서 가이드를 제공하고 있으니 가이드를 따라 하면 어렵지 않다.
설정 완료 후 최대 72시간 내에 연결이 완료된다.

포토샵 자주 쓰는 단축키 모음 — 작업 속도를 높이는 기본 단축키

케이에이치랩 — Sat, 16 May 2026 10:00:45 +0900

포토샵을 처음 배울 때는 마우스로 툴바를 클릭하다가, 익숙해지면 자연스럽게 단축키를 쓰게 된다. 단축키 하나하나가 별것 아닌 것 같아도 작업 시간이 쌓이면 차이가 크다.

습관적으로 자주 쓰는 단축키들을 정리했다. 외우려고 노력하기보다 자주 쓰다 보면 손이 먼저 기억하게 된다.

툴 선택 단축키 — 마우스 없이 바로 전환

툴을 바꿀 때마다 마우스로 툴바를 클릭하면 시간이 걸린다. 키보드 단축키로 바로 전환하면 훨씬 빠르다.

단축키	기능
V	이동 툴 (Move Tool)
M	영역 선택 툴 (Marquee Tool)
T	텍스트 툴 (Type Tool)
U	도형 툴 (Shape Tool)
C	자르기 툴 (Crop Tool)
E	지우개 툴 (Eraser Tool)
B	브러시 툴 (Brush Tool)
Z	돋보기 툴 (Zoom Tool)

자주 쓰는 작업 단축키

단축키	기능
Ctrl + S	저장
Ctrl + Shift + Alt + S	웹용으로 저장 (PNG, JPG 등 내보내기)
Ctrl + Z	실행 취소
Ctrl + Alt + Z	여러 단계 실행 취소
Ctrl + D	선택 해제
Ctrl + T	자유 변형 (크기·회전 조절)
Ctrl + G	레이어 그룹 만들기
Alt → I → P	선택 영역 자르기 (캔버스 크기를 선택 영역에 맞춤)

Alt → I → P 순서로 누르는 이유 이건 메뉴 단축키 조합이다. Alt로 메뉴바 활성화 → I(Image 메뉴) → P(Crop) 순서로 누르면 선택 영역에 맞게 캔버스가 잘린다. 특정 영역만 빠르게 잘라내야 할 때 자주 쓴다.

화면 탐색 단축키

단축키	기능
Ctrl + +	확대
Ctrl + -	축소
Ctrl + 0	화면에 맞게 보기
Space + 드래그	화면 이동 (손바닥 툴 임시 전환)

포토샵 단축키는 외우려 하기보다 자주 쓰다 보면 자연스럽게 손에 익는다.
툴 전환(T, M, U 등), 저장(Ctrl+S, Ctrl+Shift+Alt+S), 자유 변형(Ctrl+T)부터 먼저 익혀두면 작업 속도가 눈에 띄게 달라진다.

디자이너가 Behance 쓰는 법 — 색감, 타이포그래피 레퍼런스 찾기

케이에이치랩 — Fri, 15 May 2026 11:00:41 +0900

디자인 레퍼런스를 찾을 때 핀터레스트를 주로 쓰는데, 좀 더 전문적인 디자인 작업물을 찾고 싶을 때는 Behance(behance.net)를 활용한다. 색감이나 타이포그래피처럼 디자인 디테일을 깊게 참고하고 싶을 때 특히 유용하다.

Behance는 전 세계 디자이너들이 자신의 작업물을 올리는 포트폴리오 플랫폼이다. 핀터레스트보다 작업의 맥락과 과정이 잘 보여서 레퍼런스의 질이 높은 편이다.

Behance와 핀터레스트의 차이

핀터레스트는 다양한 분야의 이미지가 섞여 있어서 무드나 컨셉을 넓게 탐색할 때 좋다. 반면 Behance는 디자이너가 직접 올린 작업물 위주라서 완성도 있는 디자인 결과물을 보고 싶을 때 적합하다. 로고 디자인, 브랜딩, 타이포그래피, UI 등 분야별로 깊이 있는 작업물을 찾을 수 있다.

Behance — 전 세계 디자이너들의 작업물을 볼 수 있는 플랫폼

검색할 때는 영문 키워드로

Behance는 전 세계 플랫폼이라 한국어보다 영문 키워드로 검색해야 더 많은 결과가 나온다. "타이포그래피"보다 "typography", "브랜딩"보다 "branding"으로 검색하면 훨씬 다양한 작업물을 볼 수 있다.

1
색감 참고 — "color palette design", "muted color branding" 등
2
타이포그래피 참고 — "typography poster", "editorial typography" 등
3
UI 디자인 참고 — "mobile UI design", "dashboard UI" 등
4
브랜딩 참고 — "brand identity", "logo design" 등

작업 과정까지 볼 수 있다 Behance에서 마음에 드는 작업물을 클릭하면 최종 결과물뿐 아니라 디자이너가 올린 작업 과정, 컨셉 설명, 사용한 색상 팔레트까지 볼 수 있는 경우가 많다. 단순히 이미지만 보는 것보다 훨씬 깊은 참고가 가능하다.

어도비 계정으로 바로 로그인

Behance는 Adobe가 운영하는 플랫폼이라 어도비 계정이 있으면 별도 가입 없이 바로 로그인할 수 있다. 포토샵이나 일러스트레이터를 쓰고 있다면 이미 계정이 있을 가능성이 높다.

Behance는 디자이너들의 완성도 있는 작업물을 볼 수 있는 레퍼런스 플랫폼이다.
색감, 타이포그래피, 브랜딩 등 디자인 디테일을 깊게 참고하고 싶을 때 유용하다.
검색은 영문 키워드로 해야 더 많은 결과를 볼 수 있다.
사이트 바로가기 → behance.net

포토샵 라인툴 문제 3가지 해결법 — 굵기, 점선, Fill까지

케이에이치랩 — Thu, 14 May 2026 09:34:10 +0900

포토샵 라인툴은 단순해 보이는데 막상 쓰다 보면 이상한 상황이 생긴다. 선이 갑자기 엄청 두껍게 그려지거나, 점선이 찌그러지거나, 설정을 다 했는데 실선처럼 보이거나. 원인을 알면 별거 아닌데 모르면 한참 헤맨다.

직접 겪은 세 가지 문제와 해결 방법을 정리했다.

라인이 갑자기 두껍게 그려질 때 — 단위 확인

어느 날부터 라인툴로 선을 그으면 1px이 아닌 엄청 굵은 선이 그려지기 시작했다. 수치는 0.5로 작아 보였는데 선은 두꺼웠다. 원인은 옵션바의 Weight 단위였다. 단위가 px이 아닌 cm로 설정되어 있었던 것이다.
0.5cm는 약 14px에 해당하니 당연히 굵게 보일 수밖에 없었다.

1
상단 옵션바에서 Weight 옆 단위 드롭다운 확인
2
단위를 px로 변경
3
원하는 굵기 수치 다시 입력

Weight 단위가 cm로 설정되어 있으면 수치가 작아도 실제로는 굵게 그려진다

점선이 찌그러지거나 지저분하게 보일 때 — Caps와 굵기 확인

Stroke 옵션에서 점선을 설정했는데 깔끔하게 나오지 않고 지그재그처럼 찌글거리는 경우가 있다.
원인은 두 가지다.

1
Caps 설정 — Round나 Square로 되어 있으면 선 끝에 여백이 추가되어 비율이 틀어진다. Butt으로 설정해야 깔끔하다
2
Stroke 굵기 — 1px처럼 너무 얇으면 Dash/Gap 패턴이 거의 구분되지 않는다. 2px 이상으로 올려야 점선이 선명하게 보인다

점선 추천 설정 Stroke 2px / Dash 16 / Gap 8 — 이 조합이 깔끔하게 보이는 기본 세팅이다. 비율을 유지하면서 수치를 조정하면 된다.

Caps를 Butt으로 설정하고 굵기를 2px 이상으로 올리면 점선이 선명하게 나온다

점선 설정을 다 했는데 실선처럼 보일 때 — Fill 확인

More Options에서 Dash/Gap까지 제대로 설정했는데 결과물은 실선이었다. 원인은 Fill이었다. Shape 모드의 라인툴은 Fill과 Stroke가 동시에 적용되는데, Fill 색상이 선 전체를 덮어버려서 Stroke의 점선 패턴이 가려진 것이다.

해결 방법은 간단하다. Fill을 없음(투명)으로 바꾸면 된다.

라인툴 점선 기본 세팅
Fill: 없음 (투명)
Stroke: 원하는 색상 + 점선 설정

라인툴은 Fill이 있으면 점선이 가려진다 라인툴을 Shape 모드로 쓸 때는 Fill과 Stroke가 동시에 적용된다. 점선을 쓸 때는 반드시 Fill을 없음으로 설정해야 Stroke의 점선 패턴이 제대로 보인다.

포토샵 라인툴에서 자주 생기는 세 가지 문제의 원인은 모두 옵션 설정이다.
선이 두꺼우면 Weight 단위(px 확인), 점선이 찌그러지면 Caps(Butt)와 굵기(2px 이상) 확인, 실선처럼 보이면 Fill(없음으로) 확인.
원인을 알면 30초 안에 해결된다.

React 컴포넌트 어떻게 나눌까 — 포트폴리오 프로젝트로 정리한 기준

케이에이치랩 — Wed, 13 May 2026 09:29:54 +0900

React로 포트폴리오 사이트를 만들면서 처음 고민했던 것 중 하나가 컴포넌트를 어떻게 나눠야 하는가였다. 파일을 무조건 잘게 쪼개는 게 맞는지, 아니면 하나에 다 넣어도 되는지 기준이 없었다.

만들면서 자연스럽게 "이건 따로 빼는 게 낫겠다", "이건 합쳐도 되겠다"는 감이 생겼다. 포트폴리오 프로젝트를 기준으로 실제로 어떻게 나눴는지 정리했다.

컴포넌트란 — UI를 나누는 단위

React에서 컴포넌트는 UI를 독립적인 단위로 나눈 것이다. 레고 블록처럼 조각들을 조합해서 페이지를 만드는 방식이다. 컴포넌트를 잘 나눠두면 재사용이 쉽고, 수정할 때 해당 파일만 건드리면 되어서 관리가 편해진다.

실제 포트폴리오에서 나눈 기준

포트폴리오 프로젝트의 컴포넌트 구조는 크게 두 가지로 나뉜다. 여러 페이지에서 공통으로 쓰이는 것과 특정 페이지에서만 쓰이는 것이다.

src/
  components/
    common/  ← 공통으로 쓰이는 컴포넌트
      GNB.jsx     ← 모든 페이지 상단 네비게이션
      Footer.jsx  ← 모든 페이지 하단 푸터
      Cards.jsx  ← 여러 페이지에서 쓰는 카드 UI
      Modal.jsx  ← 여러 페이지에서 쓰는 모달
  pages/
    Home.jsx    ← 홈 페이지
    Product.jsx ← 프로덕트 페이지
    Contact.jsx ← 문의 페이지

common에 넣는 기준 — 두 곳 이상에서 쓰면

GNB(네비게이션)와 Footer는 모든 페이지에 공통으로 들어가기 때문에 common에 넣었다. Cards와 Modal도 여러 페이지에서 반복해서 쓰는 UI라서 같이 묶었다.

기준은 단순하다. 두 곳 이상에서 쓰인다면 공통 컴포넌트로 분리하는 게 낫다. 같은 코드를 여러 파일에 복붙하면 나중에 수정할 때 다 찾아서 바꿔야 하기 때문이다.

한 곳에서만 쓰인다면 굳이 분리 안 해도 된다 특정 페이지에서만 쓰이는 UI라면 굳이 별도 컴포넌트로 빼지 않아도 된다. 처음부터 완벽하게 나누려다 오히려 파일이 너무 많아지면 찾기 더 어려워진다. 코드가 길어지거나 재사용할 일이 생겼을 때 그때 분리해도 늦지 않다.

pages에 넣는 기준 — 라우터와 연결되는 단위

pages 폴더에는 URL 경로와 1:1로 연결되는 파일을 넣었다. Home, Product, Contact처럼 각각 하나의 페이지를 담당하는 컴포넌트들이다. 페이지 단위로 파일이 나뉘어 있으니까 특정 페이지를 수정할 때 어느 파일을 열어야 하는지 바로 알 수 있다.

포트폴리오 프로젝트의 실제 컴포넌트 폴더 구조

React 컴포넌트를 나누는 기준은 단순하다. 두 곳 이상에서 쓰이면 공통 컴포넌트로 분리하고, 한 곳에서만 쓰이면 굳이 나누지 않아도 된다.
pages는 URL 경로와 연결되는 페이지 단위, components/common은 여러 페이지에서 공통으로 쓰이는 UI 단위로 나누면 관리하기 편하다.
처음부터 완벽하게 나누려 하기보다 쓰다 보면서 필요할 때 분리하는 게 현실적이다.

포트폴리오 목업 무료로 만드는 법 — Canva 무료 버전으로 충분하다

케이에이치랩 — Tue, 12 May 2026 10:19:23 +0900

포트폴리오를 만들 때 작업물을 그냥 스크린샷으로 올리는 것보다 목업에 넣어서 보여주면 훨씬 완성도 있어 보인다. 그런데 목업 이미지를 따로 구하고 포토샵으로 합성하는 게 번거롭다면 Canva를 쓰면 된다.

Canva 무료 버전에도 목업 기능이 있다. 별도 툴 없이 브라우저에서 바로 작업할 수 있어서 포트폴리오 정리할 때 유용하게 썼다.

목업이 뭔가

목업(Mockup)은 실제 기기나 환경에 디자인을 합성한 이미지다. 맥북 화면에 웹사이트 디자인을 넣거나, 스마트폰에 앱 화면을 넣는 식이다. 포트폴리오에서 "이 디자인이 실제로 어떻게 보이는지"를 직관적으로 전달할 수 있다.

Canva에서 목업 만드는 법

1
canva.com 접속 → 구글 계정으로 무료 가입
2
검색창에 "mockup" 또는 "목업" 검색 → 원하는 기기 목업 템플릿 선택
3
템플릿 안의 화면 영역 클릭 → 이미지 교체로 내 작업 이미지 업로드
4
크기나 위치 조정 후 PNG로 다운로드

Smart Mockup 기능도 있다 Canva에는 Smart Mockup이라는 기능도 있다. 요소 탭에서 "Smart Mockup"을 검색하면 다양한 기기 프레임이 나오는데, 이미지를 드래그해서 넣으면 자동으로 화면 안에 맞게 합성해준다. 더 자연스러운 목업을 만들 수 있다.

무료 버전의 한계

Canva 무료 버전으로도 충분히 쓸 수 있지만, 일부 프리미엄 목업 템플릿은 유료다. 무료 템플릿만으로도 맥북, 아이폰, 태블릿 등 기본적인 기기 목업은 다 만들 수 있다. 검색할 때 왕관 아이콘(Pro)이 없는 것을 고르면 된다.

Canva 무료 버전으로도 포트폴리오용 목업을 충분히 만들 수 있다.
목업 템플릿 검색 → 이미지 교체 → PNG 다운로드, 이 세 단계면 끝난다.
별도 툴 없이 브라우저에서 바로 작업할 수 있어서 가볍게 쓰기 좋다.
사이트 바로가기 → canva.com

디자이너가 알아야 할 웹 접근성 기초 — alt 태그, 시맨틱 구조, 색상 대비

케이에이치랩 — Mon, 11 May 2026 08:00:33 +0900

웹 접근성이라는 말을 들으면 왠지 어렵게 느껴진다. 하지만 핵심은 단순하다. 모든 사람이 웹 콘텐츠를 불편함 없이 이용할 수 있게 만드는 것이다. 시각 장애인이 스크린리더로 페이지를 읽을 수 있는지, 키보드만으로 사이트를 탐색할 수 있는지 같은 것들이 여기 해당한다.

디자이너 입장에서 웹 접근성을 완벽하게 다 챙기기는 어렵다. 하지만 기본적인 몇 가지만 습관적으로 적용해도 훨씬 나은 웹을 만들 수 있다.

이미지에 alt 태그 — 스크린리더가 읽는 설명

시각 장애인은 스크린리더라는 도구로 웹페이지를 소리로 듣는다. 이미지가 있으면 스크린리더는 alt 속성에 적힌 텍스트를 읽어준다. alt가 없으면 "이미지"라고만 읽거나 파일명을 읽는다.

<!-- ❌ alt 없음 -->
<img src="logo.png">

<!-- ✅ alt 있음 -->
<img src="logo.png" alt="디자이너의 코딩노트 로고">

장식용 이미지는 alt를 비워둔다 의미 없는 배경 이미지나 장식용 이미지는 alt=""로 비워두면 스크린리더가 건너뛴다. 모든 이미지에 설명을 넣는 게 아니라, 의미 있는 이미지에만 적절한 설명을 넣는 것이다.

시맨틱 태그 — 페이지 구조를 읽히게 한다

스크린리더는 HTML 태그를 기반으로 페이지 구조를 파악한다. <div>만으로 이루어진 페이지는 구조를 파악하기 어렵다. <h1>, <header>, <main>, <article>, <nav> 같은 시맨틱 태그를 쓰면 페이지의 흐름이 명확해진다.

1
<h1> ~ <h6> — 제목 계층 구조. h1은 페이지당 하나, 순서대로 사용
2
<header> — 페이지 또는 섹션의 상단 영역
3
<main> — 페이지의 주요 콘텐츠 영역
4
<nav> — 내비게이션 메뉴 영역
5
<article> — 독립적인 콘텐츠 단위 (블로그 글, 뉴스 기사 등)

색상 대비 — 텍스트가 잘 보여야 한다

시각적으로 불편함이 있는 사용자를 위해 텍스트와 배경의 색상 대비가 충분해야 한다. 밝은 배경에 연한 회색 텍스트처럼 대비가 낮으면 일반 사용자도 읽기 어렵다. WCAG 기준으로 일반 텍스트는 최소 4.5:1 이상의 대비를 권장한다.

색상 대비 확인 사이트 WebAIM Contrast Checker에서 배경색과 텍스트색을 입력하면 대비 비율을 바로 확인할 수 있다. 디자인 시안 검토할 때 한 번씩 체크해보면 좋다.

웹 접근성은 특별한 것이 아니라 기본을 지키는 것이다.
이미지에 alt 태그 달기, 시맨틱 태그로 구조 잡기, 색상 대비 확인하기 — 이 세 가지만 습관적으로 챙겨도 훨씬 나은 웹을 만들 수 있다.
접근성이 좋은 웹은 SEO에도 유리하다. 스크린리더가 잘 읽는 구조는 검색 엔진도 잘 읽는다.