피그마에서는 기본적으로 구글 웹폰트(Google Web Fonts)를 제공한다. 하지만 따로 다운로드하거나 유료로 구매해 로컬에 설치한 폰트를 쓰려면 약간의 세팅이 필요하다. 지금부터 피그마에서 로컬 폰트를 사용하는 방법을 알아보자! 폰트 다운로드우선 사용할 폰트를 다운로드한다. 예시로는 많이 사용되는 Pretendard 폰트를 기준으로 설명하겠습니다.https://cactus.tistory.com/306 PretendardPretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는cactus.tist..

문제민겸이는 로마 숫자를 보고 굉장히 흥미롭다고 생각했다. 그래서 민겸이는 새로운 수 체계인 민겸 수를 창조했다. 민겸 숫자는 0 이상의 정수 N에 대해 10N 또는 5 × 10N 꼴의 십진수를 대문자 M과 K로 이루어진 문자열로 표기한다. 10N 꼴의 십진수는 N + 1개의 M으로, 5 × 10N 꼴의 십진수는 N개의 M 뒤에 1개의 K를 이어붙인 문자열로 나타낸다. 즉, 아래 표처럼 나타낼 수 있다. 변환 전변환 후1M5K10MM50MK100MMM500MMK1000MMMM5000MMMK......민겸 수는 한 개 이상의 민겸 숫자를 이어붙여 만든다. 예를 들어, 민겸 수 MKKMMK는 MK, K, MMK의 세 민겸 숫자를 이어붙여 만들 수 있다. 민겸 수를 십진수로 변환할 때는, 1개 이상의 민겸 숫..

HTML 코딩을 하다 보면 , & 같은 특수문자를 직접 입력하기 어려운 경우가 많습니다.이런 기호들은 태그로 오인될 수 있어 HTML 특수문자 코드로 치환해서 작성해야 하죠. 매번 외우기는 어렵고, 그때그때 검색하기도 귀찮아서 자주 사용하는 HTML 특수문자 50개를 한눈에 볼 수 있도록 표로 정리해봤습니다! 💡 HTML 특수문자 TOP 50 정리표 문자의미HTML 코드&앰퍼샌드&꺾쇠 괄호 (여는)<>꺾쇠 괄호 (닫는)>"큰따옴표"'작은따옴표'©저작권©®등록 상표®™상표™·중점 (•)·…줄임표…—긴 대시—–짧은 대시–×곱셈 기호×÷나눗셈 기호÷±± 기호±°도..

문제 상황: S3 + CloudFront로 배포 시 403 / 404 에러 발생React 프로젝트를 S3 + CloudFront 조합으로 배포했는데, 루트 경로 /는 잘 열리지만, 사용자가 브라우저 주소창에 다음과 같은 경로를 직접 입력하거나 새로고침을 하면 에러가 발생한다.예시)https://cocomu.co.kr/loginhttps://cocomu.co.kr/abouthttps://cocomu.co.kr/user/123발생하는 에러❌ 403 Forbidden❌ 404 Not Found 원인: SPA와 정적 서버의 라우팅 방식 차이React는 대표적인 SPA(Single Page Application) 라이브러리이다.SPA는 단 하나의 HTML 파일(index.html)을 기반으로 동작하고, 모든 페이..

우리 팀은 코코무 프로젝트를 함께하며 작지만 반복되는 불편함들을 자주 마주했습니다. 매번 같은 내용을 공지해야 하는 번거로움, 콘솔 에러를 검색하느라 흐름이 끊기는 순간들처럼 사소하지만 쌓이면 꽤나 피로한 문제들이었죠. 프로젝트가 잠시 숨 고르기에 들어간 지금, 그동안 미뤄뒀던 아이디어들을 실현해보기로 했습니다. 이번 글에서는 우리가 어떤 문제를 겪었고, 이를 어떻게 해결했는지에 대한 개발 과정을 소개해보려 합니다. 디스코드 알림 봇 – 격일 스크럼 알림, 이젠 자동으로MVP 개발 이후 팀원들도 각자 다른 작업을 병행하게 되면서 우리 팀의 협업 방식에 조금 변화가 생겼습니다. 매일 오전 10시부터 오후 5시까지 러쉬아워에 함께 집중하던 방식에서 벗어나 이제는 격일로 스크럼을 통해 각자의 진행 상황과 다음..

