6월 4주차 기록

June 30, 2024 • ☕️ 3 min read

weekly

배워가기

`<input>` 의 `capture` 속성

type이 file이고, accept 속성이 정의되어있을 때, capture를 사용해 카메라나 마이크와 같은 미디어 사용을 요청할 수 있다.

사용할 수 있는 accept 속성 값은 다음과 같다.

image/*
video/*
audio/*

capture 속성값에는 두 가지가 있다.

user: 전면 카메라 우선 사용
environment: 후면 카메라 우선 사용
- cf) 모바일에서만 지원하기 때문에 데스크탑에서 사용 시 파일 선택 창이 열린다.

카메라 기능 웹으로 구현하기 HTML5의 getUserMedia API를 사용한다.

이것저것 모음집

기타공유

Prompt API for Gemini Nano가 탑재된다고 합니다

Chrome에 Prompt API for Gemini Nano가 탑재된다고 한다. (아직은 Chrome Canary에서만 사용 가능)

Copy

const canCreate = await window.ai.canCreateGenericSession()

if (canCreate !== "no") {
    const session = await window.ai.createTextSession();
    const stream = session.promptStreaming("Tell me a joke!")
    for await (const chunk of stream) {
        console.log(chunk)
    }
    session.destroy()
} else {
    console.error(" can't create generic session", canCreate)
}

Ref https://afficone.com/blog/window-ai-new-chrome-feature-api/

Figma Config 2024

Figma Design에 AI 사용
- 코파일럿처럼 현업에서 디자이너분들의 디자인을 돕는 역할을 한다.
- 토이 프로젝트 같은 간단한 프로젝트에서는 디자이너가 필요 없어질 수도.
개발 모드에 대한 새로운 시각
- ready for dev 기능으로 변경사항을 명시적으로 표시해줄 수 있다.
- 디자인과 다르다고 해서 확인해보면 언젠가 디자인이 바뀌어 있어서 싱크가 안맞는 경우가 많았는데 명시적으로 변경된 view를 확인할 수 있어서 좋아졌다.
Figma Slides로 아이디어 발표
- 슬라이드 기능이 추가되었다.
Figma Design의 새로운 모습
- 반응형 프로토타입 뷰어가 생겨서 반응형 화면 제작 및 확인이 쉬워졌다.