CY blog

1. 해상도스마트폰의 등장 이전에는 웹 디자인에 있어서 사용자의 표준 모니터 크기만 고려하면 됐기 때문에픽셀 단위의 해상도만 고려했었다. 그러나 다양한 모바일 디바이스와 함께 새로운 개념의 단위가 생겨나게 되었다.안드로이드의 디바이스 크기와 비율이 너무 다양했기 때문이다.  해상도는 이미지의 가로&세로에 몇 개의 화소, 몇 개의 픽셀이 있는지를 뜻한다. 위의 이미지를 보면 같은 크기의 이미지라도 해상도에 따라서 다르게 보이는 것을 알 수 있다. 화소가 적은 30x30보다 100x100 해상도에서 더욱 뚜렷하게 보인다. 화소가 많으면 많을수록 더 세밀하게 이미지를 표현할 수 있는 것이다. 이러한 해상도를 표현하는 단위에는 몇 가지가 있다. 2. Pixel = pxPixel의 약자 px는 화면을 구성하는 최..

내용 요약협업하는 모두가 같은 목적과 방향을 가지고 일관성을 유지하도록 돕는 디자인 시스템 구축은서비스의 품질 관리를 강화시키고 브랜드의 인지도를 향상시키며실수를 방지하고 비용과 시간을 절약하는 데 도움을 준다.  디자인 시스템의 역사최근의 디지털 환경은 빠른 변화 속도로 인해서 제품이나 서비스의 혁신이연간 단위가 아니라 분기 단위로 이루어지는 경우가 많아졌다.제품이나 서비스 일관성 유지에 있어서 공유 기록이 없는 경우 시각적·경험적 불일치가 발생할 확률이 높아지고그로 인해서 사용자는 제품이나 서비스를 이용함에 있어 실망감을 가지거나 혼란을 느끼게 될 가능성이 많아진다. 디자인 시스템을 구축을 한다는 것은 일관성 있는 디자인과 경험을 사용자에게 전달하기 위한 일이다.2014년 구글은 안드로이드의 다양한 ..

컬러컬러 패널을 열어서 색상 견본을 저장할 수 있다.드래그&드롭해서 제거할 수 있다.  투명도 조절은 두 방법이 있다.채우기&테두리에서 조절하면 채우기 영역과 테두리 영역 겹친곳까지 모두 조절이 된다. (첫 번쩨 사각형)불투명도에서 조절하면 겹친 영역을 제외하고 각 영역만 조절된다. (두 번째 사각형)  혼합모드이미지에서 애플 로고만 사용하고 싶을 때 혼합모드를 잘 활용하면 누끼딴 것처럼 사용할 수 있다!  3D 변형3D 변형은 최근 생긴 기능이라고 한다.오브젝트를 클릭하고 정육면체 아이콘을 클릭하면 3D 변형이 활성화되어오브젝트 가운데에 동그란 무언가가 생기게 된다. 저걸 조절하면 이런 식으로 3D화 시킬 수 있다.우측 패널에서 숫자로 조절할 수 있다.3D화 했던 걸 원상복구 하고 싶으면 숫자를 모두 ..

펜 툴  펜툴로 도형 그리고 anchor point 더블클릭하면 곡선으로 변한다.  텍스트텍스트 박스: 텍스트/단축키 [T] 선택 후 클릭하면 텍스트 박스 생성바운딩 박스의 높이&넓이 조절 직접 안 되고, 폰트 크기로 조절해야 한다. 텍스트 필드: 텍스트/단축키 [T] 선택 후 드래그하면 텍스트 필드 생성바운딩 박스의 크기 조절 직접할 수 있다. 요즘은 텍스트 박스는 사용 거의 하지 않는다고 한다.  플러그인①아트보드 하단 버튼 클릭 후 ②플러그인 탐색을 클릭하면 플러그인 창이 열린다. Content Generator, Lorem Ipsum 검색 후 다운로드 Content Generator 플러그인 실행 시 뜨는 창 이름, 날짜, 기타 텍스트를 무작위로 생성할 수 있다. Lorem Ipusm 플러그인 실..

