이미지 검색 서비스를 만드는데 이미지를 어떻게 가져올지에 대한 고민을 하고 있습니다.

백엔드가 없어 데모 버전에 사용할 무료 API를 알아보았습니다.

규모가 크고 이미지 품질도 괜찮은 3가지 웹사이트의 API를 비교해보겠습니다.

- Unsplash

- Pixabay

- Pexels

Unsplash API✅

https://api.unsplash.com/
https://api.unsplash.com/search/photos/

• 이미지 제공
• 제한 : (데모)시간당 50개 요청 (프로덕션)시간 당 5000개 요청
  • 다른 API와 달리 핫링킹만 사용, 추적이 용이하기 때문이다.
  • 페이지네이션 : 기본 10개, 최대 30개

Pixabay API

https://pixabay.com/api

• 이미지/비디오 제공
• 제한 : 분당 100개 요청, 핫링킹(Hotlinking) 금지
• 쿼리 제한 : 100자 이하 “yellow+flower”

Pexels API

https://api.pexels.com/v1
https://api.pexels.com/videos // 비디오

• 라이브러리/이미지/비디오 제공
• 가이드라인
  • Photos provided by Pexels 또는 로고 표기
  • 사진 작가 이름 표기
  • 요청 제한 : 시간당 200개, 월 20,000개
• 페이지네이션 : 요청 1개 당 최대 80개

정리

저는 요청 제한은 적지만 고품질의 이미지를 제공하고, 프론트엔드에서 핫링킹을 사용할 수 있는 Unsplash를 최종 선택했습니다.

이번에 핫링킹(hotlinking)에 대해 알게 되었습니다. API 문서에서 hotlinking 내용을 반드시 확인하시고, 관련 내용이 없다면 핫링킹을 사용하지 않는 것이 안전하겠습니다.

백준, 프로그래머스에서 풀 수 있는 문제입니다.

🔎 힌트
- DP를 이용해보세요.
- BottomUp 방식을 이용해보세요.

풀이

▼

BottomUp 방식 풀이

TopDown 방식은 아래에서 위로 이동하면서 작은 문제를 해결하는 방식입니다.

배열의 첫 번째 값(array[0][0])이 답이 됩니다.

function solution(triangle) {
	const array = triangle.map(row => [...row]);
	
    for (let i = array.length - 2; i >= 0; i--) {
        for (let j = 0; j < array[i].length; j++) {
            const left = array[i+1][j];
            const right =  array[i+1][j+1]
            
            array[i][j] += Math.max(left, right);
        }
    }
    return array[0][0];
}

TopDown 방식 풀이

TopDown 방식은 위에서 아래로 이동하면서 작은 문제를 해결하는 방식입니다.

맨 위 작은 삼각형은 초기화해주었습니다. 마지막 배열의 최댓값이 답이 됩니다.

function solution(triangle) {
    const array = triangle.map(row => [...row]);
    
    array[1][0] = array[0][0]+array[1][0];
    array[1][1] = array[0][0]+array[1][1];

    for (let i = 2; i < array.length; i++) {
        for (let j = 0; j < array[i].length; j++) {
            if (j === 0) {
                array[i][j] += array[i-1][j];
                continue;
            }
            if (j === array[i].length - 1) {
                array[i][j] += array[i-1][j-1];
                continue;
            }
            const leftParent = array[i-1][j-1];
            const rightPerent =  array[i-1][j];
            array[i][j] += Math.max(leftParent, rightPerent);
        }
    }
    return Math.max(...array[array.length - 1])
}

TopDown 방식의 한계

프로그래머스 채점은 효율성 테스트6에서 시간 초과가 발생했습니다.

BottomUp 방식에 비해 조건문을 더 활용하는 문제가 있었습니다.

아래 방법으로 해결했습니다.

• 반복문 내부에서 조건문이나 계산을 최소화한다.
• inplace 수정 : 원본 배열(triangle)을 직접 수정하지 않고 복사해서 사용한다.
  *inplace는 원본 데이터를 새로운 메모리에 할당하지 않고 직접 조작하는 것을 말한다.

📍 이중 배열 복사하기

inplace를 해결하기 위해 깊은 복사를 사용했습니다.

const array = triangle.map((row) => [...row]);

이 문제는 BottomUp 방식을 사용하는 것이 성능에 더 유리했습니다.

반복문 내 조건 분기를 최소화하는 것이 중요했습니다.

🔗 문제 바로가기

백준 https://www.acmicpc.net/problem/1932

