블로그
더욱 견고한 타입스크립트
타입스크립트로 전환할 때 일단 귀찮아서 any로 처리해뒀던 블로그 JSON 구조를 interface로 제작하기 시작했습니다.
또한 return이 있는 함수들은 무엇을 return 해야 하는지 표시도 하는 등, 좀 더 깐깐한 검사를 할 수 있도록 업데이트하는 중입니다.
헤더 디자인 업데이트
제목 등을 아래로 내리고, 배경 불투명도를 0.5에서 1로 올리고, 배경에 그래디언트를 추가해 글자가 보이게 업데이트했습니다.
이미지 자체를 통째로 반투명으로 만든 것보다 디자인은 나아 보이는데, 시인성이 떨어질까 걱정이긴 합니다.
PHP 오류 수정
PHP Intelephense란 VS Code 익스텐션을 추가해 PHP 디버깅(워드프레스도 지원), 포매팅이 가능해졌는데, 생각보다 제가 큰 실수를 하고 있었습니다.
프로젝트 SPA를 진행할 때 JSON으로 댓글 리스트를 출력하기 위해 만든 class에서, $this->$foo같은 코드를 작성해뒀습니다.
워드프레스 테마 제작하면서 $this->foo같은 걸 굉장히 많이 쓰면서도 저게 이상하단 걸 생각도 안 하고 있었네요.
아니 오류라도 났으면 대번에 알았을 텐데 왜 아무런 오류도 안 났을까요…
PHP도 JS처럼 좀 인자한 언어 같습니다. 세미콜론엔 좀 깐깐하지만요.
행간
헤더와 글 목록에 넣은 글 설명의 행간이 꽤 좁아 글을 읽기 힘들었습니다.
글 설명을 빼면 뭔가 허전한 느낌이라 자리 채우는 용도로 넣어뒀는데, 읽지도 못할 글이 들어가 있을 필요는 없다고 생각해 행간을 늘려 가독성을 높였습니다.
헤딩 글자 크기
헤딩 글자 크기를 다시 조정했습니다.
기존엔 0.2 rem 씩 차이 나게 해뒀더니 한 단계 차이 나는 것들은 한눈에 파악이 잘 안 되더라고요.
- h2 : 2rem
- h3 : 1.75rem
- h4 : 1.45rem
- h5 : 1.2rem
- h6 : 0.85rem
아이콘 업데이트
구독 아이콘을 업데이트했습니다. 기존엔 구독 시 종 색깔만 노란색으로 변경했는데, 이젠 종이 울리는 효과까지 추가됩니다.
최상단으로 스크롤 하는 버튼도 화살표에서 V자 모양(chevron)으로 변경했습니다.
Material 아이콘, Fontawesome 아이콘, icomoon 아이콘, 제작한 아이콘 등을 섞어 쓰다 보니 통일성이 좀 떨어지는 느낌이라 날 잡고 하나로 합쳐야 하나 싶습니다.
Readme 업데이트
예전엔 Readme가 없으면 허전하니 그냥 This theme is awesome!!이란 헤딩만 추가해뒀었는데, 이제 다소 난잡할 수 있는 사용법을 조금 추가하는 중입니다.
Windows에서 핀볼이 사라진 계기가 64비트 시스템에서 공이 안 보이는 버그가 있는데 코드에 주석이 하나도 없어서 그냥 삭제됐단 걸 보면, 혹시 제가 가버렸을 때 이 테마도 불친절함 때문에 버려질 가능성이 농후해 보여서요.
1주일 이상 컴퓨터나 휴대폰에 접속하지 않으면 Github 레포지토리를 공개로 돌려버리는 스크립트도 짜볼까 생각 중입니다.
기타
- 스크롤 인디케이터를 다시 제거했습니다. 곰곰이 생각해보니 얘가 왜 필요한지 모르겠네요.
- 홈 화면에 배너 제외 9개의 최근 글을 표시하게 업데이트했습니다.
- CSS 선택자를 조금 최적화했습니다.
- single.php 등에서 태그를 출력하기 전 태그가 있는지 검사부터 진행하게 업데이트했습니다.
About IU
로더 추가
아이유 싸인 펜툴로 비슷하게 그리고 SVG 애니메이션 활용해 만들어봤습니다.
별건 아니고 예쁘다고 자랑하려고 올려봅니다.
필모그래피 업데이트
예정작은 쓸만한 사진이 딱히 없어 업데이트를 어떻게 해야 하나 고민했는데, 인스타에 귀여운 사진이 올라와 바로 업데이트했습니다.
썸네일 제작기
최근에 올린 글 10개 중 5개에 제작기로 만든 썸네일을 쓸 만큼 애용 중입니다.
단색 배경에 이모지 추가해서 제목 적으니 예쁘더라고요.
이래저래 쓰다 보니 단점이 보여 업데이트해봤습니다.
- 글자를 두 줄 이상도 적을 수 있게 업데이트했습니다.
- 기본 크기를 700 * 700으로 변경했습니다(기존 500 * 500).
- 늘어난 크기에 맞춰 글자 크기도 64px로 늘렸습니다(기존 32px).
- jscolor를 제거하고 input[type="color"]로 변경했습니다.