0. About 스카이스캐너 스카이스캐너(Skyscanner)는 항공권, 호텔, 렌터카 등을 검색하고 비교할 수 있는 글로벌 여행 검색 플랫폼이다.실시간으로 항공권 정보를 제공하여 전 세계의 다양한 항공권을 한눈에 비교할 수 있다.직접 예약을 진행하는 것이 아니라 최저가를 제공하는 사이트로 연결해 주는 중개 역할을 한다.   1. 화면 구성 분석 첫 인상은 "정말 깔끔하다"였던 것 같다.우선 Header가 없고 Footer도 3개의 탭으로 이루어져 있으며,화면의 구성 또한 각 모듈이 큼직하게 배치되어 있고 콘텐츠도 많지 않기 때문이다. 앱을 실행하자마자 상단에 [항공권][호텔][렌터카] 버튼을 보여줘서"항공권 비교 및 호텔 렌터카 검색"이라는 사용자의 목적이 단번에 수행될 수 있도록 해주고 있다.그 밑으..

과제..두 번해서 억울해서 올리는 거 절대 아님..😹

1. 커머스 결제 화면 수집처음 사용하거나 사용 빈도수가 낮은 커머스인 무신사, 29CM, 굿웨어몰, 오늘의집, G마켓을 골랐다. 2. 공통 부분 그룹핑 3. 클론 디자인· 안드로이드 최소 사이즈인 360x640을 기준으로 디자인, 폰트는 Pretendard 사용오늘의집을 고른 이유최종 결제 금액을 가장 아래에 배치해서 결제 정보를 다 확인하고 결제할 수 있도록 한 것이 마음에 들었다. 그리고 특히 무신사와 G마켓은 디폴트로 무신사페이와 스마일페이로 되어있는데 이게 뭐지? 하고 3초 가량 생각하게 되는 부분이 있다. 29CM과 굿웨어몰은 카카오페이와 퀵계좌이체가 디폴트로 되어있는데 개인적으로 신용·체크카드로 결제하는 것을 선호해서 오늘의집을 선택하게 되었다.

1. 커머스 장바구니 화면 수집처음 사용하거나 사용 빈도수가 낮은 커머스인 무신사, 29CM, 굿웨어몰, 오늘의집, G마켓을 골랐다. 2. 공통 부분 그룹핑  3. 클론 디자인· 안드로이드 최소 사이즈인 360x640을 기준으로 디자인, 폰트는 Pretendard 사용굿웨어몰을 고른 이유무신사와 G마켓은 연관 상품 추천 모듈이 없고, 역으로 29CM과 오늘의집은 너무 과하게 있어서 화면이 복잡하게 느껴졌다. 굿웨어몰이 연관 상품 추천 모듈이 들어가 있으면서 심플하게 구성되어 있어서 고르게 되었다.

1. 커머스 상세 페이지 화면 수집가장 많이 사용하고 있는 커머스인 쿠팡, 11번가, 알리 익스프레스, 텐바이텐, 지그재그를 골랐다. 2. 공통 부분 그룹핑  3. 클론 디자인· 안드로이드 최소 사이즈인 360x640을 기준으로 디자인, 폰트는 Pretendard 사용 지그재그를 고른 이유페이지의 구성이 가장 마음에 들었다.이런 커머스 서비스로 상품을 구매할 때 상품의 상세 정보보다 후기를 먼저 보는 편인데알리 익스프레스와 지그재그가 상단에 후기 모듈을 배치했고, 그중에서는 지그재그의 디자인이 더 마음에 들어서 선택했다.그리고 플로팅 버튼도 위·아래 방향 모두 있어서 페이지 이동이 수월하게 한 점 또한 매력적으로 다가왔다.개인적으로 핑크색을 좋아해서 고르기도 했다.

1. 커머스 카테고리 화면 수집가장 많이 사용하고 있는 커머스인 쿠팡, 11번가, 알리 익스프레스, 텐바이텐, 지그재그를 골랐다.2. 공통 부분 그룹핑 3. 클론 디자인·안드로이드 최소 사이즈인 360x640을 기준으로 디자인, 폰트는 Pretendard 사용 지그재그를 고른 이유다른 커머스 서비스는카테고리에 아이콘이나 이미지를 함께 보여주는 경우가 많았는데 개인적으로 리스트형 카테고리가 깔끔하고 매력적이라 느껴서지그재그를 클론 디자인해보았다.의류 쇼핑 서비스답게, 상품 카테고리에서 옷의 색상을 작게 표시한 것 또한 매력적으로 다가왔다.그리고 개인적으로 핑크색을 좋아해서 고르기도 했다.