현재 회사에서 새로운 블록체인 관련 솔루션을 제작 중.. 디자인을 하기 전 디자인 시스템을 제작하기로 했다. 먼저 컴포넌트를 만들기전 초기 가이드라인을 제작하는게 좋을것 같아 유명 서비스들의 기반을 찾아본다. 라인에서는 최소한의 디자인 규칙을 포함하는 디자인 요소의 가장 작은 단위이며 개발간의 소통을 원활하게 해주는 수단으로 활용된다. Foundation The foundation is the smallest unit of a design element that contains the minimal design rules. designsystem.line.me 지마켓 디자인 시스템에서는 필수적인 시각적 요소라고 말하고 있다. Typography - Gmarket Design System G마켓의 브랜드 ..

세로형 카드에서 가로형 카드되는 반응형 카드 UI 만들기! 먼저 프레임을 만들어 준다. card 이름 지어주고 이펙트, 라운드 넣어줘서 디자인해준다. 카드에 rectangle으로 이미지 들어갈 영역 만들어주고 Unsplash 플러그인으로 이미지 넣어준다. (이미지 플러그인은 다음 글에 소개할 예정) 이미지 밑에 Label, Heading, 본문, 프로필 이미지등등 텍스트들을 넣는다. 여기까지는 아직 오토레이아웃 노노! 참고로 Label/프로필 이미지는 레이어가 2개라서 그룹을 해줘야한다. Label 그룹/프로필 그룹 이렇게 각각 그룹 따로! 이제 여기서부터 오토레이아웃 시작! 밑에 순서대로 하면 된다. 1. Label/Heading/본문/프로필 사진 4개 잡고 오토레이아웃을 준다. 2. 카드 프레임한테 ..

이전 글에서는 오토레이아웃으로 버튼 만드는 방법을 간단하게 만들었다. 오토레이아웃 패널에 대해 간단하게 알 수 있었는데 이번에는 응용 버전으로 리스트를 만들어봤다. 2023.08.01 - [Product 디자인] - [피그마] 왕초보 오토레이아웃(Auto layout)으로 Button 만들기 [피그마] 왕초보 오토레이아웃(Auto layout)으로 Button 만들기 어라인(Align) 알아보기 먼저 아래 이미지처럼 프레임 만들어주고 텍스트 추가해서 버튼 만들어 준다 프레임+텍스트 레이어 두개 잡고 마우스 오른쪽 클릭해서 Add auto layout을 선택(아래 이미지)하 null-piglet.tistory.com 먼저 프레임으로 배경을 깔고 날짜 텍스트, 본문 텍스트, 구분 짓는 선 총 3개의 레이어를..

어라인(Align) 알아보기 먼저 아래 이미지처럼 프레임 만들어주고 텍스트 추가해서 버튼 만들어 준다 프레임+텍스트 레이어 두개 잡고 마우스 오른쪽 클릭해서 Add auto layout을 선택(아래 이미지)하거나 쉬프트+A 오토 레이아웃으로 만들어주면 오른쪽 패널에 오토레이아웃이 활성화 된다. Horizontal layout/Align center 상태이며 버튼 텍스트를 바꿔주면 center 기준으로 버튼이 자동으로 늘어남 Align 선택시 텍스트가 고정되기 때문에 이 부분을 활용해서 추후에 반복되는 리스트UI 작업이 가능하다. 패딩값(Padding) 알아보기 파란색 빗금쳐진 부분이 상단 Padding이며 마우스 오버시 확인이 가능하다 마우스로 조절 할 수도 있고 하단 이미지처럼 패널에서 아이콘 눌러 수..

스토어 스크린샷이란? 스토어에서 보이는 앱 미리보기 화면이며 아래와 같다. 스토어에 검색시 들어가면 나오는 미리보기 화면이자 목업을 이용해서 디자이너들이 만드는 화면 개발자가 스토어 미리보기 이미지 주세요 하면 이렇게 아래와 같이 사이즈별로 전달해주면 된다! 위 이미지처럼 AOS는 상단 그래픽 이미지, 16:9 사이즈, iOS는 3개의 사이즈, 아이패드는 1개의 사이즈로 작업을 했고 전달했으며 이상없이 잘~~ 나왔다 왼쪽은 AOS 마켓 상단 그래픽 이미지 1024x500이고 보통 여기엔 반 짤린 목업과 서비스 로고, 슬로건을 넣는다. 또한 미리보기는 16:9 비율로 작업하면 되는데 여기서 팁을 풀자면 iOS사이즈와 동일하게 1242x2208 사이즈로 작업하면 두개의 OS 대응 가능하다! 하지만 작업시 목..

그레이 컬러는 머티리얼 디자인의 그레이 컬러코드를 가져와서 컬러파렛트 작업 고고! 그리고 다크테마를 위해 그대로 반전시켰다. 사실은 맞춰보면서 다크테마 컬러를 수정해야 하지만 일단 테마가 어떻게 나오는지 확인 후 작업하기로 컬러 파렛트를 만든 후 원하는 색상을 선택 한담에, Fill에서 Style 버튼을 누른 후 라이브러리 창에서 플러스 버튼을 누른다. 그러면 배리어블 탭이 등장하는데 크리에이트 버튼을 눌러 색상 하나하나 이름 지어주면서 지정을 해준다. 그럼 이렇게 로컬 배리어블에서 확인 할 수 있음 (팀 공유는 아직 모르겠다 나도 공부중 ㅠㅠ) 나는 900~50까지 10단계 컬러에 숫자를 부여해주고 Name에서 light/dark 이름 지어줬음! 그리고 모든 디자인을 영역으로 묶어준 후(또는 오토 레이..