반응형 전체 글160 dp에 따른 그리드시스템에 대해 알아보자. 지난 시간에 우리는 DPI에 대해 알아보았습니다. DPI는 D(DOT) P(PER) I(INCH)로 1인치에 들어가는 점의 개수를 의미한다고 정의를 내렸었는데요. 이 DPI가 어떻게 그리드 시스템(Grid System)에 적용될 수 있을지 알아보도록 합니다. 그리드 시스템(grid system)이란? 페이지의 정보를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 디자인 시스템을 의미합니다. 쉬운 말로 '가이드'라고 표현 할 수 있겠네요. 그리드 시스템은 컴퓨터 개발 이전에 책, 잡지, 신문과 같은 곳에 이미 사용되어 왔습니다. 레이아웃을 큰 축을 이루는 몇 가지 단계의 그리드 내에서 콘텐츠 영역을 구성했다는 것을 확인할 수 있습니다. 사실은 이 그리드 시스템이 '법'은 아닙니다. .. 디자인/UIUX 2020. 11. 1. 안드로이드에서 DPI는 이렇게 적용된다. 4의배수? 8의 배수?*기기별 해상도 지난 시간에 이어 DPI를 이해했다면, 안드로이드의 해상도에 대해서 알아볼 겁니다. 조금 복잡합니다. 저와 함께 차근차근 하나하나 개념을 정의해보도록 해요. 조금 아득해보이지만 알고 보면 아무것도 아닌 녀석들입니다. 각 기기별로 해상도가 다르기 때문에 DPI가 다르고 DPI에 맞는 비율이 다릅니다. 때문에 어플 속 한 개의 아이콘을 만들 때 총 6가지 해상도에 맞춘 아이콘을 제작해야 한다는 의미입니다. 1개의 아이콘을 만들었는데, 6개의 아이콘을 만들어야 한다고..? 그러나 굳이 6가지 DPI에 맞는 아이콘을 만들 필요는 없습니다. 아래의 두가지 방법을 소개합니다. 1. 벡터 파일로 만드는 방법 일러스트의 svg와 같은 파일로 작업을 하면 Ratio1 비율로 제작을 하면 됩니다. 비율이 달라지더라도 그 .. 디자인/UIUX 2020. 10. 25. 초보디자이너는 반드시 알아야 할 안드로이드 DP의 개념 (DPI/PPI) 안드로이드를 처음 접하는 초보 디자이너라면 반드시 알아야 할 개념이 있습니다. 이 개념을 왜 알아야 하냐면, 안드로이드는 다양한 스마트폰 화면 크기와 해상도를 지원하기 때문입니다. DP 뿐만 아니라 DPI, PPI 등의 용어도 듣게 됩니다. 혼란스럽습니다. 하지만 생각보다 어렵지 않은 개념이고 여러 번 보다 보면 익혀지는 용어입니다. 이와 관련된 지식을 알고 있어야지만 디자인 작업을 할 수 있습니다. 도화지의 크기를 알아야 레이아웃을 잡을 수 있는 것처럼요. DP를 한마디로 말하자면 "픽셀과 관계없이 독립적인 크기를 가진 디스플레이의 좌표(점)"라고 말할 수 있습니다. 도화지에 점을 하나 찍나, 붓으로 점을 하나 찍나 DP의 관점으로 보자면 크기가 어떻든지 간에 한 개의 점이라는 것입니다. 다른 건 필요.. 디자인/UIUX 2020. 10. 25. 웨이브 이용권(wavve) 자동결제된 후 해지 후기 웨이브 이용권 해지 후기 웨이브 이용을 한달만 체험을 하려고 했다가 해지를 깜빡하고 뒤늦게 자동결제된 것을 확인하고 해지를 했습니다. 원래는 결제 당일 바로 해지를 해도 추가로 나가는 금액이나, 이용기간이 줄어든다거나 하는 문제는 없습니다만, 단순하게 제가 깜빡해서 해지를 뒤늦게 하였습니다. 보이시나요 한번 결제가 되었다가 취소를 요청해서 취소요청이 승인이 난 행복한 결말을 맞이했습니다. 웨이브 100원 이용권을 이용해 컨텐츠를 즐겼으나 딱히 돈주고서 더 볼 생각이 들지 않아 해지를 결심했지만, 그 자리에서 바로 해지를 하지못하고 한달을 넘겨서 6950원이 결제 되었습니다. 100원 이벤트에 두달 50%할인된 금액이었습니다. 어쩔수없이 고객센터에 문의할 수밖에 없었고 대충 몇가지 적어야하는 옵션들이 있었.. 카테고리 없음 2020. 10. 22. 티스토리 글씨체 변경하는 방법 / 스킨이 적용되어 있을때 안녕하세요 오늘은 티스토리의 폰트를 변경을 해보려고 합니다. 변경을 하려는 이유는 위와 아래와 같습니다. 티스토리... 나에게 앞으로 황금알을 낳게 해줄 고마운 존재인 것은 맞지만, 너무 불편합니다. 왜이렇게 불편한거죠. 사실 저는 네이버 블로그 유저입니다. 네이버만 쓰다가 티스토리를 쓰려고 하니까 진짜 장난이 아니네요. 너무 불편해요 ㅋㅋㅋㅋㅋ서식을 만들면 뭐합니까.. 제대로 적용이 안됩니다. ㅎㅎㅎ 그래서 폰트를 한번 변경해보려고 합니다. 결국 내마음대로 되지는 않았지만, 포스팅 하나하나 쌓아올리면 언젠가는 포텐터질날이 오겠죠? 티스토리 글씨체 변경하는 방법스킨이 적용되어있을때, 적용되어있지 않을때 방법은 결국 비슷합니다 #티스토리 #글씨체 처음 제 블로그의 메인 화면은 이러하였습니다. 별로 나쁠건 .. 관리/블로그 관리 2020. 10. 22. 구글 애드센스 핀(PIN)번호 수령후기, 우편 안올때 안녕하세요. 제 블로그에는 애드센스 광고를 적용하고 있습니다. 티스토리 블로그의 경우 대다수가 이러한 애드센스 광고를 적용하고 있는 플랫폼으로 알고 있는데요. 저도 이 애드센스 광고를 적용해서 수입원으로 이용하기 위해서 티스토리를 운영하고 있습니다. 그런데, 티스토리로 애드센스 광고를 달아 해야하는 것이 하나 있습니다. 애드센스 뿐만 아니라 마이비지니스를 위한 소유주 확인차 발송되는 PIN넘버입니다. PIN넘버 발송의 이유는 본인확인을 위해서 인데요. 본인 확인을 위해서 20년도에 우편을 이용한다는 것은 왜 그런지는 저도 잘 모르겠습니다. 구글이 우편을 고집하고 있으니, 개미들은 수단을 이용할 수밖에요. 구글 애드센스 핀(PIN)번호 우편 안올때 구글 애드센스 핀번호 발송 기준어느순간 꽂혀있는 구글의 우.. 관리/블로그 관리 2020. 10. 21. 알짜배기만 있는 추천 화면 캡쳐 프로그램 알짜배기 캡쳐 프로그램 화면 캡쳐가 필요하시다면 꼭 이용해봐도 좋을 프로그램! #화면캡쳐 #알짜배기 #스크린샷 오늘 제가 알려드릴 캡쳐프로그램입니다. 직접지정 캡쳐는 물론 창캡쳐, 전체 캡쳐 등 지원이 가능한데요. 저와 같이 블로그로 정보를 운영을 하신다면, 반드시 필요한 화면 캡쳐, 그리고 화면에 간단하게 표시를 메모를 해야할 필요가 있는데요. 그래서 최근에 제가 알캡쳐를 이용을 해보다가 새로운 캡쳐프로그램을 발견했습니다. 바로 픽픽 입니다. 물론 알캡쳐도 불편한 점이 없으나 픽픽의 경우에는 다양한 기능을 지원을 하더라구요. 제가 왜 이 프로그램을 추천하느냐! 1.화면 캡처 도구로전체화면 캡쳐하기/활성화된 윈도우 캡처/윈도우 컨트롤 캡처/자동 스크롤 캡쳐/영역을 지정하여 캡쳐/고정된 사각영역 캡처/내마.. 관리/PC 꿀팁 2020. 10. 4. 신경치료 1일차 사실 사랑니랑 붙어있는 어금니가 썩었다는 이야기를 3년전에 들었습니다. 그리고 유튜브에서 본 얄팍한 정보로 아프면 치료하지 않아도 된다는 말에, 방치를 하였습니다. 그리고 물치실을 하는데 어금니 부위에 삥- 하고 아픈감각이 느껴졌습니다. 이게 고통의 시작이었고 잠을 자고 있다가도 갑자기 아픈 증상때문에 일어난 적이 있었습니다 ㅋㅋㅋㅋㅋㅋ 결국 치과에 갔고 신경치료를 해야한다는 청천별력... 사실 알고 있었어요. 신경치료를 해야한다는 사실을... 그래서 겸허하게 받아드리기로 했습니다. 총 5번에서 많으면 8번 매주 와야한다는 이야기를 들었고, 본격적으로 치료일이 되어서 병원에 갔습니다. 일단.. 치아의 반을 날렸습니다. /1일차 치료과정/ 1. 마취주사를 맞는다 (생각보다 그리 아프지 않습니다) 2. 썩은.. 카테고리 없음 2020. 9. 30. 조금 안다고 하기에도 애매한 상태의 UI디자이너 Q. 왜 이 글을 쓰게 되었나요? "이왕 시작할 거, 일기처럼 써보고 싶어요. 글을 쓰는 당시의 내 상태를 기록하기 위해, 나의 성장을 기록하기 위해, 그 날의 다짐을 기록하기 위해서요. 또 배웠던 것을 뒤돌아 보고 싶어요. 인간이기 때문에 까먹는 건 당연한 거잖아요?" "저는 전형적으로 일을 뒤로 미루기 좋아하는 사람입니다. 사람은 쉽게 변하지 않잖아요? 진작에 이렇게 글을 쓰고 싶었는데, PLUS X라는 디자인 회사를 우연히 발견했습니다. 이 회사에서 brunch로 글을 정기적으로 작성을 하더라고요. 디자인적으로 PLUS X가 제가 가고자 하는 방향과 너무 일치해서, 닮아가고자 글을 쓰게 되었습니다." Q. 나는 어떤 상태인가요? "인하우스 디자이너로 사수 없이 일하고 있는데, 경력 2년 차로 입사해.. 디자인/UIUX 2020. 4. 18. 안드로이드 아이콘 만들기 (가이드) 안드로이드 아이콘을 만들어보자. 구글 머티리얼 디자인에서 안드로이드 아이콘 가이드를 제공하고 있다. https://material.io/design/platform-guidance/android-icons.html# Android icons Android O icons represent your app on a device's Home and All Apps screens. material.io 머티리얼 사이트에서 모든 것을 확인 할 수 있다. 원안에서 사각형,원형,직사각형 안에서 보이는게 가장 적합한 아이콘 형태인듯 하다. 내가 만들 아이콘은 정사각형에 적합하다. 아이콘은 아래와 같은 표에 맞게 사이즈를 만들어 저장하면 된다. LDPI 36*36 MDPI 48*48 HDPI 72*72 XHDPI 9.. 디자인/UIUX 2020. 3. 19. html 링크 효과(파란줄) 없애기 소스는 아래와 같다. 텍스트 링크의 파란색 줄 없애기 a:link { color: blue; text-decoration: none;} a:visited { color: blue; text-decoration: none;} a:hover { color: blue; text-decoration: underline;} a:active { color: blue; text-decoration: underline;} 소스를 해석하면 아래와 같다. a:link : 원래 상태의 링크 a:visited : 한번 클릭했던 링크 a:hover : 링크를 클릭하려고 마우스를 가져갔을 때 a:active : 링크부분에서 마우스를 누르고 있는 동안의 상태 decoration : 밑줄 none : 밑줄이 없는 상태 underli.. 개발/퍼블리싱 2020. 2. 12. html에서 이미지/아이콘 불러오기 퍼블리싱 공부 2일차 오늘의 배움은 html에서 아이콘 혹은 이미지 불러오기다. 사이에 을 넣으면 된다. *가로의 크기를 변경하고 싶다면, *세로의 크기를 변경하고 싶다면, *예시 서비스 포트폴리오 회사소개 0410-2421 파일경로는 현재경로라면 "download.png" 폴더에 있다면 "폴더명/download.png" 폴더의 폴더 안에 들어 있다면 "폴더명/폴더명/download.png" 개발/퍼블리싱 2020. 2. 11. 이전 1 ··· 8 9 10 11 12 13 14 다음 💲 추천 글 반응형