노션 embed를 활용해서 Color Picker라는 위젯을 만들다가 한 문제를 발견했다.평소 PC로 작업을 많이 하니 PC 환경에서만 항상 테스트가 이루어졌는데 우연히 들어간 노션 페이지에서 위젯의 css가 이상한 현상을 발견했다. 위젯 내부의 색상 선택기가 둥글게 변해 있었고, text 타입의 input도 모서리가 살짝 둥글게 변했다.개발자 도구를 열어서 CSS 우선순위가 어떻게 적용되어 있나 보고 싶은데 어플이기 때문에 개발자도구를 열 수가 없었다.그래서 갖가지 환경을 테스트해봤다. 문제와 원인 분석 우선 크기를 최대한으로 줄인 노션 데스크톱에서는 문제없는 걸 확인할 수 있었다. 두 번째로는 PC 브라우저로 접속해서 개발자도구의 기기 툴바 전환 기능을 이용해 반응형 모바일 크기로 확인해 봤다.역..
notion
디데이 위젯에 이어 두 번째 위젯 제작기입니다. 역시 가장 단순하게 만드느라 이런 저런 기능은 제외했습니다 :)첫 번째 위젯인 Miny D-day Widget(링크)를 사용하려면 색상 코드가 필요한데, 간단하게 추출할 수 있는 기능이 있으면 좋겠다 싶어서 만들어보았습니다. Miny Color Picker 위젯 살펴보기Miny Color Picker 위젯은 색상을 선택하고 컬러 코드를 복사할 수 있는 간단한 기능을 지원합니다.노션에 위젯을 임베드하고 페이지에 있는 다양한 색상들을 추출해 보세요. 노션 대시보드 내의 이미지 아래 여러 개의 위젯을 배치해 둔 모습입니다. 조금 복잡하지만 예시용으로 만들어 보았습니다.개수에 제한 없이 임베드가 가능하고, 단순한 기능으로 가볍게 제작했기 때문에 로딩되는 속도가 빠..
노션을 꾸미는 중 디데이를 표시할 수 있는 위젯이 있었으면 좋겠다 싶어서 만든 간단한 노션 디데이 위젯입니다.복잡한 부분 다 빼고 가장 심플하게, 그리고 예쁘게 만들었습니다 :) Miny 디데이 위젯 살펴보기 위젯은 대시보드 오른쪽에 위치하고 있습니다. 노션을 접속할 때마다 업데이트 되어 디데이를 계산해줍니다. 크기 조절이 자유로워 다양한 곳에 삽입할 수 있습니다.또한 기본적으로 시스템 테마를 따라가기 때문에 다크모드에서는 밝은 폰트 색상으로 변하고, 라이트 모드에서는 어두운 색상이 됩니다. Miny 노션 디데이 위젯 만들기사용 방법은 간단합니다. 디데이 설정을 위한 몇 가지 정보를 위젯 주소창에 포함시키면 됩니다.데이터 키설명필수 여부기본값date디데이 날짜 ("YYYYMMDD" 형식으로 입력)O ..
간단한 토이 프로젝트 관리를 위한 개인용 템플릿입니다.이슈를 쉽게 관리하고 추적할 수 있으며, 이 페이지를 프로젝트 문서로 활용할 수도 있습니다 :) 실제로 저는 토이 프로젝트를 진행할 때 해당 템플릿을 많이 이용합니다.최소한의 기능만을 넣어 간단하게 만들어 두었으니, 주요 기능 뿐만 아니라 다양하게 확장해서 사용할 수 있습니다. 템플릿 복제하기아래 링크를 통해 템플릿으로 이동한 후 우측 상단의 복제 아이콘을 눌러 템플릿을 복제할 수 있습니다. https://youngdev57.notion.site/121d65b31f8680c3a682d22bbe288b68 토이 프로젝트 | Notion@minyyoungdev57.notion.site 템플릿 소개프로젝트 및 기능에 대한 개요를 포함하고 있습니다. 깃허브 ..