정보
velca
벨바카
10주 (수정됨)
TailwindCSS의 Theme을 만들어주는 UIColors

나는 바퀴를 만드는 걸 좋아하는 사람이다.

내 손으로 한 땀 한 땀 만드는 게 좋고, 내가 만들어 냈다는 그 만족감이 좋다.

그래서 예전엔 디자인 시스템도 직접 구현하고 싶었는데 개발 원툴러가 으레 그렇듯 미적 감각이 부족하여 디자인 시스템 구현에 좌절을 겪곤 했다.

그러다가 TailwindCSS를 알게되고 지금은 TailwindCSS를 이용한 개발만 주로 한 덕분에 디자인 감각의 부족은 많이 해소가 되었지만 아직도 문제는 남아 있었다.

바로 색감의 문제!

TailwindCSS가 제공하는 색상 팔레트도 충분히 차고 넘치지만 가끔 커스터마이징 된 색이 쓰고 싶은데 내가 직접 색을 고르면 우중충하거나 너무 튀는 이상한 색으로 구성되기 일쑤였다.

그러던 도중 이 문제를 해결하기 위한 툴을 찾았는데...

더 보기
https://api.vel-ca.com/file/d78c82bf-364e-42ca-8caf-231f0623bf01.png
https://api.vel-ca.com/file/4a51117b-cc43-4d59-8383-47251ce896a4.png
+ 1
정보
velca
벨바카
10주 (수정됨)
무료 SVG 아이콘 모음, Lucide

프론트엔드 개발을 하다 보면 아이콘이 필요한 경우가 많다.

디자이너들은 직접 아이콘을 만들면 되겠지만, 나 같은 개발 원툴은 아이콘 같은 거 만들 줄도 모르고, 만들 줄 알더라도 디자인 감각이 없어서 원하는 예쁜 아이콘을 만드는 것도 쉽지 않다.

그래서 무료로 사용 가능한 아이콘을 많이 찾아 헤맸었는데 초기에는 구글의 머티리얼 아이콘을 사용했다가 TailwindCSS를 사용하며 Heroicons으로 넘어갔었고, 지금은 오늘 소개할 Lucide를 사용하고 있다.

Lucide를 사용하게 된 이유는 간단하다.

머티리얼 아이콘, Heroicons 보다 더 예쁘고 Heroicons의...

더 보기
https://api.vel-ca.com/file/2f91c785-449f-4fea-8a5d-7e2a0f587c29.png
https://api.vel-ca.com/file/75f51385-b4ca-4cd3-b27a-4063052c592c.png
+ 2
일상
velca
벨바카
10주
아내와 순천만국가정원을 다녀왔다

내 면허증은 15년이란 세월을 장롱에서 보냈다.

이 정도면 면허증이 장롱인지 장롱이 면허증인지도 구분하기 어려운 지경 😅

그렇게 내 면허증은 장롱과 하나가 되는 줄 알았는데 다행히 최근에 제 역할을 할 수 있게 되었다.

운전하는 꼴을 보면 다행인게 맞는 지는 모르겠지만 ㅎㅎ

여튼 운전 시작하기 전 까진 나는 가능하면, 진짜 가능하면 늙어 죽을 때 까지 직접 운전은 안 하고 싶었다.

겁나기도 하고 귀찮기도 하고.

그랬는데 언제나 늦게 배우면 푹 빠지게 되는 법.

옛말에 늦바람이 무섭고, 늦게 배운 도둑질이 무섭다는 말이 괜히 있는 게 아니다.

운전 시작한 지 두 달 정도 돼가는 것 같은데, 처음에는 여전히 운전이 하기 싫었지만 이제는 운전이 하고싶어 안달이 났다.

그래서 오늘도 아내를 꼬셔서 늦은 오후에 순천만국가정원까지 당일치기로 갔다왔다.

가는 동안 안전운행을 약속했지만 .. 안전운행은 나만 잘 한다고 되는 게 아닌 걸 😇

무사히 다녀오긴 했지만 중간에 심장...