프로그래머스 https://school.programmers.co.kr/learn/courses/30/lessons/43105

🔗 레퍼런스

[프로그래머스] LV.3 정수 삼각형 (JS)

사람들은 습관적으로 버튼을 누릅니다. 버튼의 위치에 따라 의도치 않게 취소 버튼을 눌러 작업을 반복하는 일이 생길 수 있습니다. UX에서는 버튼 위치를 어떻게 선택하는지 두 가지 관점을 소개해 보겠습니다.

이 글을 읽을 때 "특정 행동을 유도하는 버튼"에 기준을 두면 이해하는 데 도움이 될 것입니다. 특정 행동은 다음에 수행할 행동일 수 있고 상대적으로 중요한 작업일 수 있습니다. 이 글에서는 이 행동 유도 버튼을 작업 버튼이라고 명칭하겠습니다.

작업 버튼의 위치를 결정하는 데는 두 가지 관점이 있습니다.

• 인지 관점
• 인지심리학 관점

이 두 가지 관점에 대해 자세히 알아보겠습니다.

1. 인지 관점

'인지'는 버튼을 보고 이해한 다음 행동을 결정하는 것을 말합니다. 저는 인지심리학보다 좀 더 '직감적'인 사고 과정으로 이해했습니다.

시선의 흐름=글의 흐름
한국은 글을 왼쪽에서 오른쪽으로 읽습니다. 자연스럽게 왼쪽에서 오른쪽으로 시선이 이동하기 때문에 중요한 작업버튼을 시선이 먼저 닿는 왼쪽에 두는 것입니다. 그렇게 하면 [취소] 버튼을 읽지 않아도 [확인] 버튼을 누를 수 있게 됩니다.
*이 내용은 뒤에서 다룰 인지심리학 관점에서는 다르게 활용됩니다.

말의 순서: 선 긍정-후 부정
말을 하거나 생각을 할 때 '선 긍정-후 부정'의 순서(예: 할까, 말까?)이기 때문에 긍정 버튼을 먼저 배치한다고 합니다.

인지 관점에서는 작업버튼을 '왼쪽'에 둡니다.

2. 인지심리학 관점

'인지심리학'은 인지 과정에서 뇌가 어떻게 정보를 처리해서 행동을 결정하는 것을 연구하는 학문입니다. 저는 직감 뒤에 오는 '뇌의 정보처리 과정'으로 이해했습니다.

시선의 흐름=글의 흐름
시선의 흐름이 왼쪽에서 오른쪽으로 흐르기 때문에 자연스럽게 마지막에 작업버튼을 오른쪽에 둡니다. 인지 관점과 이유는 동일하지만, 확인-취소 버튼을 배치했을 때 확인→취소→확인으로 시선이 다시 이동하기 때문에 시선의 이동이 불필요하다고 본 것입니다.

Right의 중의적 의미
오른쪽을 영단어로 Right라고 씁니다. Right는 긍정의 의미(옳은)와 오른쪽을 의미합니다. 따라서 오른쪽에 긍정적인 버튼을 두기도 합니다.

스위치의 위치
스위치의 위치를 보면 OFF가 왼쪽이고 ON이 오른쪽입니다. 그 배치와 동일하게 오른쪽에 버튼을 배치합니다.

다른 컴포넌트의 순서(예: Pagination)
다른 컴포넌트를 예로 들어보겠습니다. 이전 버튼(<)은 왼쪽에, 다음 버튼은 오른쪽(>)에 위치합니다. 따라서 이전 작업버튼은 왼쪽, 다음 작업버튼을 오른쪽에 두는 것입니다.

엄지 영역(Thumb Zone)
개인적으로 모바일 OS에서 인지심리학을 차용하는 이유에 대해 생각해 보았습니다. 모바일 기기에는 엄지손가락이 이동하는 영역을 엄지 영역(Thumb zone)이라고 합니다. 엄지 영역에 주요 작업버튼들을 위치시키면 좋습니다. 네비게이션 바가 밑에 있는 경우가 많은 이유도 그중 하나입니다. 그래서 다음 작업이 엄지에 쉽게 닿을 수 있기 때문에 취소 버튼을 멀리 두었을 가능성도 생각해 보았습니다.

버튼 위치가 헷갈리는 이유는 어찌 보면 당연합니다. OS 별로 다른 관점을 적용하고 있기 때문입니다.

