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

크리에이터링크로 사이트를 만들고 나면 한 가지 더 해야 할 일이 있다. 구글 서치콘솔에 사이트를 등록하는 것이다. 이걸 해두지 않으면 구글이 내 사이트를 제대로 인식하지 못해서 검색 결과에 노출되기 어렵다.크리에이터링크는 별도의 HTML 편집 없이 관리 페이지 안에서 바로 등록할 수 있어서 생각보다 간단하다. 직접 해본 순서를 정리했다.구글 서치콘솔이 뭔가구글 서치콘솔(Google Search Console)은 내 사이트가 구글 검색에 어떻게 노출되고 있는지 확인하고 관리할 수 있는 구글의 무료 도구다. 사이트를 등록하면 구글 크롤러가 내 사이트를 인식하고 검색 결과에 반영하기 시작한다.💡 등록 안 하면 검색이 안 되나? 꼭 그런 건 아니다. 구글이 자동으로 크롤링해서 수집하기도 한다. 하지만 서치콘솔..

웹앱을 만들면서 회원가입 기능을 직접 구현했다. 폐쇄형 서비스였기 때문에 아무나 가입할 수 없게 하는 구조가 필요했다. 초대코드 검증 + 이메일 인증을 조합한 6단계 플로우로 만들었고, 인증 처리는 Firebase Authentication을 사용했다.플로우가 조금 복잡한 편이라 사용자 가이드 페이지도 별도로 만들어뒀다. 처음 써보는 사람이 헷갈리지 않도록 단계별로 설명해두는 게 운영에 꼭 필요했다.회원가입 6단계 플로우전체 흐름은 이렇다. 각 단계마다 사용자가 해야 할 행동이 명확하게 나뉜다.1초대코드 입력 → 확인첫 화면에서 초대코드를 입력한다. 유효한 코드일 때만 이메일 입력란이 활성화된다.2초대코드 인증 완료"인증 완료" 상태로 바뀌고 이메일 입력이 가능해진다.3이메일 입력 → 메일 인증 버튼 클..

모바일 서비스를 만들 때 "앱으로 만들어야 하나, 웹으로 만들어야 하나"를 고민하게 된다. 강사 일정관리 서비스를 기획할 때도 똑같은 고민을 했다. 결론은 웹앱이었다.앱스토어나 구글 플레이에 올라가는 앱이 아니라, 브라우저에서 돌아가는 웹인데 앱처럼 보이고 동작하는 방식이다. 왜 그 선택을 했는지, 그리고 웹앱과 네이티브 앱이 어떻게 다른지 정리해봤다.네이티브 앱이란 — 우리가 흔히 아는 그 앱앱스토어나 구글 플레이에서 다운로드하는 앱이다. iOS용과 Android용을 각각 따로 개발해야 한다. Swift(iOS), Kotlin(Android) 같은 언어를 써야 하고, 출시 전에 각 스토어의 심사를 통과해야 한다.기기 하드웨어(카메라, GPS, 알림 등)에 깊게 접근할 수 있고 성능도 뛰어나지만, 개발 ..

강사 일정관리 웹앱을 기획할 때, 처음엔 단순하게 생각했다. 사용자가 일정을 보고 신청하면 끝이라고. 그런데 관리자 화면을 설계하기 시작하면서 그게 얼마나 순진한 생각이었는지 바로 알게 됐다.다른 디자인 업무를 병행하면서 틈틈이 진행한 프로젝트였는데, 생각보다 훨씬 오래 걸렸다. 기능 자체가 복잡해서가 아니라, 처음 기획이 관리자 입장을 전혀 고려하지 않아서였다. 1인으로 기획과 개발을 같이 하다 보면 빠지기 쉬운 함정이었다.사용자 화면만 기획했다 — 관리자를 생각 못했다처음 기획할 때 사용자 흐름은 꼼꼼하게 잡았다. 로그인 → 일정 확인 → 신청 → 완료. 깔끔했다. 그런데 막상 관리자 화면을 설계하려고 앉았을 때 막막했다.관리자는 사용자가 신청한 내용을 어떻게 확인하는가? 승인/거절은 어떻게 처리하는..

