본문 바로가기

분류 전체보기7

어느덧 서른, 어느덧 1년 6개월째 디블리셔로 일하는 중 나는 비전공자다. 나는 올해로 30대에 진입했다.(이제부터는 만 나이로 했으면 좋겠다..) '서른'이라는 나이가 되었지만 내 경력은 이제 '1년 6개월'이다. 20대 후반에서야 내가 좋아하는 게 뭔지 발견하고 국비 학원으로 시작해서 지금 이 자리(?)까지 왔다. 그러나 나는 아직 너무나도 턱없이 부족한 신입이다. 1년 반이면 신입 소리 뗄 때도 되지 않았냐 하겠지만 아무튼 나는 아직 많이 서툴고 모르는 거 투성이인 신입이다🙄 이 일을 하다 보니 언제쯤 내 실력이 늘까 슬슬 의문+자존감 하락+나라는 인간의 쓸모 여부(?) 등등.. 잡다한 생각이 너무 나도 많이 든다.컨펌을 받을 때면 팀장님한테 털릴까 매번 심장이 쿵쾅쿵쾅 거린다.. 후(모든 직장인들 힘내세요) 만약 이 글을 읽게 되는 사람이 있다면,웹디자.. 2022. 2. 10.
UI GUI 디자인 04 / 초간단 그리드시스템 만들기(포토샵, 피그마, XD) 1. 포토샵으로 그리드시스템 만들기 ※CC버전 이상이여야 가능합니다! 1. 'Create new'를 클릭하고 새파일을 열어줍니다. 저는 우선 해상도를 1920px로 잡고 세로는 임의로 1080px로 지정해줬습니다. 아트보드를 체크하면 여러가지 대지를 만들 수 있습니다! (체크안해도 그리드시스템 만들 수 있어요) 2. 상단 'View'탭 클릭 → 'New Guide Layout' 클릭 3. Number = 총 컬럼의 갯수 Width = 컬럼의 넓이 Gutter = 컬럼과 컬럼 사이의 넓이 기본적으로는 왼쪽으로 되어있는데 밑에 있는 Center Columns를 체크하면 가운데로 설정됩니다! 저는 Full Width 1200px을 만들거기 때문에 각각 12개, 80px, 20px로 지정해줬습니다. 4. 그렇게.. 2021. 9. 30.
UI GUI 디자인 03 / 그리드시스템 제작하기 1. 그리드시스템 왜 사용하는걸까? 그리드는 쉽게 말해 격자인데 디자인을 구성하는 박스의 간격이나 배치를 쉽게 하기 위해서 그리드 시스템을 사용한다. 허나 모든 디자인요소에 그리드를 맞추는 것이 아니다. 디자인을 구성하는 커다란 박스만 그리드에 맞게 배치를 하고 그 안에 들어가는 작은 요소들. 메뉴라든지, 버튼 같은 것은 자유롭게 배치하면 된다. 2. 그리드시스템 구성 요소 Column / Gutter / Number of Columns / Full Width / Margin width 쉽게 말해서 컬럼(Column) = 기둥 거터(Gutter) = 기둥사이의 여백 넘버더컬럼스(Number of Columns) = 몇개의 컬럼을 사용하냐 풀 위드(Full Width) = 최대 해상도 마진 위드(Margi.. 2021. 9. 20.
UI GUI 디자인 02 / 최소 해상도 데이터 추출하기 1. 신규 국내 프로젝트 신규 사이트를 만들게 되면 기존의 회원(고객)이 없는 상황이다. 이런 DB가 전혀 없는 상황에서 최소 해상도를 어떻게 맞춰서 잡아야 할까? 이 사이트는 나도 기존에 알던 사이트였는데 강사님께서 소개해주셨다. 해상도 통계 사이트이지만 인터넷 버전, 플랫폼 등 다양한 통계를 볼 수 있어서 좋다. 👇참고👇 https://gs.statcounter.com/ Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 10 b.. 2021. 9. 15.
UI GUI 디자인 01 / 디바이스 최소 해상도 선정하기 1. 해상도 개념과 사용목적 현재 내가 사용하고 있는 모니터의 해상도는 1920×1080. 여기서 단위는 픽셀(px)이고 1920 width, 1080은 height이다. 픽셀은 가변 값이기 때문에 해상도에 따라서 크기가 달라진다. 같은 15인치를 쓰더라도 어떤 사용자는 나와 같은 1920×1080일 것이고, 어떤 사용자는 다른 해상도일 수도 있을 것이다. 2. 디바이스 최소 해상도 선정하기 우리가 디자인을 하고 퍼블리싱을 하게 되면 데스크탑, 태블릿(패드), 스마트폰(모바일)에 따라 해상도가 달라지는데 그에 맞춰서 우리는 분기점을 잡아야한다. 이름하여 브레이크포인트(Breakpoints). 기기 대응을 할 시에는 최소 값을 잡는게 중요하다. 모바일의 최저값, 태블릿기기의 최저값, 테스크탑의 최저값 다 .. 2021. 9. 13.