코드 이미지 변환
지시사항
시니어 프론트엔드 개발자로서 콘텐츠에 포함된 모든 코드 조각을 강조 표시된 이미지로 변환해야 합니다. 모든 코드 조각을 추출하는 것이 매우 중요합니다! 마크다운의 백틱(``) 구문으로 엄격하게 묶인 코드는 하나의 코드 조각으로 처리해야 합니다. 특히 JSX 코드에 주의해야 합니다. 강조 표시를 할 때는 JS 구문을 JSX 구문으로 그대로 취급하세요.
색 구성표: 어두운 회색을 기본 배경색으로 사용하고, 코드 블록은 어두운 배경에 색상으로 강조된 코드(청록색과 밝은 녹색이 주요 강조 색상)를 사용합니다.
레이아웃: 코드 블록은 터미널/코드 편집기의 모양을 모방하지만, 코드 편집기 상단의 버튼은 제거되어 코드만 표시됩니다. 각 카드에는 상하 15px, 좌우 25px의 여백이 있습니다.
기술 구현: 레이아웃 및 스타일링은 HTML5와 CSS를 사용하여 구현되었습니다(코드 블록은 색상으로 강조 표시해야 함). `dom-to-image-more` 함수가 통합되었습니다. `dom-to-image-more` 스크립트 주소는 https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js이며, 이 함수를 통해 카드 이미지 하나씩 다운로드(카드 아래에 버튼 위치, 이미지는 고해상도여야 함)하거나 모든 이미지를 한 번에 다운로드(클릭 후 1초간 기다린 후 이미지를 하나씩 다운로드)할 수 있습니다. 불필요한 백틱(`\`)을 코드에 추가하지 마십시오. 오류가 발생할 수 있습니다.
이 기능을 구현할 때 다음 사항에 유의하십시오. 표지 카드는 단순하게 유지하십시오. 아이콘에 가상 요소를 사용하지 말고 SVG를 직접 사용하십시오. 다운로드하는 이미지는 고해상도여야 하며, 크기는 2배로 설정하십시오. 이미지 파일 이름은 숫자를 사용하여 순차적으로 지정하십시오.
설명
이 스킬을 추천하는 이유
이 스킬은 코드를 아름답고 하이라이트된 이미지로 변환하며, 터미널 인터페이스를 모방하고 고화질 다운로드를 지원합니다. 개발자가 코드 조각을 공유하기에 이상적인 도구입니다.
기사의 모든 코드를 이미지로 변환하고 한 번에 다운로드할 수 있습니다.
관련 스킬
전체 보기
이미지小小东 x 실크스크린 x 판화 x P086
Panel 086은 화면을 성립시키는 시각 정보 3–5개만 남기고, 실루엣·기하학적 형태·간결한 색면으로 주제를 재구성합니다. 그런 다음 사진에서 가져온 2–4가지 별색과 dry-brush, brayer texture, dragged ink, broken ink, uneven coverage를 활용해 중세 모더니즘 실크스크린 판화를 완성합니다. 구성은 언제나 명확한 초점 하나, 주요 방향 하나, 의미 있는 여백을 추구합니다. 이런 경우에 적합합니다 사진에 더 명확한 시각적 질서를 부여하고 싶을 때: 핵심 시각 정보 3–5개만 남기고 실루엣·기하학적 형태·색면으로 분명한 초점을 만듭니다. 실제 판화의 질감을 원할 때: 드라이 브러시, 롤러 잉크, 가로 방향 잉크 끌기, 잉크 날림, 끊긴 잉크와 고르지 않은 잉크 커버리지를 화면의 언어로 활용합니다. 색감은 선명하지만 절제되기를 원할 때: 원본의 가장 생생한 색 관계를 2–4가지 별색으로 압축하고, 종이 바탕과 여백이 구성에 실질적으로 참여하도록 합니다. 유연한 결과물이 필요할 때: 상하형, 좌우형, 순수 디자인, 다양한 비율과 사방형 벽지를 지원하며 이미지 디렉터리도 일괄 처리할 수 있습니다.
이미지小小东 x 선묘 x 점묘 x P084
Panel 084는 검은색 또는 짙은 색의 가는 선으로 주제, 건축물, 도로와 공간의 관계를 정리하고, 세로선·가로선·꺾은선·곡선과 원근 유도선으로 기하학적 골격을 세웁니다. 그런 다음 stippling／dotted texture의 밀도 변화를 활용해 하늘, 지면, 원경, 나뭇가지 그림자, 조명과 주제 주변의 공기감과 깊이감을 표현합니다. 복잡한 배경은 과감히 덜어내고, 선명한 초점과 넓은 여백, 그리고 출처가 분명한 소량의 강조색만 남깁니다. 이런 경우에 적합합니다 도시, 건축물과 공간의 관계를 분명하게 보여주고 싶을 때: 기하학적인 가는 선, 원근 유도선과 핵심 윤곽선으로 도로, 건축물과 장면의 구조를 정리합니다. 텍스처를 가득 채우지 않고 공기감, 빛과 원근감을 표현하고 싶을 때: stippling／dotted texture의 밀도 변화를 통해 차분한 깊이감을 만듭니다. 절제된 제한 색상을 선호할 때: 청회색, 미색과 따뜻한 흰색을 중심으로 사용하고, 원본 이미지에서 가져온 소량의 spot color만 초점을 밝혀 줍니다. 유연한 결과물 전달이 필요할 때: 상하·좌우·순수 디자인·다양한 비율·4방향 배경화면을 지원하며, 이미지 폴더도 일괄 처리할 수 있습니다.
이미지小小东 x 낙서 x 서투름 x P083
Panel 083은 먼저 사진을 다시 판단해 가장 기억할 만한 주체 하나와 필요한 환경 암시를 최대 한두 개만 남깁니다. 그런 다음 특정 비율, 동작, 표정 또는 구조를 의도적으로 비틀고 서툴고 조금은 우스꽝스럽게 그립니다. 떨리는 윤곽선, 일부러 어긋난 비율, 거친 크레용 터치와 여백이 어우러져 Ugly-cute naïve doodle을 만듭니다. 주체의 정체성은 정확해야 하며, 유머는 임의로 덧붙이는 것이 아니라 원본 이미지에서 나와야 합니다. 이런 경우에 적합합니다 사진 속에서 확대할 만한 성격의 순간이 있을 때: 동작, 표정, 비율 또는 대비에서 유머를 찾아내며, 기계적으로 선화로 변환하지 않습니다. 못생겼지만 귀여운 느낌을 원하지만 값싼 귀여움은 피하고 싶을 때: 일부러 비틀고 서툴고 약간 우스꽝스럽게 그리면서도 주체를 한눈에 알아볼 수 있게 합니다. 복잡한 장면을 간결하고 정확하게 만들고 싶을 때: 주체 하나와 필요한 환경 암시를 최대 한두 개만 남기고, 거친 채색과 넓은 여백으로 기억에 남는 요소를 강조합니다. 유연한 결과물이 필요할 때: 상하형, 좌우형, 순수 디자인, 다양한 비율과 4단말 배경화면을 지원하며, 이미지 폴더를 일괄 처리할 수도 있습니다.
코드 이미지 변환
지시사항
시니어 프론트엔드 개발자로서 콘텐츠에 포함된 모든 코드 조각을 강조 표시된 이미지로 변환해야 합니다. 모든 코드 조각을 추출하는 것이 매우 중요합니다! 마크다운의 백틱(``) 구문으로 엄격하게 묶인 코드는 하나의 코드 조각으로 처리해야 합니다. 특히 JSX 코드에 주의해야 합니다. 강조 표시를 할 때는 JS 구문을 JSX 구문으로 그대로 취급하세요.
색 구성표: 어두운 회색을 기본 배경색으로 사용하고, 코드 블록은 어두운 배경에 색상으로 강조된 코드(청록색과 밝은 녹색이 주요 강조 색상)를 사용합니다.
레이아웃: 코드 블록은 터미널/코드 편집기의 모양을 모방하지만, 코드 편집기 상단의 버튼은 제거되어 코드만 표시됩니다. 각 카드에는 상하 15px, 좌우 25px의 여백이 있습니다.
기술 구현: 레이아웃 및 스타일링은 HTML5와 CSS를 사용하여 구현되었습니다(코드 블록은 색상으로 강조 표시해야 함). `dom-to-image-more` 함수가 통합되었습니다. `dom-to-image-more` 스크립트 주소는 https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js이며, 이 함수를 통해 카드 이미지 하나씩 다운로드(카드 아래에 버튼 위치, 이미지는 고해상도여야 함)하거나 모든 이미지를 한 번에 다운로드(클릭 후 1초간 기다린 후 이미지를 하나씩 다운로드)할 수 있습니다. 불필요한 백틱(`\`)을 코드에 추가하지 마십시오. 오류가 발생할 수 있습니다.
이 기능을 구현할 때 다음 사항에 유의하십시오. 표지 카드는 단순하게 유지하십시오. 아이콘에 가상 요소를 사용하지 말고 SVG를 직접 사용하십시오. 다운로드하는 이미지는 고해상도여야 하며, 크기는 2배로 설정하십시오. 이미지 파일 이름은 숫자를 사용하여 순차적으로 지정하십시오.
설명
이 스킬을 추천하는 이유
이 스킬은 코드를 아름답고 하이라이트된 이미지로 변환하며, 터미널 인터페이스를 모방하고 고화질 다운로드를 지원합니다. 개발자가 코드 조각을 공유하기에 이상적인 도구입니다.
기사의 모든 코드를 이미지로 변환하고 한 번에 다운로드할 수 있습니다.
관련 스킬
전체 보기이미지小小东 x 실크스크린 x 판화 x P086
Panel 086은 화면을 성립시키는 시각 정보 3–5개만 남기고, 실루엣·기하학적 형태·간결한 색면으로 주제를 재구성합니다. 그런 다음 사진에서 가져온 2–4가지 별색과 dry-brush, brayer texture, dragged ink, broken ink, uneven coverage를 활용해 중세 모더니즘 실크스크린 판화를 완성합니다. 구성은 언제나 명확한 초점 하나, 주요 방향 하나, 의미 있는 여백을 추구합니다. 이런 경우에 적합합니다 사진에 더 명확한 시각적 질서를 부여하고 싶을 때: 핵심 시각 정보 3–5개만 남기고 실루엣·기하학적 형태·색면으로 분명한 초점을 만듭니다. 실제 판화의 질감을 원할 때: 드라이 브러시, 롤러 잉크, 가로 방향 잉크 끌기, 잉크 날림, 끊긴 잉크와 고르지 않은 잉크 커버리지를 화면의 언어로 활용합니다. 색감은 선명하지만 절제되기를 원할 때: 원본의 가장 생생한 색 관계를 2–4가지 별색으로 압축하고, 종이 바탕과 여백이 구성에 실질적으로 참여하도록 합니다. 유연한 결과물이 필요할 때: 상하형, 좌우형, 순수 디자인, 다양한 비율과 사방형 벽지를 지원하며 이미지 디렉터리도 일괄 처리할 수 있습니다.
이미지小小东 x 선묘 x 점묘 x P084
Panel 084는 검은색 또는 짙은 색의 가는 선으로 주제, 건축물, 도로와 공간의 관계를 정리하고, 세로선·가로선·꺾은선·곡선과 원근 유도선으로 기하학적 골격을 세웁니다. 그런 다음 stippling／dotted texture의 밀도 변화를 활용해 하늘, 지면, 원경, 나뭇가지 그림자, 조명과 주제 주변의 공기감과 깊이감을 표현합니다. 복잡한 배경은 과감히 덜어내고, 선명한 초점과 넓은 여백, 그리고 출처가 분명한 소량의 강조색만 남깁니다. 이런 경우에 적합합니다 도시, 건축물과 공간의 관계를 분명하게 보여주고 싶을 때: 기하학적인 가는 선, 원근 유도선과 핵심 윤곽선으로 도로, 건축물과 장면의 구조를 정리합니다. 텍스처를 가득 채우지 않고 공기감, 빛과 원근감을 표현하고 싶을 때: stippling／dotted texture의 밀도 변화를 통해 차분한 깊이감을 만듭니다. 절제된 제한 색상을 선호할 때: 청회색, 미색과 따뜻한 흰색을 중심으로 사용하고, 원본 이미지에서 가져온 소량의 spot color만 초점을 밝혀 줍니다. 유연한 결과물 전달이 필요할 때: 상하·좌우·순수 디자인·다양한 비율·4방향 배경화면을 지원하며, 이미지 폴더도 일괄 처리할 수 있습니다.
이미지小小东 x 낙서 x 서투름 x P083
Panel 083은 먼저 사진을 다시 판단해 가장 기억할 만한 주체 하나와 필요한 환경 암시를 최대 한두 개만 남깁니다. 그런 다음 특정 비율, 동작, 표정 또는 구조를 의도적으로 비틀고 서툴고 조금은 우스꽝스럽게 그립니다. 떨리는 윤곽선, 일부러 어긋난 비율, 거친 크레용 터치와 여백이 어우러져 Ugly-cute naïve doodle을 만듭니다. 주체의 정체성은 정확해야 하며, 유머는 임의로 덧붙이는 것이 아니라 원본 이미지에서 나와야 합니다. 이런 경우에 적합합니다 사진 속에서 확대할 만한 성격의 순간이 있을 때: 동작, 표정, 비율 또는 대비에서 유머를 찾아내며, 기계적으로 선화로 변환하지 않습니다. 못생겼지만 귀여운 느낌을 원하지만 값싼 귀여움은 피하고 싶을 때: 일부러 비틀고 서툴고 약간 우스꽝스럽게 그리면서도 주체를 한눈에 알아볼 수 있게 합니다. 복잡한 장면을 간결하고 정확하게 만들고 싶을 때: 주체 하나와 필요한 환경 암시를 최대 한두 개만 남기고, 거친 채색과 넓은 여백으로 기억에 남는 요소를 강조합니다. 유연한 결과물이 필요할 때: 상하형, 좌우형, 순수 디자인, 다양한 비율과 4단말 배경화면을 지원하며, 이미지 폴더를 일괄 처리할 수도 있습니다.
다음으로 즐겨 쓸 스킬을 찾아보세요
연구, 창작, 일상 업무에 유용한 엄선된 AI 스킬을 더 탐색해 보세요.