yujolog

Written by@yujo

📝 배우고 느낀 점을 기록하고 공유하는 블로그

UT(Usability Test)를 통해 찜꽁 프로젝트 UI/UX 개선하기

1. UT가 뭔가요? UT(Usability Test)는 사용성 테스트라고도 부릅니다. UT는 잠재 사용자들에게 테스트를 진행하여 제품을 평가하는 방법 중 하나입니다. 웹이나 앱이 사용하기에 충분한지, 개발자의 의도대로 사용되는지 확인하면서 제품의 사용성을 테스트 해볼 수 있습니다. 2. UT가 필요한 이유 애플리케이션을 개발하다보면 해당 앱에 매몰되어 …

SVG 기반의 에디터 프로젝트 개발기 - 3. 다각형 그리기

0. 프로젝트 정보 서비스 링크 : https://zzimkkong.com/ 저장소 링크: https://github.com/woowacourse-teams/2021-zzimkkong 1. 다각형을 그리기 구현 전 고민했던 부분 다각형 그리기 기능 이전에 구현했던 선과 사각형 그리기는 위와 같은 사이클로 진행되었습니다. 선과 다각형을 그리기 위해 필요한…

SVG 기반의 에디터 프로젝트 개발기 - 2. 맵 에디터의 뼈대 잡기 + 선, 사각형 그리기 기능

0. 프로젝트 정보 서비스 링크 : https://zzimkkong.com/ 저장소 링크: https://github.com/woowacourse-teams/2021-zzimkkong 1. 에디터의 뼈대 에디터를 작성하기 위해 먼저 에디터의 모양을 생각해야 했습니다. 논의 끝에 저희는 양쪽 끝에 여러 도구들을 사용할 수 있는 Toolbar들을 두고 가운…

[우테코]레벨4 글쓰기 미션 - 내가 꿈꾸는 프로그래머로서의 삶

내가 꿈꾸는 프로그래머로서의 삶 나는 왜 프로그래머가 되고 싶었을까? 프로그래밍을 공부하기로 마음먹은 건 전 직장에서 우연히 만나게 된 프로그래머가 정말 멋있어 보였기 때문이다. 당시 나는 연구소에 다니고 있었는데 건물 3층 높이의 거대한 연구 장비를 작은 노트북 하나로 제어하는 모습은 마치 마법처럼 느껴지기도 했다. 단순히 멋있어 보여서 시작한 프로그래…

SVG 기반의 에디터 프로젝트 개발기 - 1. 시작

0. 프로젝트 정보 서비스 링크 : https://zzimkkong.com/ 저장소 링크: https://github.com/woowacourse-teams/2021-zzimkkong 1. 서론 찜꽁 프로젝트를 진행하면서 가장 핵심적으로 생각했던 부분은 에디터 기능이었습니다. 프로젝트에 들어가는 여러 기능들 중 에디터 기능은 기존에 해보지 않았던 미지의 …

Gatsby.js와 Next.js 간단 비교

0. Gatsby.js와 Next.js 블로그를 만들기 위해 사용할 툴을 찾아보던 중 Gatsby와 Next를 두고 고민에 빠졌다. 두 프레임워크 모두 튜토리얼을 진행하면서 닮은 듯 다른 두 프레임워크의 차이점을 정리하기 위해 글을 작성해 보기로 했다. 1. Gatsby.js 1-1. Gatsby 소개 Gatsby is a React-based open-…

SVG(Scalable Vector Graphics) 톺아보기

1. 서론 SVG는 벡터 기반의 XML 포맷을 가진 그래픽입니다. 벡터 파일 형식을 가지고 있기 때문에 모든 사이즈에서 깔끔하게 렌더링 되며, , , 등 웹 표준과도 잘 동작하도록 설계 되었습니다. 백터 파일과 래스터 파일의 차이가 궁금하시면 아래 링크의 글을 참고하시면 좋을거 같습니다. 래스터 파일(JPG, PNG)와 벡터 파일(SVG)의 차이 2. …

래스터 파일(JPG, PNG)와 벡터 파일(SVG)의 차이

1. 서론 웹 서핑이나 개발을 하다 보면 JPG, PNG, SVG 등 다양한 이미지 파일 형식들을 만나게 됩니다. 이 파일들은 크게 래스터(비트맵) 파일과 벡터 파일로 분류할 수 있습니다. 2. 래스터(Raster) 파일 - PNG, JPG 등 래스터(Raster) 파일은 화소들을 모아 디지털로 이미지를 표시합니다. 화소들은 색상에 대한 정보를 가지고 있…

[우테코]레벨3 글쓰기 미션 - 팀 프로젝트가 나에게 남긴 것

팀 프로젝트가 나에게 남긴 것 내 생각, 각자의 생각, 모두의 생각 팀 프로젝트가 시작되고 7명의 팀원이 모두 모였다. 프로젝트 기획 발표를 보고 자신이 하고 싶은 프로젝트를 선택, 지원해서 모인 팀원들이었다. 하지만 발표에 프로젝트의 A부터 Z까지 모든 내용을 다루기에 5분은 너무 짧은 시간이었다. 발표에 포함되지 않은 내용들을 생각하며 머릿속에서 프로…

webpack plugin을 이용한 favicon, manifest 추가 방법

favicon 추가하기 1. HtmlWebpackPlugin 사용 HTMLWebpackPlugin에는 다음과 같은 옵션이 있습니다. 해당 옵션을 사용해 아래와 같이 을 등록할 수 있습니다. 등록 후 다음과 같이 정상적으로 favicon이 표시되는 것을 확인할 수 있습니다. build 된 HTML 코드를 확인해보면 다음과 같은 태그가 추가 된 것을 확…