React 프로젝트를 처음 시작하면 파일이 금방 쌓인다. 컴포넌트, 페이지, 이미지, 스타일 파일까지 — 아무 생각 없이 만들다 보면 루트 폴더에 파일이 뒤엉켜서 나중에 뭐가 어디 있는지 찾기 어려워진다.포트폴리오 사이트를 만들면서 폴더 구조를 어떻게 잡을지 고민했다. 정답이 있는 건 아니지만, 실제로 써보면서 "이렇게 나누니까 편하다"는 걸 느낀 구조를 정리했다.전체 폴더 구조 한눈에 보기실제 포트폴리오 프로젝트의 구조다. 크게 public과 src 두 영역으로 나뉜다.public/ images/ print/ product/ promotion/ website/src/ components/ common/ ← 공통 컴포넌트 mockup/ ← 특정 기능 컴포넌트 da..

취업 공고를 보다 보면 헷갈린다. UI 디자이너, UX 디자이너, 웹 디자이너, 프로덕트 디자이너 — 다 비슷해 보이는데 뭐가 다른 건지 명확하게 정리가 안 된다. 포트폴리오를 만들 때도, 명함에 직함을 뭐라고 쓸지 정할 때도, 클라이언트한테 내 역할을 설명할 때도 매번 애매했다. 사실 "UI/UX 디자이너입니다"라고 하면 되레 "그게 뭐예요?"라는 질문이 돌아오는 경우가 많아서, 결국 일반인한테는 "웹 디자이너입니다"라고 하게 된다. 직무 얘기를 할 때는 "UI/UX 디자이너"라고 하고. 나도 정확히 모르고 상황에 따라 달리 쓰고 있었다. 이 참에 한 번 제대로 정리해봤다. UX 디자인 — 경험을 설계하는 것 UX(User Experience)는 사용자가 서비스나 제품을 사용하면서 느끼는 전체적인..

긴 웹페이지를 캡쳐해야 할 때, 예전엔 Alt + PrintScreen으로 화면을 조각조각 찍어서 포토샵에서 이어 붙인 적이 있었다. 시간도 오래 걸리고 이음새도 맞추기 번거로웠다.스크롤 캡쳐 방법을 찾다가 네이버에서 나온 캡쳐 확장 프로그램도 써봤는데, 어느 순간부터 에러가 잦아지더니 제대로 동작을 안 했다. 그러다 알게 된 게 GoFullPage다. 버튼 하나 클릭하면 페이지 맨 아래까지 한 번에 캡쳐된다. 디자이너라면 한 번만 써봐도 다시는 조각 캡쳐로 돌아가기 싫어질 것이다.GoFullPage가 뭔가GoFullPage는 현재 열려 있는 웹페이지 전체를 스크롤 캡쳐해주는 크롬 확장 프로그램이다. 설치하면 주소창 옆에 아이콘이 생기고, 클릭 한 번으로 페이지 전체가 PNG 또는 PDF로 저장된다. 무..

포토샵에서 잘 보이던 이모지를 일러스트레이터에 복붙했더니 □ 네모박스로 표시됐다. 분명히 같은 이모지인데 왜 일러스트레이터에서만 깨지는 건지 몰라서 검색해봤다.원인은 폰트 지원 문제였다. 해결 방법은 글리프(Glyphs) 패널을 활용하는 것이었는데, 알고 나면 간단하다.왜 일러스트레이터에서 이모지가 깨질까이모지는 일반 텍스트가 아니라 특수 문자다. 포토샵은 시스템 이모지 폰트를 비교적 잘 지원하지만, 일러스트레이터는 텍스트 도구로 이모지를 그냥 붙여넣으면 해당 폰트가 이모지를 지원하지 않아서 □ 또는 × 형태로 깨져 보인다.해결법 — 글리프(Glyphs) 패널에서 이모지 삽입일러스트레이터 상단 메뉴에서 Window(창) → Type(문자) → Glyphs(글리프)를 열면 된다. 글리프 패널 하단에서 폰트..