클립보드 패턴, 파일 패턴, 앱 패턴을 비롯하여 멋진 앱을 위한 멋진 새 패턴 모음을 살펴보세요.
차세대 동영상 편집 앱, 중독성 있는 워드 게임, 미래의 온라인 소셜 네트워킹 앱 등 무엇을 빌드하든 항상 몇 가지 기본 구성요소가 필요합니다.
- 동영상 편집 앱을 사용하면 사용자가 수정된 동영상을 저장할 수 있습니다.
- 게임에서 사용자가 친구와 게임 진행 상황을 공유할 수 있습니다.
- 온라인 소셜 네트워킹 앱에서는 사용자가 게시물에 이미지를 붙여넣기할 가능성이 높습니다.
이러한 패턴을 실현하는 보편적인 방법이 없음
이는 이러한 패턴의 몇 가지 예일 뿐이며 더 많은 패턴이 있습니다. 하지만 이 모든 방법에는 공통점이 하나 있습니다. 이를 실현하는 보편적인 방법은 없습니다.
진행 상황 공유
예를 들어 일부 브라우저는 Web Share API를 구현하지 않으므로 경우에 따라 트위터의 웹 인텐트와 같은 다른 접근 방식이나 클립보드에 복사하는 방식(Web Share API가 구현되지 않은 경우 Wordle에서 선택한 접근 방식)으로 대체해야 합니다. 휴, 간신히 맞췄습니다.
Wordle 471 6/6
⬛⬛⬛⬛🟨
🟩⬛⬛⬛🟨
🟩🟩🟩⬛⬛
🟩🟩🟩⬛⬛
🟩🟩🟩🟩⬛
🟩🟩🟩🟩🟩
파일 저장
저장과 관련하여 가장 일반적인 접근 방식은 파일 시스템 액세스 API를 사용하는 것입니다. 그러면 FileSystemFileHandle가 생성되므로 이를 통해 실제 저장, 수정, 저장 흐름을 구현할 수 있습니다. 다음으로 좋은 방법은 기존 <a download>로 대체하는 것입니다. 이 방법을 사용하면 사용자는 데이터를 저장할 수 있지만 다운로드할 때마다 새 파일이 생성되는 단점이 있습니다. 따라서 my-video.mp4, my-video (1).mp4, my-video (2).mp4 등이 생성됩니다.
이미지 붙여넣기
시작 예시를 마무리하겠습니다. 일부 브라우저에서는 웹 앱에 이미지를 붙여넣는 기능을 지원하지 않으므로 드래그 앤 드롭 API를 사용하거나 파일 선택 도구를 표시할 수 있습니다. Async Clipboard API만큼 우아하지는 않지만 적어도 작동합니다.
새로운 패턴
이제 새 패턴 섹션은 다음과 같습니다.
클립보드 패턴
모든 종류의 항목 복사 및 붙여넣기와 같이 시스템 클립보드와 관련된 모든 항목에 관한 클립보드 패턴
파일 패턴
파일 및 디렉터리와 관련된 모든 작업(저장, 열기, 드래그 앤 드롭, 수신 또는 공유)에 관한 파일 패턴
웹 앱 패턴
앱 바로가기 제공, 백그라운드에서 주기적으로 데이터 동기화, 앱 배지 표시 등 고급 앱 기능과 관련된 모든 항목에 관한 웹 앱 패턴
의견
이 패턴이 멋진 앱을 만드는 데 도움이 되기를 바라며 의견을 보내주시기 바랍니다.
@ChromiumDev에 트윗하거나 문제를 신고하여 의견을 제공할 수 있습니다. 두 경우 모두 @tomayac 태그를 지정하여 제가 볼 수 있도록 하세요.
감사의 말씀
패턴 검토 및 수정에 도움을 주신 조 미들리님께 감사드립니다. 피트 르페이지, 에바 가스페로비치, 레이첼 앤드류, 켄 파스칼, 마티아스 로머님께서 이 기능을 출시할 수 있도록 기술 및 조직적인 지원과 격려를 제공해 주셔서 감사합니다. 개별 패턴의 저자인 해리 테오둘루, 토니 코니웨이, 팔라네스 랴오, 세실리아 콩, 프랑소와 보포르, 조 미들리의 도움이 없었다면 전체 패턴 프로젝트를 완성할 수 없었을 것입니다.