더 보기
https://api.vel-ca.com/file/7371e83f-15e2-41c4-81d2-91e392a82b0e.jpg
https://api.vel-ca.com/file/377c5cf0-f1c0-4912-82f0-5ea3fc7644f1.png
+ 17
생각
velca
벨바카
10주 (수정됨)
블로그 광고의 미래를 상상해본다

블로그 다 읽었더니 “광고입니다”...‘뒷광고’ 손본다

네이버에서 정보를 찾기 위해 검색하다 보면 글 맨 하단에 가서 '이 글은 소정의 대가를 제공받고 작성되었습니다'아주 개같은 글이다 같은 표시를 보게 된다.

그 때마다 해당 글은 신뢰할 수 없는 정보라는 판단에 뒤로 가기를 누르고 다른 글을 찾기 일수였는데, 한 번 그런 표기가 적힌 상품은 어딜가도 광고성 글인 경우가 대부분이어서 진짜 리뷰를 찾기가 너무 어려웠다.

이 문제를 해결하기 위해 이번에 공정거래 위원회에서 블로그나 인터넷 게시물들의 광고성 정보 표시 지침을 개정한다고 한다.

현재는 광고 여부를 게시물 첫 부분 혹은 끝 부분에 표시하게 ...

더 보기
https://api.vel-ca.com/file/09657382-28bf-4bbc-b4fc-26b934fc8d22.png
일상
velca
벨바카
1일
나는 비견(比肩)입니다

1.

나는 비건(Vegan) 아니고 비견(比肩)이다. 오늘 저녁에 아내가 갑자기 공부를 한다길래 무슨 공부를 하냐 물었더니 사주 공부를 한다더라. 나는 관상은 믿으면서도 사주는 안 믿는다. 사람 얼굴에 따라 어느정도 정해진 운명이 있다는 건 유전적 형질에 따른 기질로 인해 내 기준 나름 신뢰가 가지만, 고작 태어난 날짜 때문에 운명이 정해진다는 건 좀 아닌 것 같기 때문이다.

그런데 오늘 아내가 본 사주는 무슨 용한 사주를 봤는지 신기하게 내 성향과 상당히 일치했다.

아내가 본 사주로 나는 비견(比肩)과 겁재(劫財)의 성향이 두드러진 사람이었다. 그 중 비견에 대한 설명이 상당히 인상적이었는데, 비견이 두드러진 사람은 독립적이고 배우길 좋아하고 경쟁에서 우위에 서려는 심리가 강하며 고집이 세다고 한다.

그 외에도 여러 특징들이 있었는데 아내도 나도 둘 다 보면서 이거 완전 나랑 같다며 이야기를 나눴다.

심지어 아내도 사주에서 분석한 성향이 상당히 들어맞아서 앞으로 ...

더 보기
일상
velca
벨바카
2일
애드센스 승인에 실패했다

1.

별로 희망적으로 생각하진 않았지만, 역시나 당연하게도 애드센스 승인에 실패했다.

관심을 가져 주셔서 감사합니다. 애드센스 전문가가 신청서를 검토한 결과 프로그램 기준을 충족하지 못한 부분이 있어 애드센스 이용 신청이 거부되었음을 알려 드립니다.

이래저래 알아보니 위와 같이 메일을 받은 경우는 소위 '답이 없는 상태'라는 글을 봐서 좀 심란해졌다.. 컨텐츠의 문제일 수도 있고 애드센스 중복 계정의 문제일 수도 있다는데, 우선 확인해보니 예전에 가입했던 애드센스 계정이 있어서 일단 계정 해지를 진행했다.

곧 다시 신청 해봐야겠다.

2.

어제 엄마, 아빠, 나, 아내, 동생, 동생 여친까지 여섯 명이서 담양에 놀러 갔다왔다. 아침 일찍부터 나서서 저녁 늦게 집에 올 수 있었는데 상당히 피곤했지만 그래도 가끔 이렇게 놀러간다고 생각하면 괜찮은 것 같다.

