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

피그마를 쓴다고 하면 컴포넌트, 오토레이아웃, 베리어블까지 잘 다루는 걸 떠올리는 사람도 있다.실무에서 그렇게까지 쓰는 경우도 있지만, 나는 훨씬 단순하게 쓴다.프레임 그려서 배치하고, 프로토타입으로 화면 연결해서 링크 공유하는 것. 그게 전부다. 근데 이것만으로도 모바일 앱 UI 기획, 웹사이트 시안, 내부 보고까지 다 됐다.고급 기능을 몰라도 실무에서 피그마를 충분히 쓸 수 있다는 걸 정리해봤다. 다만 한 가지 전제가 있다.이렇게 라이트하게 쓴 건 기획·디자인·개발을 혼자 다 하는 프로젝트였기 때문이다.정교한 디자인 시안보다는 메뉴 구성과 화면 흐름을 빠르게 잡는 도구로 활용한 것이다.협업이 필요하거나 디자인 스펙을 정밀하게 전달해야 하는 환경이라면 컴포넌트나 오토레이아웃도 필요해진다.상황에 맞게 쓰..

분명히 저번 주까지 잘 됐던 git push가 갑자기 안 됐다.코드를 바꾼 것도 없고, 설정을 건드린 것도 없는데 터미널에 이런 메시지가 떴다.remote: Invalid username or token. Password authentication is not supported for Git operations.fatal: Authentication failed for 'https://github.com/...'처음엔 내가 뭔가 잘못한 줄 알았는데, 원인은 단순했다. GitHub Personal Access Token의 유효기간이 만료된 것이었다.왜 갑자기 push가 안 되는 걸까GitHub는 2021년부터 비밀번호로 push하는 방식을 차단했다. 대신 Personal Access Token(PAT)이라..

개인 포트폴리오를 만드는 건 귀찮은 과정이다.정해진 기한도 없고, 업무도 아니라서 자꾸 뒤로 밀리기 쉽다.그럼에도 시간을 내서 직접 만들기로 한 건, 개인 역량을 키우고 싶었고 꾸준히 업데이트할 수 있는 내 공간이 필요했기 때문이다.PPT로 만들거나 템플릿을 쓸 수도 있었다. 하지만 직접 코딩해서 만들어두면 앞으로 유지관리도 쉽고, 작업물이 늘어날 때마다 내가 원하는 대로 바꿀 수 있다. 어차피 내 작업물을 담는 공간인데, 그 공간마저 내가 만든 것이면 더 의미 있을 것 같았다.결론부터 말하면 — 완성했다.그리고 만드는 과정에서 예상하지 못한 것들을 많이 배웠다. 기술적인 것만이 아니라, 디자인을 바라보는 시각 자체가 바뀌었다.시작은 개발 환경 셋팅부터 — 코드 한 줄 쓰기 전에 막혔다React로 만들기..

크리에이터링크로 PC 화면은 깔끔하게 잡았는데, 모바일로 열어보면 레이아웃이 무너져 있는 경험을 해봤다. 특히 px로 너비를 고정해뒀을 때, 그리고 크리에이터링크 자체 반응형과 내가 작성한 CSS가 충돌했을 때였다.크리에이터링크는 자체적으로 반응형 처리를 어느 정도 해주는 플랫폼이다. 그래서 오히려 내 CSS와 충돌이 생기는 경우가 있다. 직접 겪으면서 파악한 주의할 점들을 정리했다.px 고정값이 모바일을 망친다가장 흔한 원인이다. width: 800px처럼 고정값을 쓰면 PC에서는 멀쩡하지만 모바일에서는 화면 너비를 초과해 가로 스크롤이 생기거나 레이아웃이 밀려난다.너비는 가급적 % 또는 max-width로 잡는 게 기본이다./* ❌ 고정값 — 모바일에서 넘침 */.userEL00000000 .box ..

