찐망고'S 퍼블리싱그리고디자인

사주 AI웹서비스 제작노트 -14사주 AI웹서비스 제작노트 -13사주 AI웹서비스 제작노트 -12사주 AI웹서비스 제작노트 -11사주 AI웹서비스 제작노트 -10사주 AI웹서비스 제작노트 -9사주 AI 웹서비스 제작노트 - 8사주 AI 웹서비스 제uiweb.tistory.com 저번 제작노트는.. 너무 별이야기가 없어서오늘은 엔진 고도화도 한겸 다시 써보는 제작노트 15화 서비스 이름을 찐망고 사주풀이에서 찐망고 타고난 행동 알고리즘 분석기로 변경했다.사주라는 단어가 주는 고정된 이미지보다,실제 서비스 방향인 행동패턴 분석을 더 잘 드러내는 이름이라 생각했다.title은 변경하지 않았는데아무래도 찐망고 사주가 유입율이 더 좋을 것 같아서.. (바이럴 자체를 안하면서..🤣) 엔진을 고도화 했다.억부 + ..

사주 AI웹서비스 제작노트 -13사주 AI웹서비스 제작노트 -12사주 AI웹서비스 제작노트 -11사주 AI웹서비스 제작노트 -10사주 AI웹서비스 제작노트 -9사주 AI 웹서비스 제작노트 - 8사주 AI 웹서비스 제작노트 - 7사주 AI 웹서비스 제uiweb.tistory.com 일하느라 도무지 디벨롭할 시간이없다. 와중에 가비아(Gabia)에서 도메인을 샀다. 이벤트 할인이라 저렴하게 구입했다.사실 원했던건 찐망고닷컴이었는데...누군가 샀다. 할인을 하더라 그래서 두개삼 결제할 때 정신이 없어서 캡쳐를 못해 같은 가격의 다른 도메인 결제금액계산화면을 캡쳐했다보니까 부가세 10프로가 별도로 붙음 도메인 등록하면 이름, 이메일, 전화번호가 가비아에 공개되는데 티빙도 털리고 CJ도 털리고 패스트캠프도 ..

안녕하세요 찐망고입니다. 요즘은 tailwind 많이 쓰자나요.그렇다고 그거 다 외우는 건 쉽지 않고익스텐션 도움을 받을 텐데요.이게 또 수업하다 보니 어느 자리는 되고 어느자리는 안되어서 해결방법을 공유합니다. Tailwind IntelliSense 익스텐션이고설치하게 되면 아래처럼 거의 모든 tailwind를 확인할 수 있습니다. 안 되는 자리가 있는 경우 따로 셋팅이 필요합니다. 첫 번째! CDN작업 시 같은 root폴더에 파일 만들기파일이름은 tailwind.config.js로 저장하고파일 내용은 아래 코드 참고하기 module.exports = { content: ["./**/*.html"],} CDN 써도 IntelliSense가 이 파일 보고 Tailwind 프로젝트라고 인식함. ..

안녕하세요 찐망고입니다.이번에 CSS 레이아웃 수업을 진행하면서 학생들이 개념을 눈으로 직접 보면서 익힐 수 있도록 인터랙티브 강의자료를 만들었습니다.슬라이더로 값을 바꾸면 레이아웃이 실시간으로 바뀌는 방식이라 "이 값이 바뀌면 어떻게 되지?"를 직접 확인하면서 배울 수 있습니다. 강의자료 바로가기 https://jjinmanggo.github.io/frontend-lecture/ Frontend Lecture📏 CSS 단위 px, em, rem, %, vw, vh 등 CSS 단위 개념을 확인해요. 퀴즈jjinmanggo.github.io 수업 구성CSS Grid (9챕터)display: grid / repeat() / fr 단위minmax() / auto-fill vs auto-fitgrid-col..

Figma 수업노트 Auto Layout완전정복 프레임 안의 요소를 자동으로 정렬·배치하는 Figma 핵심 기능 목차 1Auto Layout이란? 2Width / Height 설정 3Hug / Fill / Fixed 4Padding & Gap 5Alignment & Direction 6Wrap 기능 7Frame 중첩 8실전 팁 & 단축키 1 Auto Layout이란? Frame 또는 개체 간의 간격을 자동으로 잡아주는 기능으로, 요소를 추가·삭제해도 레이아웃이 알아서 재배치됩니다. ..

