UXUI 디자인 작업물을 프로토파이로 불러오기 위해서는 디자인 툴에 프로토파이 플러그인을 설치하는 과정이 필요하다. 플러그인을 설치하면, 디자인 파일을 프로토파이에서 열어보록 하자. 1. 프로토파이 좌측 상단에 있는 Import 및디자인 툴을 클릭하면 해당 사이트가 열린다. 2. 피그마, XD 등 해당 사이트 및 프로그램에 접속하여 프로토파이 플러그인을 설치한다. 완료! 이제 손쉽게 디자인 파일을 불러들일 수 있다. ** 사전 준비 및 유의 사항 - UXUI 디자인 툴(작업 파일)과 ProtoPie 툴 모두 열려 있어야 한다. - 디자인 파일 간에 디바이스 화면 사이즈가 동일해야 한다. (불러와서 수정 가능) 1. Figma : Export 창(우측 화면)을 띄우고 프로토파이로 가져갈 영역을 선택하여 ..
CSS Layout : Flex와 Grid CSS layout에는 Flex와 Grid가 있다. CSS Flex와 Grid는 Container와 Item이라는 두 가지 개념으로 구분돼 있는데, Container는 Items를 감싸는 부모요소이고 그 안에 Item을 자유롭게 배치할 수 있다. Flex와 Grid의 차이는 중심축에 따른 레이아웃 시스템을 어떻게 제공하느냐에 있다. Flex는 row 또는 column으로 설정한 중심축에 따라 1차원적으로 아이템들을 배치할 수 있고 반면에 grid는 (row와 column) 2차원적으로 아이템들을 배치할 수 있다. 둘 다 훌륭하지만 비교적 좀 더 복잡한 레이아웃을 구현하기 위해 CSS Grid를 사용할 수 있다. 더보기 flexbox - container에 적용되..
2022 구글 I/O 개발자 컨퍼런스에서 CSS(Cascading Style Sheets)의 새로운 기능을 발표했다. 새로운 CSS 기능 중에서도 주목할만한 Cascade layers, Viewport units, Container queries, acctent-color, acctent-contrast, color-mix, :has(), @nest, @scope 에 대해 알아보자. Cascade layers (브라우저 지원 : Chrome 99, Firefox 97, Edge 99, Safari 15.4) 구체적인 셀렉터나 선언된 순서 (아이디 또는 !important) 등으로 스타일을 덮어씌우면 유지보수가 어려워지는데, 이러한 문제를 해결하기 위해 나온 기능이다. Cascade layers 규칙을 적..
px (pixel) 화면을 구성하는 기본 단위로, 스크린에 표현할 수 있는 가장 작은 점 하나라고 할 수 있다. 절대적 표시 단위라서 지정한 수치의 이상일 경우 깨져 보일 수 있다. dpi (dots per inch) 1인치에 들어가는 점들의 개수를 의미하며, 이를 dpi단위로 표현한다. 1인치 안에 72px가 들어가있다면 72dpi이다. 보통 웹이미지를 72dpi로, 인쇄물을 300dpi로 작업하는데 여기에서 '해상도(resolution)'라는 단어를 쓰게된다. 수치가 높을 수록 고해상도이므로 72dpi는 저해상도, 300dpi는 고해상도이다. dp (Density-independent Pixels) 밀도 독립적 픽셀이란 안드로이드 OS에서 정의한 논리적 픽셀이다. 기기의 밀도에 상관없이 물리적으로 거..
아이콘과 같은 벡터 이미지 사용을 위해서 SVG 파일로 저장하는 방법과, HTML에 사용하기 위해 코드로 변환하는 방법을 공유하고자 한다. SVG를 이해하기 위해 이미지 파일 형식에 대해서 간략히 알아보자. 벡터 VS 비트맵 벡터와 비트맵 모두 디지털 이미지를 저장하는 데 쓰이는 이미지 파일 포맷이다. 웹용 비트맵(Bitmap) 이미지 포맷은 픽셀(이미지를 구성하는 최소 단위) 격자를 사용하여 이미지를 나타낸다. 결과로 생성된 파일은 크기가 커져서 단일 해상도(흔히 저해상도)로 제한되기 쉽다. 따라서 다양한 색상을 가진 이미지를 만들 수 있지만 그만큼 용량이 커진다. 커진 이미지를 적용하더라도 화면 확대 시 이미지가 깨져 보일 수 있다. 반면에 벡터(Vector)는 이미지를 모양, 패스, 텍스트, 필터 ..
블로그 또는 쇼핑몰과 같은 웹사이트를 네이버 검색 결과에 노출되도록 하기 위해서 필요한 기본 절차는 네이버 웹마스터 도구(서치 어드바이저)에 사이트를 등록하는 것이다. 운영중인 웹사이트가 있다면 네이버 검색 결과 노출을 시도해봐도 좋겠다. * 웹마스터 도구(서치어드바이저) : 웹사이트의 검색수집, 색인 반영 현황을 제공하고 검색에 친화적인 사이트로 관리하는데 필요한 진단 리포트를 제공하는 서비스이다. 웹마스터 도구를 사용하지 않아도 네이버 검색 결과에 사이트 및 웹문서들이 반영될 수 있지만, 네이버 웹마스터 도구를 사용하면 사이트가 어떻게 검색에 반영되는지 확인할 수 있어 사이트 운영에 도움이 될 수 있다. (참조) 웹마스터 도구 등록 방법 1. 서치어드바이저에 접속하여 네이버 계정으로 회원가입 및 로그..
난생처음 해외 판매를 위해 글로벌 쇼핑몰 솔루션인 쇼피파이(Shopify)를 이용 중에 도메인에서 어려움을 겪고 있다면, 쇼피파이 가이드를 봐도 잘 모르겠다면 본 글을 참고해도 좋겠다. 도메인은 인터넷에서 방문하는 웹사이트 주소 또는 URL을 의미한다. 도메인 이름은 Chrome, Firefox, Internet Explorer, Safari와 같은 웹 브라우저의 주소 표시줄에 나타난다. 쇼피파이에서는 도메인을 제공하므로 관리도 함께하면 편하다. 하지만 만일 타사에서 도메인을 구입한 경우라면 양쪽 업체의 관리 화면에서 도메인과 관련된 설정을 해야 한다. 본 글을 통해 타사/가비아에서 구매한 도메인을 쇼피파이에서 제작된 사이트와 연결하는 방법에 대해 알아보자. 1. 가비아에서 네임서버와 DNS 정보 설정 ..
JSON을 이해하려면 서버와의 통신에 대해 생각해보자. 웹사이트나 앱과 같은 Client들이 Server와 어떻게 통신할 수 있는지를 정의한 것이 *HTTP이다. * HTTP ( Hypertext Transfer Protocal) : Hypertext를(HTML 문서와 같은 리소스들을) 어떻게 서로 주고받을 수 있는지를 규약 한 프로토콜이다. - Hypertext는 링크만 해당하는 것이 아니라 문서나 이미지 등의 데이터 파일도 해당한다. HTTP는 Client가 Server에게 데이터를 request(요청)하고, 반대로 Server는 요청받은 것에 따라 response(응답)을 Client에 보내 주는 방식을 의미한다. HTTP를 이용해서 Server에게 데이터를 요청해서 받아올 수 있는 방법으로는 *A..
바닐자 자바스크립트는 유연한 언어이기 때문에 개발자가 선언되지 않은 변수의 값을 할당한다던지 기존의 프로토타입을 변경하는 등의 실수를 할 수 있다. 이러한 실수를 방지하기 위해서는 ECMAScript 5에 추가된 Strict mode로 작업하는 것이 좋다. Strict(엄격한) 모드 특징 기존 자바스크립트에는 조용히 무시되던 에러들을 throwing한다. (아래 이미지 참고) JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡으며. strict 모드의 코드는 not-strict 모드의 동일한 코드보다 더 빨리 작동되어 상대적으로 효율적이다. ECMAScript의 향후 버전에서 정의 될 문법을 금지한다. Strict 'use strict'; // 자바스크립트 파일 최상단에 선언 // a..
HTML에서 JavaScript를 포함할 때, 어느 위치에 어떻게 참조시키는 것이 효율적인 방법일까? 브라우저가 HTML을 분석하여 화면에 출력하는 과정을 생각해보자. 우선 브라우저에서는 다운로드한 HTML의 구문을 분석(*parsing)을 하게된다. 브라우저가 HTML을 다운받아서 코드를 한 줄씩 parsing 하다가 를 만나게 되면 parsing 하는 것을 멈추고, script를 서버에서 받아오고 실행(fetching)하게 된다. * parsing HTML 태그에는 시작과 끝이 있고 속성 이름과 값이 있는데, parser는 이 문서에 대한 입력을 parsing(구문 분석)하여 문서 트리를 구축한다. (해당 파일을 브라우저 화면으로 볼 수 있는 일련의 과정) HTML parser는 이미지 같은 non-..