크리에이터링크로 사이트를 작업하다 보면 대부분의 구조가 로 되어 있다. 처음엔 별 생각 없이 썼는데, SEO를 공부하면서 div 남발이 검색 노출에 영향을 준다는 걸 알게 됐다.직접 시맨틱 태그로 바꿔보면서 "아, 이래서 구조가 중요하구나" 싶었다. 생각보다 어렵지 않았지만, 막상 바꿨더니 스타일이 깨지는 상황도 있었다. 그 과정을 정리했다.div가 SEO에 안 좋은 이유는 의미 없는 컨테이너다. 구글 크롤러가 페이지를 읽을 때 div만으로는 "이 부분이 제목인지, 본문인지, 목록인지" 구분하지 못한다. 반면 , , 같은 시맨틱 태그는 콘텐츠의 역할을 명확하게 전달한다. 구조가 명확한 페이지가 검색 엔진에 더 잘 읽힌다.💡 시맨틱(Semantic)이 뭔가? "의미 있는"이라는 뜻이다. 시맨틱 HTML..

크리에이터링크에도 탭 전환 기능이 있는 템플릿은 있다.그런데 클라이언트 사이트를 작업하다 보면 디자인을 별도로 잡아두는 경우가 많은데, 그 디자인대로 구현하려면 템플릿을 그대로 쓰기가 어렵다.디자인대로 탭을 만들어야 하는데 크리에이터링크는 JavaScript 커스텀을 지원하지 않는다.JS 없이 탭 전환을 구현할 방법을 찾다가 radio input과 CSS ~ 선택자를 조합하는 방식을 발견했다.처음엔 CSS 작성 자체가 헷갈렸지만, 구조를 이해하고 나니 생각보다 단순했다.동작 원리 — radio input이 스위치 역할을 한다핵심 개념은 이렇다. radio input은 선택 상태(:checked)를 CSS로 감지할 수 있다. 여기에 ~ 선택자(일반 형제 선택자)를 붙이면, 체크된 input 다음에 오는 특..

GitHub에 코드를 올렸는데, 그걸 실제 URL로 접속할 수 있는 사이트로 만들려면 어떻게 해야 할까.React 포트폴리오를 로컬에서 완성한 뒤 딱 이 단계에서 막혔다.여러 배포 플랫폼 중 Netlify를 선택했다. 무료로 쓸 수 있고, GitHub 저장소와 연동하면 푸시할 때마다 자동으로 배포까지 해준다. 처음엔 GitHub 연동 방법도 몰랐고 빌드 설정도 헷갈렸는데, 막상 해보니 단계가 단순했다.Netlify 가입 — GitHub 계정으로 바로 연결netlify.com에 접속해서 GitHub 계정으로 로그인하면 된다. 별도 가입 없이 GitHub 연동이 바로 된다. 로그인하면 대시보드 화면이 나온다.GitHub 저장소 연동하는 법처음에 GitHub 연동을 어디서 하는지 몰라서 헤맸는데, 경로는 간단..

React 개발 환경 셋팅을 마치고 로컬에서 열심히 작업하다 보면 어느 순간 이런 생각이 든다."이거 저장은 어떻게 하지? GitHub에 올려야 하는 거 아닌가?"처음 GitHub을 접했을 때 커밋이 뭔지, 푸시랑 풀은 뭐가 다른지, 로컬에서 작업한 게 GitHub에 자동으로 반영되는 건지 아닌 건지 아무것도 몰랐다. 터미널에 명령어를 따라 입력하면서도 내가 지금 뭘 하는 건지 파악이 안 됐다.이 글은 그때 헷갈렸던 개념을 정리한 것이다.로컬과 원격 — 두 개의 저장소가 있다GitHub을 처음 쓸 때 가장 먼저 이해해야 할 것이 있다. 코드가 저장되는 공간이 두 군데라는 것이다.로컬(local)은 내 컴퓨터 안에 있는 폴더다. VS Code로 작업하는 그 폴더가 바로 로컬 저장소다. 원격(remote)은..