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

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

포트폴리오를 만들 때 작업물을 그냥 스크린샷으로 올리는 것보다 목업에 넣어서 보여주면 훨씬 완성도 있어 보인다. 그런데 목업 이미지를 따로 구하고 포토샵으로 합성하는 게 번거롭다면 Canva를 쓰면 된다. Canva 무료 버전에도 목업 기능이 있다. 별도 툴 없이 브라우저에서 바로 작업할 수 있어서 포트폴리오 정리할 때 유용하게 썼다. 목업이 뭔가 목업(Mockup)은 실제 기기나 환경에 디자인을 합성한 이미지다. 맥북 화면에 웹사이트 디자인을 넣거나, 스마트폰에 앱 화면을 넣는 식이다. 포트폴리오에서 "이 디자인이 실제로 어떻게 보이는지"를 직관적으로 전달할 수 있다. Canva에서 목업 만드는 법 1canva.com 접속 → 구글 계정으로 무료 가입 2검색창에 "mockup" 또..

웹 접근성이라는 말을 들으면 왠지 어렵게 느껴진다. 하지만 핵심은 단순하다. 모든 사람이 웹 콘텐츠를 불편함 없이 이용할 수 있게 만드는 것이다. 시각 장애인이 스크린리더로 페이지를 읽을 수 있는지, 키보드만으로 사이트를 탐색할 수 있는지 같은 것들이 여기 해당한다. 디자이너 입장에서 웹 접근성을 완벽하게 다 챙기기는 어렵다. 하지만 기본적인 몇 가지만 습관적으로 적용해도 훨씬 나은 웹을 만들 수 있다. 이미지에 alt 태그 — 스크린리더가 읽는 설명 시각 장애인은 스크린리더라는 도구로 웹페이지를 소리로 듣는다. 이미지가 있으면 스크린리더는 alt 속성에 적힌 텍스트를 읽어준다. alt가 없으면 "이미지"라고만 읽거나 파일명을 읽는다. 💡 장식용 이미지는 alt를 비워둔다 의미 ..

디자인 작업을 하다 보면 색상 조합이 막히는 순간이 있다. 메인 컬러는 정했는데 어울리는 보조 색상을 고르는 게 생각보다 쉽지 않다. 그럴 때 쓰는 사이트가 Coolors(coolors.co)다.메인 컬러 하나를 고르면 어울리는 색상 조합을 자동으로 만들어준다. 스페이스바를 누를 때마다 새로운 팔레트가 생성되어서 마음에 드는 조합을 찾을 때까지 계속 돌려볼 수 있다.Coolors 기본 사용법1coolors.co 접속 → Start the generator 클릭2스페이스바를 누르면 새로운 팔레트가 랜덤으로 생성된다3마음에 드는 색상이 있으면 해당 색상 위에 마우스를 올리고 자물쇠 아이콘 클릭 → 고정4고정된 색상은 유지하면서 나머지만 계속 바꿔가며 조합을 찾는다특정 색상에서 시작하고 싶을 때브랜드 컬러가 ..

티스토리 블로그를 시작할 때 카테고리 구성을 어떻게 해야 할지 고민이 된다. 너무 많으면 관리가 안 되고, 너무 적으면 글이 뒤죽박죽 쌓인다. 카테고리는 블로그의 뼈대라서 처음에 잘 잡아두는 게 중요하다. 이 블로그는 크리에이터링크 / React 프론트엔드 / 디자인 실무 / 툴 & 환경설정 4개 카테고리로 운영하고 있다. 직접 구성하면서 생각한 기준을 정리했다. 카테고리는 검색 유입과 연결된다 카테고리는 단순히 글을 분류하는 것 이상의 역할을 한다. 검색엔진은 카테고리 구조를 보고 이 블로그가 어떤 주제를 다루는지 파악한다. 카테고리가 명확할수록 특정 키워드로 검색하는 사람들에게 더 잘 노출될 수 있다. 예를 들어 "크리에이터링크 CSS"를 검색하는 사람은 크리에이터링크 카테고리 글들이 모여있는..

포트폴리오는 필요할 때 급하게 만드는 것보다, 평소에 조금씩 쌓아두는 게 훨씬 낫다. 막상 필요한 순간이 왔을 때 "그때 그 작업물 어디 있더라"를 찾느라 시간을 쓰는 건 꽤 소모적이다. 1년에 한 번 작업 폴더를 정리하는 습관을 들이면서 필요한 순간에 훨씬 빠르게 준비할 수 있었다. 거창한 업데이트가 아니라 폴더 정리 수준이지만, 그게 쌓이면 꽤 든든한 자산이 된다. 포트폴리오를 언제 업데이트해야 할까 정해진 정답은 없지만, 이런 순간이 오면 업데이트하는 게 좋다. 1의미 있는 프로젝트가 마무리됐을 때 — 시간이 지나면 디테일이 흐릿해진다. 끝났을 때 바로 정리해두는 게 제일 정확하다 2새로운 기술이나 툴을 익혔을 때 — 할 수 있는 것이 늘었다면 포트폴리오에도 반영돼야 한다 ..

"로고 파일 보내주세요"라는 요청을 받았을 때, 어떤 형식으로 줘야 할지 고민이 되는 경우가 있다. PNG로 줘야 하는지, SVG가 맞는지, AI 원본을 요청하는 건지 — 파일 형식마다 쓰임새가 다르기 때문이다. 실무에서 AI 파일을 받아도 일러스트레이터가 없으면 열 수 없어서 당황하는 경우도 종종 있다. PNG, SVG, AI 각각 언제 쓰는지, 어떤 차이가 있는지 정리했다. PNG — 가장 흔하게 쓰이는 이미지 파일 PNG는 누구나 바로 열어볼 수 있는 이미지 파일이다. 배경이 투명한 상태로 저장할 수 있어서 로고 파일로 자주 쓰인다. 웹사이트에 올리거나, 문서에 삽입하거나, 카카오톡으로 공유하는 등 일상적인 용도에 적합하다. 단점은 픽셀 기반이라는 것이다. 크기를 키우면 이미지가 깨진다. 작..

React 프로젝트를 시작하려면 먼저 프로젝트 틀을 만들어야 한다. 이전에는 Create React App(CRA)이 많이 쓰였는데, 요즘은 Vite를 쓰는 경우가 훨씬 많아졌다. 포트폴리오 사이트와 모바일 웹앱 모두 Vite로 시작했다.처음엔 Vite가 뭔지도 몰랐고, 그냥 명령어를 따라 입력했다. 쓰다 보니 왜 Vite를 쓰는지 조금씩 이해가 됐다. 설치부터 실행까지 정리했다.Vite가 뭔가 — 왜 CRA 대신 쓰나Vite는 프론트엔드 개발 환경을 빠르게 구성해주는 빌드 툴이다. 가장 크게 체감되는 차이는 속도다. CRA는 프로젝트가 커질수록 개발 서버 시작 속도가 느려지는데, Vite는 훨씬 빠르게 시작된다. 저장하면 브라우저에 즉시 반영되는 속도도 빠르다.React 공식 문서에서도 현재는 Vite..