아내가 많이 힘들까봐 걱정했는데 아내는 의외로 괜찮은 듯 했고 다음에 덕유산도 함께 놀러가게 될 것...

더 보기
일상
velca
벨바카
4일 (수정됨)
나는 코 관상이 좋지 않다

1.

나는 관상을 믿는다. 예전에 '꼴'이라는 만화도 즐겨 봤었다. 그래서 관상학적으로 대충 어떤게 좋고 어떤게 나쁜지는 알고 있는데, 최근에 AI를 활용하면 관상을 더 제대로 알 수 있지 않을까 하는 생각에 Perplexity에 마의 상법에서 나오는 코 관상에 대해 물어봤다.

코 관상은 주로 재물운과 관련이 있는데 콧대가 곧고 코 끝이 두툼하며 양쪽의 콧방울이 있어야 재물운이 좋다고 한다. 실제로 부유한 사람들을 보면 코가 두툼한 사람들이 많다. 그런데 내 코는 Perplexity의 답변에 의하면 오히려 재물이 새어나가는 코랬다 🥲

나도 대충 코 관상이 좋은 편은 아니라는 걸 알고는 있었는데 AI한테 이런 답변을 들으니 약간 뼈 맞은 느낌. 그래서 문득 내가 하는 모든 것들이 사실 재물을 날려버리는 짓은 아닐까 하는 괜한 걱정까지 잠깐 했는데, 진짜 관상이 정확하다면 아마 아무것도 안 해도 재물을 날리게 되지 않을까 하는 생각도 들어서 그냥 하던 대로 하기로 했다....

더 보기
일상
velca
벨바카
5일 (수정됨)
나는 여전히 한국 주식을 한다

1.

원래 한국 주식을 했었는데, 최근 "한국 경제 전체에 베팅해보자!" 라는 마음으로 KODEX 200을 구매했다. 사실 베팅이라고 하기도 부끄러운게 자금이 많지 않아서 연습 삼아 1주 씩 사고 팔고 하고 있는데 이번 주 동안 약 1,400원 가량을 벌었다. 참 소소한 금액이지만 현재 주식 보유 수가 4주에 사고 팔고하면서 정리한 주식이 17만원 정도인 걸 감안하면 수익률이 그렇게까지 나쁘진 않은 것 같다.

주식은 원래 내릴 때 사야되는데 일반 기업들 같은 경우 회사가 망할 지도 모른다는 두려움 때문에 살 수가 없었다. 이미 몇 차례 말아먹기도 했고 🥲 여튼 그에 대한 대안으로 KODEX 200을 구매하게 된 건데, 망해도 한국 전체가 망한다고 생각하니 내려도 좀 더 맘 편하게 살 수 있는 듯 하다. 그래서일까? 이상하게 내가 단기적 고점이다, 저점이다 생각하고 사고 팔기 위해 걸어놨던 부분에서 대부분 매매가 일어났다. 그 동안 말아먹은 주식 경험이 도움이 된 걸까?...

더 보기
일상
velca
벨바카
6일 (수정됨)
부산 대신 근처 카페를 가기로 했다

1.

이번 주 토요일에 원래 부산을 가기로 했었다. 그런데 늦게 알아봤더니 버스도 애매한 시간대 밖에 없고, 당일 치기로 갔다 오려고 하니 마땅히 시간 쓰기도 어려워서 카페랑 갈 곳만 주구장창 찾아보다가 결국 포기했다. 그 대신 내일 저녁에 카페를 한 군데 가기로 했는데 아직 어디로 갈 진 모르겠다 😊

2.

아내는 놀라운 능력이 있다. 바로 노래 전주 1~2초만 듣고 제목 맞추기. 예전에 어떤 행사 보러 가서 비슷한 문제를 사회자가 낸 적이 있었는데 그때 아내는 거의 모든 곡을 다 맞췄었다.

