내일배움캠프 12일차 TIL - 웹 페이지 만들기

Sunny·2024년 1월 5일
0

오늘은 슬슬 개인과제에 손을 대 보려고 한다.
일단 구상을 좀 해 보고 되는 데까지 틀을 잡아 보도록 하겠다.

무엇을?

우선 예제는 TMDB에서 영화 정보를 가져오고 있지만,
개인적으로 관심이 있는 분야의 api를 사용해도 된다고 한다.

영화에 대해서는 잘 모른다.
물론 필수 조건만 겨우 맞추고 제출하게 될 수도 있겠지만,
만약 여유가 있는데도 좋은 아이디어가 없어서 못 넣는다면 억울하지 않은가!

그래서 API를 좀 찾아본 결과,
이걸 사용할까 한다.

https://pokeapi.co/
(너무 어려우면 포기할 수도 있다.)

정보 카드리스트 UI 구현

제목: 이름
내용요약: 도감설명
이미지: 사진
평점: 타입

클릭 시 도감번호를 나타내는 alert창 띄우기

검색 UI

이름으로 검색

을 목표로 해서 페이지를 구성해 보자.

같은 API를 사용한 예제를 몇 개 살펴보았는데
양이 방대해서인지 검색이나 로드에 시간이 많이 걸린다는 것 같다.
이런 경우에는 혹시 세대를 한정할 수 있는지 알아봐야겠다...

+. 추가 사항

이 API는 포켓몬 외에도 도구나 엔카운터 등 활용할 수 있는 정보가 상당히 많은 것 같다.
이걸 활용해서 단순한 도감이 아닌 더 재미있는 기능을 넣어보고 싶다.

진행

폰트 정하기

아름다운 폰트는 마음을 편안하게 한다.
강의에서 사용했던 Google Font는 선택의 폭이 좁은 것 같아 이번엔 눈누를 사용하기로 했다.
https://noonnu.cc/

개인적으로 폰트를 고를 때는 폰트가 사용될 곳과 내고 싶은 분위기를 고려해서 시간을 충분히 들이는 편이다.
이번에는 기본적인 틀이 도감인 만큼 글자가 많아도 피로하지 않도록 가독성이 좋아야 하고, 그러면서도 딱딱하지 않은 분위기를 내고 싶다.
아니면 규모를 줄일 경우에는 그에 맞게 픽셀 폰트를 써도 좋을 것 같다.
물론 개인적인 감상과 방문자의 생각이 일치할지는 모르는 일이기에 일정부분 자기만족이긴 하다.

픽셀 부문

후보1:
램체
GB 시절의 감성을 느낄 수 있는 것 같아서 좋다.

후보2:
갈무리
아예 닌텐도 폰트에서 영감을 얻은 폰트이다.

후보3:
PF스타더스트
상당히 조형이 예쁘게 되어 있다고 생각한다.

고딕 부문

후보1:
둘기마요고딕
이렇게 부드러우면서도 균형잡힌 고딕체가 좋다.

후보2:
수트
하지만 글자를 죽 나열하고 싶다면 이 정도의 정갈함이 필요하지 않나 싶기도 하다.

후보3:
둘 사이쯤을 찾고 싶은데 어렵다.

오늘은 눈이 빠질 것 같기에 내일부터 본격적으로 시작하도록 하겠다.

0개의 댓글