• 윈도우는 작업버튼을 왼쪽에 배치합니다. 예를 들어, 확인-취소 순으로 배치합니다.
• 애플, 구글은 작업버튼을 오른쪽에 배치합니다. 예를 들어,  취소-확인 순으로 배치합니다.

저는 현재 프로젝트가 웹 기반이기 때문에 인지 관점을 사용하여 왼쪽에 작업버튼을 배치했습니다. 앱 기반이라면 인지심리학 관점에서 오른쪽에 작업버튼을 두었을 것입니다.

선택의 조언

하나로 통일하면 좋겠지만 두 가지 관점을 모두 사용하고 있는 상황에서 맞고 틀린 것은 없다고 생각합니다. 서비스의 특성에 따라 직감을 따르는 인지 관점으로 할지, 뇌의 정보 처리 과정을 따르는 인지심리학 관점으로 할지 선택하면 좋겠습니다. 그럼에도 웹, 모바일 유저를 모두 고려할 경우 고민이 될 수 있습니다. 그럴 때는 어떤 관점을 선택하든 중요도에 따라 버튼 컬러를 다르게 해서 시각적으로 중요도를 분리하면 더 좋을 것 같습니다. 하나의 요소로만 문제를 해결하지 않고 다른 요소도 복합적으로 사용한다면 더 좋은 UX를 만들 수 있을 것이라고 믿습니다.

🔗 레퍼런스

요즘IT 버튼 위치는 어떻게 결정해야 할까요?

사물궁이 ‘확인-취소 vs 취소-확인’ 버튼 순서의 기준은?

👋

[버튼 위치 결정하기]

도움이 되셨길 바래요!

피그마 웹에서 기본으로 제공되는 폰트는 Google fonts인데요. 기본 글꼴 외에 다른 글꼴을 사용하고 싶은 경우에는 별도의 설정이 필요합니다.

로컬 폰트를 사용하는 두 가지 방법

피그마에서 로컬 폰트를 사용하기 위해서는 두 가지 방법 중에 선택하시면 됩니다.

1. <피그마 데스크톱 앱> 설치하기
2. <글꼴 설치 프로그램> 설치하기

피그마 데스크톱 앱을 설치하면 Figma font helper가 포함되어 있기 때문에 2번을 건너뜁니다.

저는 데스크톱 앱을 사용하지 않기 때문에 <웹에서 로컬 폰트를 사용하는 방법>을 소개하겠습니다.

그 이전에 안내사항을 읽어주시고 설정에 참고하시길 바랍니다.

⚠️ 로컬 폰트 관련 안내사항
- 공유된 팀 사용자의 경우, 모든 팀원이 동일한 로컬 폰트를 컴퓨터에 설치해주셔야 합니다.
- 참고로, 피그마는 .TTF .OTF 폰트 파일만 지원합니다.
- 피그마는 ChromeOS, Linux 운영체제의 기기에서는 로컬 폰트를 지원하지 않습니다. 기본 폰트를 사용해주세요.

[Windows] 로컬 폰트를 컴퓨터에 설치하는 방법
1. 폰트를 다운로드합니다.
2. C:\\Windows\\Fonts 위치에 폰트 파일을 붙여넣기하면 설치가 완료됩니다.

[피그마 웹] 글꼴 설치 프로그램 다운 받기

Figma 다운로드 페이지에서 [글꼴 설치 프로그램]을 OS에 맞게 다운로드합니다.

InstallFigmaAgent.exe 파일을 열어 [Install] 버튼을 클릭하면 설치가 진행됩니다.

Figma 창을 다시 열면 이제 로컬 폰트를 사용할 수 있습니다.

👏 여기까지 잘 따라오셨다면 문제 없이 설치되셨을 거예요.

Missing fonts 에러

만약 Missing fonts 에러가 발생한 경우 몇 가지 팁을 알려드리겠습니다.

- 폰트가 잘 설치되었는지 확인해주세요.
   로컬 폰트가 잘 설치되었다면 다른 프로그램(예: 파워포인트)에서도 잘 보여야 합니다.
- 팀원과 동일한 폰트 파일을 설치해보세요. 버전이 맞지 않다면 충돌할 수 있습니다.

 [Windows] 글꼴 버전 확인하기
   [시작]-[설정]-[개인 설정]-[글꼴]에서 해당 글꼴을 검색하세요. 메타데이터의 [버전]을 확인해보세요.

👋

[웹에서 로컬 폰트 사용하기]

도움이 되셨길 바래요!

🔗 레퍼런스
[Figma 공식문서] Add a font to Figma design