CSS Study Note Background 요소에 배경 색상과 이미지를 자유자재로 다루기 01 — 개별 속성 6가지 background-color 기본값: transparent 배경 색상을 지정합니다. 이미지와 함께 쓸 때 이미지 뒤에 깔립니다. red rgb() #hex transparent background-image 기본값: none 배경 이미지를 지정합니다. 스크린리더가 읽지 못하므로 의미 있는 이미지는 im..

CSS Study Note Position 브라우저 동작 원리를 이해하는 position 완전 정복 01 — 5가지 position 속성 static position 기본값. 일반 문서 흐름(normal flow) 그대로 유지. left/top/right/bottom 적용 안됨. 기본값 flow 유지 방향값 무시 position: static; /* 기본값 */ relative 자신의 원래 위치 기준으로 이동. 원래 자리는 공간 유지. absolute 자식의 기준점 역할로 많이 사용. 자기 기준 공간 유지 기준..

세상에 물건도 많고 정보는 더 많다. 뭘 하나 사려고 해도 비교해야 할 스펙이 수십 가지다 보니, 이젠 쇼핑 자체가 꽤 피곤한 노동이 됐다. 그러다보니 나의 노동을 줄여주는 서비스들을 이용하게 되고그 서비스들은 오히려 비교 분석 할 생각도 줄여준다. 예를 들어 올리브영 세일 알림이 와서 들어가 본다.내가 쓰는 제품이 세일을 안할 수도 있다. 특정한 브랜드보다 제품이 필요한 경우도 있다.'랭킹' 탭을 기웃거린다. "요즘 딴 사람들은 대체 뭘 사나?" 하고 슬쩍,일일히 제품을 분석할 여력은 없고, 남들이 이미 검증해 준 대세 속에서 하나 골라 잡으면 망하진 않겠지 라는 심리 쿠팡도 똑같다. 우리가 쿠팡에서 로켓배송 필터부터 켜고 시작하는 건 단순히 빨라서가 아니다. 물건이 맘에 안 들면 이유 불문하고 바로 ..

예전에는 좋은 물건을 만들고 나서 어떻게 광고할지 고민했는데 지금은 완전히 딴판이다.틱톡이든 인스타든 스레드든, 어디서든 일단 사람들 눈에 많이 띄게 하고그 다음에 제품을 끼워 넣는다.이쯤 되면 얘네가 제조업인지 미디어 회사인지 헷갈릴 정도다. 대기업 자본이 있거나 엄청 유명한 연예인일 필요도 없다.어떤 루트든 사람 눈에 띄어서 내 이름 석 자 알리기만 하면,장사든 사업이든 비약적으로 커질 수 있는 판이 깔려버렸다. 밴드왜건효과(Bandwagon Effect)라는 말이있다.다른 사람들이 많이 구매하거나 지지하는 것을 보고 덩달아 따라서 선택하는 대중적인 동조 심리현상을 뜻한다.입소문에 따라 파이가 커지게 되면 덩달아 구입하거나 사용하는 사람이 많아진다.그렇게 덩치를 키운 브랜드들은 가만 보면 두가지 길..

안녕하세요 찐망고입니다. 하드 코딩을 하지 않는 이시기에 굳이 HTML도 이전처럼 수업을 할 필요가 있나 싶지만 아주 기초적인 레벨이고 검수는 할 정도의 실력을 키우자는 의미로기본구조의 과정을 이틀내로 복습까지 끝내봤는데그래도 기본 문제는 풀어봐야 할 거 같아 만들어본 문제입니다. 재미나이랑 클로드를 이용했고혹시 문제 파일이 아니라 md파일이나 프롬프트가 필요하다면 댓글남겨 주세요! 문제 패턴은 이런 형태고 html파일은 두개이고 20문제씩 풀 수 있습니다. 요즘은 모든 태그를 무작정 외우는 시대는 아닙니다.하지만 화면을 보고 구조적인 아웃라인 설계능력과 검수는 여전히 프론트엔드/퍼블리싱의기본기이자 실력의 차이를 만든다 생각합니다. 이번 퀴즈 세트는 단순 문법 암기를 넘어,실무에서 시맨틱 마크업을 할 ..