문제상근이의 여동생 상냥이는 문방구에서 스티커 2n개를 구매했다. 스티커는 그림 (a)와 같이 2행 n열로 배치되어 있다. 상냥이는 스티커를 이용해 책상을 꾸미려고 한다. 상냥이가 구매한 스티커의 품질은 매우 좋지 않다. 스티커 한 장을 떼면, 그 스티커와 변을 공유하는 스티커는 모두 찢어져서 사용할 수 없게 된다. 즉, 뗀 스티커의 왼쪽, 오른쪽, 위, 아래에 있는 스티커는 사용할 수 없게 된다.  모든 스티커를 붙일 수 없게된 상냥이는 각 스티커에 점수를 매기고, 점수의 합이 최대가 되게 스티커를 떼어내려고 한다. 먼저, 그림 (b)와 같이 각 스티커에 점수를 매겼다. 상냥이가 뗄 수 있는 스티커의 점수의 최댓값을 구하는 프로그램을 작성하시오. 즉, 2n개의 스티커 중에서 점수의 합이 최대가 되면서 ..

문제해커 김지민은 잘 알려진 어느 회사를 해킹하려고 한다. 이 회사는 N개의 컴퓨터로 이루어져 있다. 김지민은 귀찮기 때문에, 한 번의 해킹으로 여러 개의 컴퓨터를 해킹 할 수 있는 컴퓨터를 해킹하려고 한다. 이 회사의 컴퓨터는 신뢰하는 관계와, 신뢰하지 않는 관계로 이루어져 있는데, A가 B를 신뢰하는 경우에는 B를 해킹하면, A도 해킹할 수 있다는 소리다. 이 회사의 컴퓨터의 신뢰하는 관계가 주어졌을 때, 한 번에 가장 많은 컴퓨터를 해킹할 수 있는 컴퓨터의 번호를 출력하는 프로그램을 작성하시오. 입력첫째 줄에, N과 M이 들어온다. N은 10,000보다 작거나 같은 자연수, M은 100,000보다 작거나 같은 자연수이다. 둘째 줄부터 M개의 줄에 신뢰하는 관계가 A B와 같은 형식으로 들어오며, "..

아이디어의 시작개발을 하면서 가끔 실없는 생각을 하곤 했다.“한국어가 전 세계 공통어라면, 코딩도 한국어로 하면 얼마나 좋을까.”“최소한 에러 메시지라도 한국어로 떴으면 좋겠는데...” 그러던 중, 코코무 프로젝트를 진행하면서 팀원들과 주고받은 무심한 한마디가 머릿속에 깊이 남게 되었다. 개발 중에는 늘 다음과 같은 흐름을 반복한다.에러 발생 → 원인 검색 or GPT에게 질문 → 수정 우리 팀도 이 루틴 속에서 개발을 이어가고 있었고, 어느 날 팀원 중 한 명이 툭 던지듯 말했다."에러 뜨면 콘솔 아래에 GPT가 자동으로 분석해서 알려주면 좋을 것 같지않아요? 귀찮게 복붙도 안해도 되고.." 그때는 모두가 농담처럼 웃고 넘겼지만, 나는 계속해서 그 말이 머리에 맴돌았다. 생각해보면, 에러 메시지가 영어..

시작하며코코무 팀에서는 격일로 디스코드에 스크럼 알림을 보내고, 그 메시지에 팀원들이 스레드로 스크럼을 작성하는 방식으로 협업을 이어가고 있었다.이 알림은 팀원 한 분이 수동으로 직접 작성하고 있었는데, 매번 직접 시간을 맞춰 알림을 올리는 게 번거롭고 귀찮을 뿐만 아니라, 때로는 바쁜 일정 때문에 잊어버리는 일도 종종 생겼다. 그래서 자연스럽게, “이걸 왜 사람이 직접 하지?”라는 생각이 들었고, 그 수고를 덜어줄 자동 알림 봇을 직접 만들게 되었다. 초기 세팅하기디스코드 봇을 만들고 실행하기 위해서는, 이 봇이 누구의 소유인지를 디스코드 측에 등록하는 과정이 필요하다.이를 위해 디스코드 개발자 포털에서 봇의 Token(토큰)을 발급받아 코드에 입력해야 한다. 먼저 아래 링크에 접속해 개발자 포털로 이..

문제국가의 역할 중 하나는 여러 지방의 예산요청을 심사하여 국가의 예산을 분배하는 것이다. 국가예산의 총액은 미리 정해져 있어서 모든 예산요청을 배정해 주기는 어려울 수도 있다. 그래서 정해진 총액 이하에서 가능한 한 최대의 총 예산을 다음과 같은 방법으로 배정한다. 모든 요청이 배정될 수 있는 경우에는 요청한 금액을 그대로 배정한다.모든 요청이 배정될 수 없는 경우에는 특정한 정수 상한액을 계산하여 그 이상인 예산요청에는 모두 상한액을 배정한다. 상한액 이하의 예산요청에 대해서는 요청한 금액을 그대로 배정한다. 예를 들어, 전체 국가예산이 485이고 4개 지방의 예산요청이 각각 120, 110, 140, 150이라고 하자. 이 경우, 상한액을 127로 잡으면, 위의 요청들에 대해서 각각 120, 110..