전체 글(43)
-
[피그마] 왕초보 오토레이아웃(Auto layout)으로 리스트(list) 만들기
이전 글에서는 오토레이아웃으로 버튼 만드는 방법을 간단하게 만들었다. 오토레이아웃 패널에 대해 간단하게 알 수 있었는데 이번에는 응용 버전으로 리스트를 만들어봤다. 2023.08.01 - [Product 디자인] - [피그마] 왕초보 오토레이아웃(Auto layout)으로 Button 만들기 [피그마] 왕초보 오토레이아웃(Auto layout)으로 Button 만들기 어라인(Align) 알아보기 먼저 아래 이미지처럼 프레임 만들어주고 텍스트 추가해서 버튼 만들어 준다 프레임+텍스트 레이어 두개 잡고 마우스 오른쪽 클릭해서 Add auto layout을 선택(아래 이미지)하 null-piglet.tistory.com 먼저 프레임으로 배경을 깔고 날짜 텍스트, 본문 텍스트, 구분 짓는 선 총 3개의 레이어를..
2023.08.17 -
[챗 GPT] HTML/CSS으로 게시판 만들기
챗 GPT한테 html/css으로 게시판을 만들어 달라고 했다. 게시글 번호, 날짜, 제목, 조회수를 넣어달라고 했고 하단에 page navi UI도 만들어달라고 했다. 그럼 이런 코드가 나온다. 게시판 번호 날짜 제목 조회수 1 2023-08-09 첫 번째 게시글 123 이전 1 2 3 다음 하단은 CSS /* Reset some default styles */ body, h1, table { margin: 0; padding: 0; } /* Basic styling */ body { font-family: Arial, sans-serif; } /* Board styles */ .board { width: 80%; margin: 0 auto; padding: 20px; } /* Post List sty..
2023.08.10 -
[피그마] 왕초보 오토레이아웃(Auto layout)으로 Button 만들기
어라인(Align) 알아보기 먼저 아래 이미지처럼 프레임 만들어주고 텍스트 추가해서 버튼 만들어 준다 프레임+텍스트 레이어 두개 잡고 마우스 오른쪽 클릭해서 Add auto layout을 선택(아래 이미지)하거나 쉬프트+A 오토 레이아웃으로 만들어주면 오른쪽 패널에 오토레이아웃이 활성화 된다. Horizontal layout/Align center 상태이며 버튼 텍스트를 바꿔주면 center 기준으로 버튼이 자동으로 늘어남 Align 선택시 텍스트가 고정되기 때문에 이 부분을 활용해서 추후에 반복되는 리스트UI 작업이 가능하다. 패딩값(Padding) 알아보기 파란색 빗금쳐진 부분이 상단 Padding이며 마우스 오버시 확인이 가능하다 마우스로 조절 할 수도 있고 하단 이미지처럼 패널에서 아이콘 눌러 수..
2023.08.01 -
2023 iOS/AOS 스토어 스크린샷(스토어 이미지) 사이즈
스토어 스크린샷이란? 스토어에서 보이는 앱 미리보기 화면이며 아래와 같다. 스토어에 검색시 들어가면 나오는 미리보기 화면이자 목업을 이용해서 디자이너들이 만드는 화면 개발자가 스토어 미리보기 이미지 주세요 하면 이렇게 아래와 같이 사이즈별로 전달해주면 된다! 위 이미지처럼 AOS는 상단 그래픽 이미지, 16:9 사이즈, iOS는 3개의 사이즈, 아이패드는 1개의 사이즈로 작업을 했고 전달했으며 이상없이 잘~~ 나왔다 왼쪽은 AOS 마켓 상단 그래픽 이미지 1024x500이고 보통 여기엔 반 짤린 목업과 서비스 로고, 슬로건을 넣는다. 또한 미리보기는 16:9 비율로 작업하면 되는데 여기서 팁을 풀자면 iOS사이즈와 동일하게 1242x2208 사이즈로 작업하면 두개의 OS 대응 가능하다! 하지만 작업시 목..
2023.07.31 -
[피그마] 배리어블(Variable) 기능으로 라이트/다크모드 스위칭하기
그레이 컬러는 머티리얼 디자인의 그레이 컬러코드를 가져와서 컬러파렛트 작업 고고! 그리고 다크테마를 위해 그대로 반전시켰다. 사실은 맞춰보면서 다크테마 컬러를 수정해야 하지만 일단 테마가 어떻게 나오는지 확인 후 작업하기로 컬러 파렛트를 만든 후 원하는 색상을 선택 한담에, Fill에서 Style 버튼을 누른 후 라이브러리 창에서 플러스 버튼을 누른다. 그러면 배리어블 탭이 등장하는데 크리에이트 버튼을 눌러 색상 하나하나 이름 지어주면서 지정을 해준다. 그럼 이렇게 로컬 배리어블에서 확인 할 수 있음 (팀 공유는 아직 모르겠다 나도 공부중 ㅠㅠ) 나는 900~50까지 10단계 컬러에 숫자를 부여해주고 Name에서 light/dark 이름 지어줬음! 그리고 모든 디자인을 영역으로 묶어준 후(또는 오토 레이..
2023.07.12 -
HTML5/CSS3이용해서 1시간만에 뉴스레터 디자인 만들기 - CSS 세로 가운데 정렬
HTML5/CSS3 연습을 위해 뉴스레터 만들기 도전! 우선 뉴스레터의 목적은, 잠재 고객 및 기존 고객에게 더 많이 접근할 수 있는 방법을 찾고 있다면 뉴스레터는 현재 뉴스, 팁, 제품, 서비스를 더 많은 고객과 공유할 수 있는 이상적인 방법입니다. 프린트된 뉴스레터 또는 이메일 뉴스레터로 수익 또는 판매량, 홈페이지 트래픽, 브랜드 인지도 등을 높임으로써 주된 비즈니스 목표를 달성할 수 있습니다. 출처 : 셔터스톡 하단 이미지들은 핀터레스트에서 찾은 뉴스레터 디자인들이다. 새로운 소식, 이벤트 뿐만 아니라 서비스 회원가입 메세지, 비밀번호 찾기(특히 비밀번호 찾기 할 때 많이 보인다), 금융쪽에서는 거래 내역 등등 이메일로 날라오는 소식을 그냥 텍스트로 전달하는게 아니라 브랜드 아이덴티티를 살려서 배..
2023.05.25