지식 확장 (113) 썸네일형 리스트형 UX 라이팅 시작하기 기획자는 아니지만 디자인할 때 의외로 문구를 직접 작성하거나 보충할 일이 생기곤 하는데, 그럴 때 도움이 될지도 모르겠다는 생각으로 이 책을 읽어보고 싶었다. 도서관에 희망도서로 신청해서 읽어보게 된 'UX 라이팅 시작하기'는 제목에서도 느껴지듯이 UX 라이팅 입문서이다. 저자는 쿠팡, 무신사 등에서 일을 했다기에 그런데선 어떻게 일하는지에 대한 정보도 얻을 수 있지 않을까 하는 기대도 했었다. 결론적으로 나처럼 쿠팡과 무신사 등의 실무 프로젝트에서 UX 라이팅 실무 경험에 대한 내용을 기대했던 사람이라면 좀 실망할 만하다. 이 책에서는 그런 사례를 중점적으로 다루기보다는 UX 라이팅의 기본기를 다지기에 좋을 내용이 주를 이룬다. 무엇보다도 이 저자 분은 단어의 의미 하나하나까지도 직접 파악해가며 글을 .. 퍼블리싱] input type password 입력 값 안보일 때 해결법 (feat. 사파리 브라우저 / 나눔스퀘어 웹 폰트) input[type=password] 입력 값이 안 보이는 현상 발생 GS인증을 받으려고 사이트를 수정하던 중, 비밀번호 입력 창에 비밀번호 입력 시 사파리 브라우저에서만 input[type=password]에 입력한 글자가 안 보이는 현상이 발생했다. 팀장님이 CSS문제가 아닌지 확인해보라고 하셨지만, 설마하는 마음으로 검색해 보던 중 특정 웹 폰트를 사용할 때 인코딩 지원이 되지 않아서 이와 같은 문제가 발생할 수 있다는 사실을 알게 됐다!! 지금까지 웹 폰트를 많이 사용해왔지만 이런 경험은 처음이었고, 미처 생각조차 못했던 부분이었다. 팀장님은 안되는 걸 왜 썼냐고 하셨지만 아마 html 문서를 만들었던 작업자도 이런 부분까지는 예상치 못하고 사용했을 것이다. 어쨌든 검색 결과에 따르면 그 특정 웹.. 이클립스] Emmet(에밋) 플러그인 설치 + 단축키 변경 (Cheat Sheet 링크 포함) Emmet(에밋)이란? HTML, CSS 등의 문서를 편집할 때 빠른 코딩을 위해 사용하는 플러그인으로, 원래 젠코딩으로 부르다가 에밋으로 이름을 변경했다. 축약된 코드를 입력하면 자동으로 완전한 HTML 코드를 생성해 주는 형태다. 나는 퍼블리싱을 할 때 vscode를 주로 사용하는데 vscode에서는 별도의 플러그인을 설치하지 않아도 emmet을 사용할 수 있다는 점이 아주 편리하다. (위 이미지 참고) 그러나, 협업 시 이클립스를 사용하게 될 때가 간혹 있는데 평소에 emmet에 익숙해져 있던 터라 (비록 잠시지만) 일일이 입력하려면 좀 답답하게 느껴지기도 한다. 물론 이클립스에서도 플러그인을 설치하면 emmet을 사용할 수 있다는 사실! (그치만 좀 귀찮다 😅) 이클립스에 Emmet 플러그인 설치.. p5.js 온라인 웹 에디터 사용법 p5js.org 사이트에서 제공하는 웹 데이터의 사용법을 정리해 보려고 한다. p5.js 온라인 웹 에디터의 장점 환경 세팅 없이 웹에서 입력 후 바로 확인할 수 있어 편리 다른 사람에게 내 코드나 작업물을 공유 가능 회원 가입 후 로그인 시 내 작업물 저장/다운로드 및 관리 가능 p5.js 온라인 웹 에디터 바로가기 p5.js Web Editor editor.p5js.org p5.js 온라인 웹 에디터 사용법 위의 p5.js 온라인 웹 에디터 링크로 이동하면 아래와 같은 초기 화면이 나온다. 파일을 저장하길 원한다면 회원가입 후 로그인하면 된다. 에디터 영역 : 코드를 입력 및 수정 미리보기 영역 : 에디터에 입력한 코드를 실행하는 영역 (코드 입력 후 좌측 상단의 Run 버튼 클릭) Auto-refr.. p5.js 애니메이션을 위한 변수 및 대입 연산자의 이해 정지된 도형에 움직임이나 크기 변화 등을 주려면 고정된 숫자가 아닌 변하는 숫자를 넣어주어야 하는데 이때 필요한 것이 변수이다. 변수란? 변수란 데이터를 저장할 수 있는 메모리 공간을 의미하며, 저장된 값은 변경될 수 있다. 어떤 이름을 가진 상자를 만들어서 그 상자 속에 여러 가지 물건을 넣는 것과 비슷하다고 생각하면 된다. 아래 그림처럼 변수에 어떤 값을 할당하는지(넣는지)에 따라 그 값은 계속 바뀌게 된다. 변수를 선언(생성)할 때는 var, let, const 를 이용할 수 있는데 여기서는 let을 이용해 예시를 들어보겠다. 변수를 선언하는 방법에는 선언만 하는 방법/선언과 동시에 초기화하는 방법 두 가지가 있다. 변수를 이용한 간단 모션 만들기 let speed = 1; let yPos = 0;.. p5.js 애니메이션을 위한 프레임 개념 및 frameRate(), frameCount 애니메이션의 원리 여러 장의 연속적인 이미지를 일정한 속도로 보여주게 되면 우리 두뇌는 망막에 남은 잔상으로 인해 이미지가 움직이는 것처럼 착각하게 된다고 한다. 출처 : https://ko.wikipedia.org/wiki/애니메이션 빨간 공이 움직이는 애니메이션은 연속된 정지 사진 6장의 모음으로 볼 수 있는데, 각각의 정지된 이미지 하나를 '프레임'이라 부른다. 이런 이미지가 1초에 몇 장 보이는지 프레임을 넘기는 속도를 가리켜 'Frame Rate', 우리말로 옮기면 프레임률이라 하며, 단위로는 'fps' 혹은 국제 표준인 'Hz'를 쓴다. sketch.js 파일의 기본 구조 p5.js 에디터에서 Sketch Files를 클릭해 보면 html, js, css로 파일로 나뉘어 있고, 그중에 sket.. PDF] 텍스트 복사 / 텍스트 추출 안될 때 해결법 (with Google 문서) PDF] 텍스트 복사 / 텍스트 추출 안될 때 해결법 (with Google 문서) 글자 복사 방지 해결법 PDF 파일이 텍스트로 저장돼 있는데도 글자 복사가 되지 않을 경우가 있는데, PDF에 글자 복사 방지 처리가 돼 있으면 이런 문제가 발생하게 되는 것 같다. 다들 알다시피 보통의 PDF 파일에서는 복사할 텍스트를 긁어서 Ctrl + C / Ctrl + V를 하면 쉽게 복사/붙여 넣기가 된다. 얼마 전 회사 동료가 학교 과제를 위해 전달받은 PDF 파일에서 텍스트 복사가 되지 않는다고 해서 검색하던 중, 정말 간단히 해결할 수 있는 방법을 찾게 되어 공유하고자 한다. PDF 변환해주는 타 사이트에 파일 업로드를 할 필요 없이(대부분 이 방법을 제시해줘서 시간 낭비를 많이 했다 - 나의 검색 키워드가.. [TIP] 파이어폭스 브라우저에서 광고 없이 기사보기(리더뷰 전환 or AdGuard 확장프로그램 설치) [TIP] 파이어폭스 브라우저에서 광고 없이 기사보기(리더뷰 전환 or AdGuard 확장프로그램 설치) 인터넷 기사를 볼 때 광고가 너무 덕지덕지 붙어있어서 기사를 읽는데 집중이 안 되는 경우가 많다. 파이어폭스 브라우저에서 기본으로 제공되는 기사를 깔끔하게 볼 수 있는 방법이 있어서 소개하려고 한다. 리더뷰 전환하기 파이어폭스 브라우저 주소창 옆에 리더뷰 전환(F9) 버튼이 있는데, 이 버튼을 클릭하면 광고를 제거한 내용만 볼 수 있게 해 준다. 아래 이미지는 한경닷컴에서 스튜디오드래곤의 기사를 보는 화면이다. 리더뷰로 전환 하기전에는 상단에 캐나다 연방투자청의 광고가 커다랗게 실린 모습이 보인다. 리더뷰로 전환 후 기사에 온전히 집중할 수 있게 화면이 아주 깔끔해진 걸 볼 수 있다. 다시 원래 화면.. 이전 1 ··· 8 9 10 11 12 13 14 15 다음
