디자이너의 코딩노트 디자이너의 코딩노트

SNS에서 AI 그래픽 이미지를 보고 직접 따라 만들어보기로 했다. 사과 껍질에 텍스트가 조각된 이미지였는데, 어떤 툴로 어떻게 만드는지 궁금해졌다. ChatGPT와 yeri.ai 두 가지에 동일한 프롬프트를 입력해봤는데, 결과물 방향이 꽤 달랐다.어떤 이미지를 만들었나주제는 사과 껍질에 텍스트가 조각된 이미지. 실제로 칼로 새긴 것처럼 자연스러운 조각 질감을 AI로 표현할 수 있는지 확인해보고 싶었다. 잡지 표지 스타일로 연출하는 것이 목표였다.사용한 프롬프트두 툴 모두 동일한 프롬프트를 사용했다.an apple with the word "METRO" carved into the skin, photorealistic, studio lighting, magazine cover style💡 프롬프트 핵심..

처음 VS Code를 쓸 때 터미널이 뭔지 몰라서 그냥 닫아버린 적이 있었다. 검은 화면에 글자만 나오는 게 낯설었다. 그런데 React 개발을 시작하면서 터미널 없이는 아무것도 못 하게 됐다. 서버 실행, 패키지 설치, Git 작업까지 터미널에서 다 하기 때문이다.처음 쓰는 사람 기준으로 VS Code 터미널 기본 사용법을 정리했다.터미널 여는 법VS Code에서 터미널을 여는 방법은 세 가지다.1단축키 Ctrl + ` (백틱 키 — 숫자 1 왼쪽에 있는 키)2상단 메뉴 Terminal → New Terminal3상단 메뉴 보기 → 터미널💡 터미널이 현재 열린 폴더 기준으로 열린다 VS Code에서 폴더를 열고 터미널을 실행하면 그 폴더 위치에서 터미널이 시작된다. 프로젝트 폴더를 먼저 열고 터미널을..

피그마를 처음 쓸 때는 포토샵이나 일러스트레이터랑 비슷한 툴이라고 생각했다. 쓰다 보니 달랐다. 화면 설계와 프로토타입, 공유까지 한 곳에서 할 수 있어서 실무에서 점점 더 많이 쓰게 됐다. 특히 웹앱 기획할 때 와이어프레임부터 실제 디자인까지 피그마 하나로 진행했다. 실무에서 자주 쓰는 기능들을 정리했다. 프레임 — 페이지의 기준이 되는 영역 피그마에서 작업을 시작할 때는 먼저 프레임(Frame)을 만든다. 프레임은 작업할 화면의 크기를 정의하는 영역이다. 모바일이면 375×812, 데스크탑이면 1440×900 같은 식으로 기기 크기에 맞게 설정한다. 프레임 안에서 작업하면 나중에 프로토타입 연결이나 공유할 때 화면 단위로 깔끔하게 관리할 수 있다. 💡 단축키 F를 누르면 바로 프레임..

크리에이터링크로 사이트를 만들면 기본 제공되는 주소는 xxx.creatorlink.net 형태다. 클라이언트 사이트라면 독립 도메인을 연결해야 한다. 카페24에서 구매한 도메인을 크리에이터링크에 연결한 경험을 정리했다.처음엔 도메인 연결이 어렵게 느껴졌는데, 크리에이터링크에서 도메인 등록 가이드를 제공하고 있어서 가이드를 따라 하면 크게 막히는 부분 없이 진행할 수 있었다.도메인 연결 전에 준비할 것1도메인 구매 — 카페24, 가비아 등 도메인 등록 업체에서 원하는 도메인 구매2크리에이터링크 유료 요금제 — 독립 도메인 연결은 유료 요금제에서만 가능하다3크리에이터링크 도메인 연결 가이드 확인 — 관리 페이지 내 도메인 설정 메뉴에서 가이드 링크를 제공한다전체 흐름도메인 연결은 크게 두 가지 작업이 필요하..

포토샵을 처음 배울 때는 마우스로 툴바를 클릭하다가, 익숙해지면 자연스럽게 단축키를 쓰게 된다. 단축키 하나하나가 별것 아닌 것 같아도 작업 시간이 쌓이면 차이가 크다. 습관적으로 자주 쓰는 단축키들을 정리했다. 외우려고 노력하기보다 자주 쓰다 보면 손이 먼저 기억하게 된다. 툴 선택 단축키 — 마우스 없이 바로 전환 툴을 바꿀 때마다 마우스로 툴바를 클릭하면 시간이 걸린다. 키보드 단축키로 바로 전환하면 훨씬 빠르다. 단축키 기능 V 이동 툴 (Move Tool) M 영역 선택 툴 (Marquee Tool) T 텍스트 툴 (Type Tool) U ..

디자인 레퍼런스를 찾을 때 핀터레스트를 주로 쓰는데, 좀 더 전문적인 디자인 작업물을 찾고 싶을 때는 Behance(behance.net)를 활용한다. 색감이나 타이포그래피처럼 디자인 디테일을 깊게 참고하고 싶을 때 특히 유용하다.Behance는 전 세계 디자이너들이 자신의 작업물을 올리는 포트폴리오 플랫폼이다. 핀터레스트보다 작업의 맥락과 과정이 잘 보여서 레퍼런스의 질이 높은 편이다.Behance와 핀터레스트의 차이핀터레스트는 다양한 분야의 이미지가 섞여 있어서 무드나 컨셉을 넓게 탐색할 때 좋다. 반면 Behance는 디자이너가 직접 올린 작업물 위주라서 완성도 있는 디자인 결과물을 보고 싶을 때 적합하다. 로고 디자인, 브랜딩, 타이포그래피, UI 등 분야별로 깊이 있는 작업물을 찾을 수 있다.검..

포토샵 라인툴은 단순해 보이는데 막상 쓰다 보면 이상한 상황이 생긴다. 선이 갑자기 엄청 두껍게 그려지거나, 점선이 찌그러지거나, 설정을 다 했는데 실선처럼 보이거나. 원인을 알면 별거 아닌데 모르면 한참 헤맨다.직접 겪은 세 가지 문제와 해결 방법을 정리했다.라인이 갑자기 두껍게 그려질 때 — 단위 확인어느 날부터 라인툴로 선을 그으면 1px이 아닌 엄청 굵은 선이 그려지기 시작했다. 수치는 0.5로 작아 보였는데 선은 두꺼웠다. 원인은 옵션바의 Weight 단위였다. 단위가 px이 아닌 cm로 설정되어 있었던 것이다.0.5cm는 약 14px에 해당하니 당연히 굵게 보일 수밖에 없었다.1상단 옵션바에서 Weight 옆 단위 드롭다운 확인2단위를 px로 변경3원하는 굵기 수치 다시 입력 점선이 찌그러지거..

React로 포트폴리오 사이트를 만들면서 처음 고민했던 것 중 하나가 컴포넌트를 어떻게 나눠야 하는가였다. 파일을 무조건 잘게 쪼개는 게 맞는지, 아니면 하나에 다 넣어도 되는지 기준이 없었다.만들면서 자연스럽게 "이건 따로 빼는 게 낫겠다", "이건 합쳐도 되겠다"는 감이 생겼다. 포트폴리오 프로젝트를 기준으로 실제로 어떻게 나눴는지 정리했다.컴포넌트란 — UI를 나누는 단위React에서 컴포넌트는 UI를 독립적인 단위로 나눈 것이다. 레고 블록처럼 조각들을 조합해서 페이지를 만드는 방식이다. 컴포넌트를 잘 나눠두면 재사용이 쉽고, 수정할 때 해당 파일만 건드리면 되어서 관리가 편해진다.실제 포트폴리오에서 나눈 기준포트폴리오 프로젝트의 컴포넌트 구조는 크게 두 가지로 나뉜다. 여러 페이지에서 공통으로 ..