네이티브 웹 구성 요소 - 무료 Sketch 라이브러리 (Native web components — a free Sketch Library)

모든 웹 디자이너는 이것들이 유용하다는 것을 알게 될 것입니다.🎉 그러나 아무도 자신의 포트폴리오를 위해 사용하지 않을 것입니다.😏

Note: 이 글에서 볼 수 있는 모든 것은 Sketch에서 100% 만들었습니다. 원리 그대로 프로토타입입니다.
맞습니다, 누군가가 자신의 방식대로 기본 설정을 다시 만들었습니다...모든 다른 디자이너가 재 디자인하려고 하는 것입니다.

TL;DR

네이티브 웹 컴포넌트의 무료 Sketch 라이브러리가 👉여기👈에 있습니다.
이 글에서는 포함된 내용과 사용 방법을 시연합니다. 라이브러리를 만드는 과정에 대해 조금 설명하겠습니다.
presentation
모든 구성 요소의 데모 포함 - 100% Sketch로 제작, Principle로 프로토 타입 작성

웹 구성 요소 란 무엇입니까?

그들은 섹시하지 않습니다. 그들은 스타일이 없습니다. 그것들은 브라우저 기본값입니다.
어떤 웹 디자이너도 포트폴리오를 재구성하지 않고 포트폴리오에 포함시키지 않습니다. 그러나 그들은 아마 그것들을 어느 정도 사용했을 것입니다. 나는 기본적인 checkboxes, radios, dropdown 등을 말하고 있습니다.
과거에, forms, white label products (추가 스타일링이 거의 없었 음) 및 못생긴 몇몇 CMS들에 사용되었습니다. 당신이 나와 비슷한 사람이라면 사소한 일까지 까다롭고 꼼꼼하게 따지고 싶어 할 겁니다.
이 포괄적인 Sketch 라이브러리는 다음번에 유사한 디자인 문제에 직면할 때 도움이 될 것입니다.
여기 HTML에 sketch에 포함된 모든 것들이 있습니다.


Sketch 라이브러리에 관하여

라이브러리는 Gumroad에서 이용 가능합니다. 라이브러리는 다음과 같습니다.
ZIP 파일에 다음이 포함되어 있습니다.
Native Web Components.sketch -데모 페이지가 포함된 Sketch 라이브러리.
Demo.sketch - 모든 구성 요소가 NativeWebComponents.scetch와 함께 시각적으로 표시되며 sketch 라이브러리로 설정되어 있습니다.
Demo.mp4 - 라이브러리를 사용하여 얻을 수 있는 것의 예제
Fully responsive
크기를 조정해야 합니까? 문제없습니다! 드래그하면 모든 것이 완벽하게 확장됩니다. 모든 레이아웃 옵션은 Sketch 's Resizing 속성을 사용하여 설정되어 있으므로 InVision, Marvel 또는 Zeplin과 같은 다른 앱에서도 효과적으로 사용할 수 있습니다.
presentation
No plugins needed - 플러그인 필요 없음
이 기능을 사용하기 위해 Sketch 이외의 다른 것들을 설치할 필요가 없습니다. 하지만 Paddy 플러그 인이 있는 경우에는 버튼 크기가 자동으로 조정됩니다.
As simple as possible - 가능한 간단하게
Native Web Components.sketch를 Sketch Library로 추가하면 데모 파일에서 모든 asset을 복사하여 붙여 넣기만 하면 됩니다. 필요로 하는 것을 찾기 위해 symbols dropdown을 파해 칠 필요가 없습니다.

다음과 같은 house-hold favourites이 포함됩니다 :

Buttons and Alerts
<input type="button">
presentation

Date and Time
Select Boxes and dropdown menus
<input type="datetime-local">
presentation
Checkboxes
<input type="checkbox">
presentation

Color (Mac OS color picker를 포함)
<input type="color">
presentation

Files (Mac OS file picker 포함)
<input type="file">
presentation

Number
<input type="number">
presentation

Radio Button
<input type="radio">
presentation

Range
<input type="range">
presentation

Search
<input type="search">
presentation

Select-box and Dropdown Menus
<select name="selectbox"> <option value="value1">Value 1</option> <option value="value2">Value 2</option> <option value="value3">Value 3</option> </select>
presentation

Text (예 : number, password, email etc)
<input type="text"> <input type="password"> <input type="email"> <!-- etc -->
presentation


약간의 보너스, 과정 ...

나는 이 스케치 파일을 직접 만든 것을 기억해 냈습니다. 그 주된 이유는 놀라운 Screenflow 앱에 몇 가지 기능을 추가하고 싶었기 때문입니다. 여기에 제가 MacOS 파일 선택기에서 작업하는 동안 시간이 흘렀습니다. 그것은 가장 복잡한 부품 중 하나였기 때문에, 가장 흥미로운 부분 이었습니다.🖥📹
📽 Roll film…

Sketch Library  가져 오기

👉 💎 ⬇지금 Gumload에서 다운로드⬇ 💎️ 👈


이 글은 번역 글입니다. 원본 링크입니다.
그리고 계속 이 링크를 통하여 업데이트를 한다고 합니다.
https://gumroad.com/l/sketch-web-components




presentation
안녕하세요!
Early adopter입니다. 제 번역 블로그를 자주 찾아 주셔서 감사드립니다.
저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
[DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
혹시나 저랑 함께 "보버"에서 디자인 번역 공장 연재를 해주실 유저분 계시면 리뷰나, 페북 어디에서든 메시지 주세요!!! 외롭습니다
함께 작업했으면 좋겠습니다^^ 연락 간절히 기다립니다.

번역 글 추천(신청) 받습니다.안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일 정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.