그 놀라운 능력을 잊고 지내다가 오늘 내가 페퍼톤스의 Ready, Get, Set, Go!를 틀면서 아내보고 무슨 노래인지 맞춰보라고 했는데, 이번에도 기타 첫 음 치자마자 바로 노래 맞추는 걸 보고 깜짝 놀랬다 😲

예전에 싸이월드 배경음으로 했던 노래라 워낙 많이 들어서 안다고 하는데, 그래도 이 정도면 능력이라고 부를 만하다. 아내는 아무래도 노래에 대한 조예가...

더 보기
생각
velca
벨바카
1주

오늘 X에서 위와 같은 글을 보고 문득 자기 훈련이 궁금해졌다.

자기 훈련이란 무엇이냐? 최고의 AI Perplexity에게 물어보니 다음과 같은 답변을 받았다.

자기 훈련(self-discipline)은 "하고 싶든, 아니든, 해야 하는 일을, 해야 할 때 실행하는 능력"으로 설명됩니다. 이는 개인이 자신의 감정이나 충동을 조절하고, 장기적인 목표를 위해 단기적인 유혹을 극복하는 데 필요한 기술입니다.

음. 그냥 스스로를 통제하는 능력인가 보다.

Perplexity에게 들은 자기 훈련 방법은 생각보다 어려운 게 없다.

  1. 구체적인 목표 설정
    • 달성 가능한 작은 목표부터 시작하여 점진적으로 확장합니다.
    • 목표를 명확하게 정의하고 문서화합니다.
  2. 일상적인 루틴 만들기
    • 간단한 일상 습관부터 시작합니다 (예: ...
더 보기
https://api.vel-ca.com/file/e87032d9-004d-469c-b6fe-7918151009c7.png
개발
velca
벨바카
1주 (수정됨)
flutter_inappwebview 에서 포트원 결제 연동 시 발생한 문제 해결

현재 회사에서 flutter_inappwebview를 이용한 하이브리드 앱을 개발했고 운영하고 있다. 앱 내에는 포트원을 이용해 결제 시스템을 도입해놨는데, 최근 iOS 이용 고객으로 부터 결제가 안 된다는 문의를 받기 시작했다.

그런데 확인해보니 최근 뿐만 아니라 개발한 이래로 여태까지 iOS 앱에서 결제가 된 적이 없는 것 같았다.

현재 나는 개발용 아이폰이 없고, Mac Mini와 에뮬레이터만 이용해 개발하고 있기 때문에 아이폰에서의 테스트가 어려운 상황이라 Android 위주로 개발을 하고 있다. Android의 경우 비슷하게 결제 문제가 발생했었고 이를 해결하기 위해 Intent URL 처리를 해줬었는데 iOS는 해결이 안 됐었나보다.

여튼 부랴부랴 포트원에 문의해보니 Android와 달리 iOS는 Intent URL을 사용하지 않는다는 답변을 받았다. 대신 각 앱의 Custom scheme을 이용해 외부 앱을 열어야 한다는 말을 들었다.

이후 포트원 문서를 참조해가...

더 보기
생각
velca
벨바카
1주
키워드가 아니라 뭘 할 지가 먼저다

최근 큐레이팅 서비스에 대한 생각을 하게 되면서 막상 내가 큐레이팅을 할 만큼 전문성이 있는 분야가 딱히 없다는 생각을 했고, 그러다보니 여러 키워드들을 찾아보며 사람들이 어떤 것에 관심을 갖는 지 알아보았다.

그러다 문득, '어차피 그런 키워드들을 알아본다 해도 내가 모르는 분야의 일들인데 이게 의미가 있나?' 하는 생각을 하게 됐다.

고객의 관심사는 중요하다. 그러나 그 전에 내가 제공할 수 있는 서비스인지가 먼저다.

세상이 용접공을 많이 찾고 용접공이 돈이 된다고 해서 내가 무턱대고 용접을 할 수는 없다. 한 번도 해본 적도 없고 관심을 가져본 적도 없는데 용접을 한다고 해서 세상이 만족할 만한 서비스를 제공할 리 만무하다.

우선은 내가 무엇을 할 수 있는지 부터 차근차근 살펴보자.

그리고 내가 제공하기로 한 서비스 범위 내에서 고객들이 어떤 키워드들을 주로 찾는지 찾아보자.

개발
velca
벨바카
1주
Express.js 사용 시 sitemap.xml 동적으로 생성하기

드디어 블로그에도 사이트맵이 반영됐다.

블로그 개시 이후 네이버 웹마스터 도구와 구글 서치 콘솔에 사이트 등록을 해놨는데 구글은 모든 페이지가 정상적으로 수집되는 반면, 네이버는 메인 페이지 말고 수집이 안 되는 문제가 있었다.

robots.txt 도 문제 없고, 웹페이지 수집 요청을 해도 안 되고 해서 골치를 겪다가 사이트맵이 문제인가 싶어 사이트맵 등록을 부랴부랴 했는데 이게 문제가 맞는진 모르겠다.

각설하고, Express 사용 시 사이트맵을 동적으로 사용하는 방법에 대해 알아보자.

Express를 사용 한 사이트맵 생성은 너무 간단하기 때문에 설명이 딱히 필요 없다.

app.get('/sitemap.xml', async (req, res) => {
  const host = req.get('host');

  // 이 사이트는 블로그이기 때문에 블로그 게시글을 API를 통해 가져오는 부분
  const response = await fetch...
더 보기
생각
velca
벨바카
2주
Meta keywords 태그는 무쓸모하다

그 동안 개발 하면서 기계적이고 의무적으로 Meta keywords 태그를 사용해왔다. 그런데 최근 이 태그가 SEO에 별 도움이 안 된다는 글을 읽고 충격을 먹었다.

SEO는 오프라인 매장으로 치자면 목 좋은 곳에 자리를 잡는 것과 같다. 장사는 일반적으로 유동인구가 많은 곳에 해야 잘 되는 법이다. SEO가 되지 않았다면 머나먼 산골짜기 아무도 없는 곳에 매장을 연 것과 마찬가지인 셈이다.

그래서 그 동안 Meta keywords 태그를 사용해왔는데 이게 무쓸모 하다니..

찾아보니 구글에서는 2009년부터 Meta keywords 태그를 검색 랭킹에 사용하지 않는다고 발표했다는데 나는 2016년에 처음 코딩을 시작했음에도 Meta keywords 가 중요하다고 배웠다.. 🥲

그리고 현재는 야후, 빙, 네이버 등의 검색엔진에서도 중요성이 낮단다. 대신 다른 메타 태그들, 특히 title, description, 혹은 본문 내용에 집중을 해야한다는데, 그렇다면 블로그나 뉴스...

더 보기
생각
velca
벨바카
2주
내가 좋아하는 디자인

예전에 나는, 예전도 아니고 불과 최근 까지만 해도 개발할 때 디자인을 하면 명확한 border로 딱딱 구분된 디자인을 선호했었다.

내가 진짜 그 디자인에 매료돼서 그런 건 아니고 그냥 그게 깔끔해 보여서 그렇게 했었고, 현재 벨카 블로그도 비슷하게 딱딱한 border들로 구분 돼있다.

그나마 이 블로그는 테두리를 둥글게 넣음으로 인해 딱딱함을 조금 무마하려고 한 시도가 있었다. 그래서인지 이전에 했던 디자인보단 덜 딱딱한 느낌이긴 하지만 여전히 뭔가 스프레드 시트 같은 문서를 떠올리게끔 만든다.

그러다 최근 이런저런 디자인 컨셉들을 눈여겨 봤는데 좀 예쁘다 싶은 디자인들은 대체로 경계선이 없고 바탕색과의 차이를 이용해 경계를 만들어 내는 디자인을 하고 있었다.

예를 들면 이런 느낌이다.

여태 내가 어떤 디자인을 좋아하는지도 잘 모르고 디자인...

더 보기
https://api.vel-ca.com/file/3a5957f6-8294-493b-9b2e-abd74f55ffea.png