클립보드 패턴, 파일 패턴, 앱 패턴 등 놀라운 앱을 위한 환상적인 새로운 패턴의 컬렉션을 살펴보세요.
차세대 동영상 편집 앱, 중독성이 강한 단어 게임, 미래의 온라인 소셜 네트워킹 앱 등 무엇을 빌드하든, 항상 다음과 같은 몇 가지 기본 구성요소가 필요합니다.
- 동영상 편집 앱에서 사용자가 수정된 동영상을 저장하도록 허용할 수 있습니다.
- 게임에서 사용자가 게임 진행 상황을 친구와 공유하도록 허용할 수 있습니다.
- 온라인 소셜 네트워킹 앱에서는 사용자가 게시물에 이미지를 붙여넣을 수 있습니다.
이러한 패턴을 실현하는 보편적인 방법 없음
이는 이러한 패턴의 몇 가지 예에 불과하며, 더 많이 있습니다. 하지만 이 모든 것에는 하나의 공통점이 있습니다. 즉, 이들을 실현하는 보편적인 방법은 없다는 것입니다.
진행 상황 공유 중
예를 들어 모든 브라우저가 Web Share API를 구현하는 것은 아니므로 경우에 따라 Twitter의 웹 인텐트 또는 클립보드로 복사와 같은 다른 접근 방식을 사용해야 합니다. 이는 Web Share API가 구현되지 않았을 때 Wordle에서 선택한 접근 방식입니다. 휴, 거의 손에 잡힌 적 없다.
Wordle 471 6/6
⬛⬛⬛⬛🟨
🟩⬛⬛⬛🟨
🟩🟩🟩⬛⬛
🟩🟩🟩⬛⬛
🟩🟩🟩🟩⬛
🟩🟩🟩🟩🟩
파일 저장 중
저장과 관련하여 가장 좋은 접근 방식은 File System Access API를 사용하는 것이므로 실제 저장, 수정, 저장 흐름을 구현할 수 있는 FileSystemFileHandle가 생성됩니다. 다음으로 좋은 방법은 기본 <a download>로 대체하는 것입니다. 이 경우에도 사용자는 데이터를 저장할 수 있지만 다운로드할 때마다 새 파일을 만드는 단점이 있으므로 my-video.mp4, my-video (1).mp4, my-video (2).mp4 등을 사용하게 됩니다.
이미지 붙여넣기
입문 예시를 마무리하자면, 일부 브라우저는 이미지를 웹 앱에 붙여넣는 기능을 지원하지 않습니다. 따라서 드래그 앤 드롭 API를 사용하거나 Async Clipboard API만큼 세련되지는 않지만 적어도 작동하는 파일 선택 도구를 표시하는 것으로 대체할 수 있습니다.
새로운 패턴
이를 제거하면 새 패턴 섹션은 다음과 같습니다.
클립보드 패턴
클립보드 패턴을 사용합니다.
파일 패턴
파일 및 디렉터리와 관련된 모든 항목에 대한 파일 패턴(저장, 열기, 드래그 앤 드롭, 수신 또는 공유)
웹 앱 패턴
웹 앱 패턴을 참조하세요.
의견
이러한 패턴이 멋진 앱을 빌드하는 데 도움이 되기를 바랍니다. 의견을 기다리겠습니다.
@ChromiumDev로 트윗하거나 문제를 신고하여 의견을 제공하실 수 있습니다. 두 경우 모두 @tomayac 태그를 지정하여 내가 볼 수 있게 합니다.
감사의 말
패턴 검토 및 수정에 도움을 주신 조 메들리님께 감사드립니다. 기술 및 조직 지원을 제공하고 용기를 북돋아 주신 Pete LePage, Ewa Gasperowicz, Rachel Andrew, Ken Pascal, Matthias Rohmer 님께 감사드립니다. 개별 패턴의 작성자인 해리 테오둘루, 토니 콘웨이, 팔란스 리아오, 세실리아 콩, 프랑수아 보퍼트, 조 메들리와 같은 개별 패턴 작성자의 도움이 없었다면 전체 패턴 프로젝트를 실행할 수 없었을 것입니다.