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

구글 서치콘솔을 점검하다가 페이지들이 색인이 생성되지 않고 있다는 걸 발견했다. 이유는 "적절한 표준 태그가 포함된 대체 페이지". 처음엔 무슨 말인지 몰랐는데, 원인을 파악하고 나니 의외로 단순한 문제였다.운영 중인 사이트를 점검하다가 발견한 문제다. 같은 문제로 고민하는 사람이 있을 것 같아서 원인과 해결 과정을 정리했다."적절한 표준 태그가 포함된 대체 페이지" — 이게 무슨 말인가구글이 페이지를 크롤링했는데 "이 페이지는 내가 정식 버전이 아니다"라고 선언되어 있다는 뜻이다. 쉽게 말하면 구글이 보러 갔더니 "진짜 페이지는 저기에 있어요"라고 다른 곳을 가리키고 있는 상태다.이 상태에선 해당 페이지가 구글 검색 결과에 노출되지 않는다. 사이트를 아무리 잘 만들어도 색인이 안 되면 검색에 안 뜨는 ..

티스토리 블로그를 운영하다 보면 방문자가 얼마나 되는지, 어떤 글이 많이 읽히는지 궁금해진다. 이걸 확인하려면 구글 애널리틱스(GA4)를 연동해야 한다. 티스토리에 기본 통계 기능이 있긴 하지만, GA4를 연동해두면 훨씬 더 상세한 데이터를 볼 수 있다.처음엔 메타 태그 플러그인에 넣으면 되는 줄 알았는데 그게 아니었다. GA4 코드는 스킨 HTML에 직접 넣어야 한다. 그 과정을 정리했다.GA4가 뭔가 — 구글 애널리틱스 4GA4(Google Analytics 4)는 구글에서 무료로 제공하는 웹사이트 분석 툴이다. 블로그에 연동해두면 방문자 수, 유입 경로, 어떤 글을 많이 읽는지, 어느 나라에서 접속하는지 등 다양한 데이터를 볼 수 있다. 특히 애드센스 수익화를 목표로 한다면 트래픽 추이를 확인하는 ..

VS Code를 처음 설치했을 때는 확장 프로그램이 뭔지도 몰랐다. 쓰다 보니 하나둘 깔게 됐고, 어느새 9개가 설치되어 있었다. 그중에서 실제로 쓰면서 "이거 없으면 불편하겠다" 싶었던 것들을 골라 정리했다.Prettier — 코드 자동 정렬코드를 저장할 때마다 자동으로 들여쓰기와 줄바꿈을 정리해준다. 처음엔 그냥 깔았는데, 쓰다 보니 없으면 불편할 것 같아서 계속 쓰고 있다. 코드가 지저분하게 쌓이는 걸 자동으로 정리해줘서 가독성이 훨씬 좋아진다.저장(Ctrl + S)할 때마다 자동으로 동작하도록 설정해두면 따로 신경 안 써도 된다. Color Highlight — CSS 색상값 시각적으로 표시CSS 파일에서 #4466ee, rgb(255, 0, 0) 같은 색상값 옆에 실제 색상을 작은 박스로 보여준..

디자인 작업을 시작할 때 가장 먼저 하는 게 레퍼런스 찾기다. 컨셉을 잡거나, 컬러를 고르거나, 레이아웃 구성을 참고할 때 — 그때마다 가장 먼저 들어가는 곳이 핀터레스트(Pinterest)다.단순히 예쁜 이미지 모아두는 곳이라고 생각할 수 있는데, 쓰다 보면 디자인 작업에 생각보다 훨씬 유용하게 활용할 수 있다. 직접 쓰면서 알게 된 방법을 정리했다.핀터레스트를 레퍼런스로 쓰는 이유Behance나 Dribbble 같은 디자인 전문 플랫폼도 있지만, 핀터레스트는 범위가 훨씬 넓다. 그래픽 디자인, 인테리어, 패션, 사진, 브랜딩까지 다양한 분야의 이미지가 섞여 있어서 생각지 못한 조합이나 방향을 발견하기 좋다. 특히 무드와 컨셉을 잡을 때 한눈에 많은 걸 볼 수 있다는 게 장점이다. 이렇게 활용한다주로..

디자이너끼리는 자연스럽게 쓰는 말들이 있다. 온보딩, 인터랙션, 컨셉추얼, 레거시… 같은 디자이너나 개발자와 일할 때는 문제없지만, 비디자이너 상사나 팀원과 소통할 때는 얘기가 달라진다. 아무리 좋은 내용이어도 상대방이 이해하지 못하면 전달이 안 된다.여러 기업에서 일하면서 시안 설명, 컨셉 보고, 수정 요청 대응 등에서 소통이 잘 안 풀렸던 경험이 있다. 그러면서 조금씩 익히게 된 방법들을 정리했다.전문용어 대신 비유로 설명한다"화이트스페이스를 확보해서 가독성을 높였습니다"보다 "여백을 넉넉하게 줘서 눈에 잘 들어오게 했습니다"가 훨씬 바로 이해된다. 디자인 용어를 쓰고 싶은 마음은 이해하지만, 상대방이 이해하지 못하면 의미가 없다.비유도 효과적이다. 레이아웃 구조를 설명할 때 "신문 1면처럼 중요한 ..

크롬 개발자도구는 개발자만 쓰는 툴이 아니다. 디자이너 입장에서도 꽤 유용하게 쓸 수 있는 기능들이 있다. 처음엔 복잡해 보여서 손도 안 댔는데, 막상 쓰다 보니 디자인 작업할 때 없으면 불편할 정도가 됐다.단축키 F12 또는 Ctrl + Shift + I로 열 수 있다. 맥은 Cmd + Option + I다.요소 선택해서 CSS 값 확인하기레퍼런스 사이트나 작업 중인 페이지에서 특정 요소의 폰트 크기, 색상, 여백을 확인하고 싶을 때 가장 많이 쓰는 기능이다. 왼쪽 상단 화살표 아이콘(요소 선택 도구)을 클릭하고 확인하고 싶은 요소를 클릭하면 오른쪽 패널에 적용된 CSS 값이 쭉 나온다.1F12로 개발자도구 열기2왼쪽 상단 화살표 아이콘 클릭 (또는 Ctrl + Shift + C)3확인하고 싶은 요소 ..

디자인 작업을 하다 보면 폰트를 찾는 데 생각보다 많은 시간을 쓴다. 컨셉에 맞는 폰트를 찾아야 하는데, 유료 폰트는 부담스럽고 무료 폰트는 어디서 찾아야 할지 막막하다.지금은 거의 눈누(noonnu.cc) 하나로 해결하고 있다. 한국어 무료 폰트를 한곳에 모아둔 사이트인데, 종류도 많고 컨셉별로도 찾을 수 있어서 폰트 고를 때 제일 먼저 들어가게 된다.눈누가 뭔가눈누는 무료로 사용할 수 있는 한국어 폰트를 모아서 보여주는 사이트다. 각 폰트의 라이선스 정보, 다운로드 링크, 제작사 페이지까지 한 번에 확인할 수 있다. 폰트를 미리보기로 확인하면서 고를 수 있어서 직접 다운로드하지 않아도 어떤 느낌인지 바로 볼 수 있다. 눈누에서 폰트 찾는 법폰트를 찾는 방법이 여러 가지라 상황에 맞게 쓸 수 있다.1전..

구글 서치콘솔 등록을 마쳤다면 다음은 메타태그 설정이다. 메타태그는 검색 결과에 내 사이트가 어떻게 표시될지를 결정하는 정보다. 사이트 제목, 설명, 키워드를 잘 설정해두면 검색 노출에 유리하다.크리에이터링크를 처음 쓸 때 이 기능이 어디 있는지 몰라서 한참 찾았다. 메뉴가 조금 깊은 곳에 있어서 모르면 그냥 지나치기 쉽다. 경로와 설정 방법을 정리했다.메타태그가 뭔가 — 검색 결과에 보이는 그 텍스트구글에서 무언가를 검색했을 때 나오는 결과 목록을 떠올려보자. 파란색 제목, 그 아래 설명 텍스트 — 이게 바로 메타태그에서 온 정보다. 사이트 제목(title)과 설명(description)이 검색 결과에 그대로 노출된다.키워드는 예전만큼 검색 순위에 직접적인 영향을 주지는 않지만, 사이트 성격을 명확하게..