[카테고리:] Designer

  • 이제 AI는 ‘생성’보다 ‘워크플로’

    이제 AI는 ‘생성’보다 ‘워크플로’

    AI를 잘 사용하는 것보다, AI와 함께 만드는 방법을 배우자~

    여러분이 앞으로 디자인 작업을 하면서 가장 많이 만나게 될 단어 중 하나가 AI Workflow가 될 것입니다.

    지금까지 우리는 AI를 주로 “이미지를 만들어주는 도구”로 생각했습니다. 프롬프트를 입력하면 이미지가 나오고, 마음에 들지 않으면 다시 프롬프트를 수정하는 방식입니다. 하지만 AI 기술이 빠르게 발전하면서 디자인 작업의 방식도 달라지고 있습니다. 이제 중요한 것은 “어떤 AI가 가장 좋은가?”가 아니라, “여러 AI를 어떻게 연결해서 나만의 제작 과정을 만들 것인가?”입니다.

    이것이 오늘 이야기할 AI Creative Workflow의 핵심입니다.

    AI는 이제 단순한 이미지 생성기가 아니다

    AI를 처음 배우는 학생들은 대부분 다음과 같은 방식으로 시작합니다.

    Prompt → Generate → Select

    프롬프트를 작성하고 이미지를 생성한 다음, 마음에 드는 이미지를 선택하는 방법입니다.

    이것만으로도 상당히 훌륭한 결과물을 만들 수 있습니다. 하지만 실제 디자인 프로젝트에서는 이것만으로 부족합니다.

    예를 들어 하나의 브랜드 캠페인을 만든다고 생각해봅시다.
    먼저 콘셉트를 정하고,
    레퍼런스를 조사하고,
    이미지를 생성하고,
    인물이나 제품의 형태를 수정하고,
    색상과 구도를 조정하고,
    필요하면 영상을 만들고,

    마지막으로 Photoshop이나 Figma에서 최종 결과물을 완성해야 합니다.

    즉, 하나의 AI가 모든 작업을 해결하는 것이 아니라 여러 도구가 하나의 제작 과정 안에서 연결되는 구조가 필요합니다.

    AI Generator가 ‘결과’를 만들어준다면,
    AI Workflow는 ‘과정’을 만들어줍니다.

    AI Creative Workflow란 무엇인가?

    AI Creative Workflow를 어렵게 생각할 필요는 없습니다.
    쉽게 말하면, “아이디어를 최종 결과물로 만들어가는 과정을 AI와 함께 설계하는 것” 입니다.가장 기본적인 구조를 보면 다음과 같습니다.

    아이디어 → 생성 → 제어 → 편집 → 자동화 → 최종 결과물

    이 과정에서 각각 다른 AI 도구를 사용할 수 있습니다.
    예를 들어,

    • 아이디어와 콘셉트 → 이미지 생성 AI, Midjourney, ChatGPT etc.
    • 실시간 탐색 → Krea
    • 정교한 이미지 제어 → ComfyUI
    • 영상 제작 → Runway
    • 이미지 보정 → Upscaling AI
    • 최종 디자인 → Photoshop / Figma

    와 같이 역할을 나눌 수 있습니다.

    따라서 앞으로의 디자이너는 하나의 AI를 잘 사용하는 사람보다 여러 도구의 특징을 이해하고 적절하게 연결할 수 있는 사람이 더욱 강한 경쟁력을 갖게 됩니다.

    Workflow를 하나의 ‘디자인 시스템’이라고 생각해보자

    여기서 여러분이 UI/UX 디자인에서 배운 Design System을 생각해보기 바랍니다. Design System은 버튼 하나를 만드는 방법만을 의미하지 않습니다. 색상, 타이포그래피, 컴포넌트, 패턴 등을 체계적으로 구성하여 반복해서 사용할 수 있는 디자인 환경을 만드는 것입니다.

    AI Workflow도 이와 비슷합니다. 한 번 성공한 AI 작업 과정을 저장해두면 다음 프로젝트에서 다시 사용할 수 있습니다.

    예를 들어,

    Input ImagePromptModelLoRAControlNetImage ProcessingUpscaleOutput

    이라는 과정을 만들어 놓았다면, 다음 프로젝트에서는 필요한 부분만 변경하여 다시 사용할 수 있습니다.

    즉,

    AI Workflow = 반복 가능한 창작 시스템

    이라고 이해하면 좋습니다.

    그래서 ComfyUI가 중요한 것이다

    AI Creative Workflow를 공부할 때 ComfyUI를 주목할 필요가 있습니다. ComfyUI는 단순히 이미지를 생성하는 프로그램이 아닙니다. 여러 기능을 Node로 연결하여 하나의 제작 과정을 직접 설계할 수 있습니다.

    예를 들어 다음과 같은 구조를 만들 수 있습니다.

    Load ImagePromptModelLoRAControlNetKSamplerVAE DecodeUpscaleSave Image

    이렇게 구성하면 이미지 한 장을 만드는 과정을 하나의 Workflow로 저장할 수 있습니다. 여러분이 앞으로 AI Graphics를 공부한다면 단순히 “예쁜 이미지를 만드는 것”에서 끝내지 말고, “이 이미지는 어떤 과정으로 만들어졌는가?”를 생각하는 습관을 가지기 바랍니다.

    이것이 AI Workflow를 이해하는 첫 번째 단계입니다.

    여러 AI를 경쟁시키지 말고 연결해서 사용하자

    학생들이 AI를 공부하면서 자주 하는 실수가 있습니다.
    “Midjourney와 Krea 중 무엇이 더 좋은가요?”
    “ComfyUI와 Flux 중 어떤 것이 더 좋은가요?”
    이렇게 AI를 서로 비교하려고 합니다. 하지만 실제 제작에서는 반드시 하나만 선택할 필요가 없습니다. 각각 잘하는 일이 다르기 때문입니다.

    예를 들어,

    Midjourney → 빠른 콘셉트와 이미지 아이디어
    Krea → 실시간 Visual Exploration
    Canva → 쉽게 SNS/마케팅 콘텐츠를 만들고 싶다
    Leonardo 일관된 캐릭터·게임 에셋을 만들고 싶다
    ComfyUI → 세밀한 제어와 AI 제작 공정 전체를 직접 설계하고 자동화하고 싶다 Workflow
    Runway → AI Video AI 영상을 만들고 싶다
    Firefly → Adobe 작업을 AI로 확장하고 싶다
    Magnific → 이미지 디테일과 Upscaling
    Photoshop → 최종 편집

    처럼 역할을 나누어 사용할 수 있습니다. 따라서 중요한 것은 “최고의 AI 하나를 찾는 것”이 아니라 “각 AI의 장점을 연결하는 것”입니다.

    AI 시대의 디자이너는 무엇을 잘해야 할까?

    AI가 발전하면 디자이너의 역할이 없어질 것이라고 생각하는 학생들도 있습니다. 그러나 저는 오히려 반대로 생각합니다. AI가 결과물을 빠르게 만들어줄수록 무엇을 만들 것인지 결정하는 사람의 역할이 더욱 중요해집니다.

    앞으로 디자이너에게 필요한 능력은 다음과 같습니다.

    ① 문제를 발견하는 능력

    AI에게 무엇을 시킬 것인지 결정하기 전에 무엇을 해결해야 하는지 알아야 합니다.

    ② 좋은 이미지를 판단하는 능력

    AI는 수많은 결과물을 만들어낼 수 있습니다.

    하지만 그중에서 어떤 결과가 좋은지 판단하는 것은 디자이너의 몫입니다.

    ③ AI를 제어하는 능력

    Prompt뿐만 아니라 Reference, Mask, ControlNet, LoRA, Seed 등의 개념을 이해해야 합니다.

    ④ Workflow를 설계하는 능력

    하나의 결과물을 만드는 것이 아니라 반복 가능한 제작 과정을 설계할 수 있어야 합니다.

    ⑤ 최종 디자인을 완성하는 능력

    AI가 만든 결과물을 그대로 사용하는 것이 아니라 타이포그래피, 레이아웃, 색상, 인터랙션 등을 통해 최종 디자인으로 발전시켜야 합니다.

    AI를 많이 아는 것보다 ‘과정’을 이해하자

    여러분에게 꼭 강조하고 싶은 부분입니다. AI 기술은 매우 빠르게 변화합니다.
    오늘 사용하는 모델이 몇 달 뒤에는 새로운 모델로 바뀔 수도 있습니다. 따라서 특정 AI의 사용법만 암기하는 것은 오래가는 공부 방법이 아닙니다. 대신 다음과 같은 창작의 기본 구조를 이해해야 합니다.

    Research → 무엇을 만들 것인가?
    Concept → 어떤 방향으로 만들 것인가?
    Generation → AI를 이용해 어떻게 생성할 것인가?
    Control → 원하는 형태와 스타일을 어떻게 유지할 것인가?
    Editing → 부족한 부분을 어떻게 수정할 것인가?
    Workflow → 이 과정을 어떻게 반복하고 자동화할 것인가?
    Final Design → 최종적으로 어떤 디자인으로 완성할 것인가?

    이 과정을 이해하면 새로운 AI가 등장해도 빠르게 적응할 수 있습니다.

    AI 시대에는 ‘AI Creative Director’가 필요하다

    앞으로 디자이너의 역할은 단순히 이미지를 직접 만드는 것에서 더욱 확장될 것입니다. 과거의 디자이너가 직접 제작하는 Maker였다면, AI 시대의 디자이너는

    기획하고 → 지시하고 → 선택하고 → 조정하고 → 완성하는 사람

    이 되어야 합니다. 따라서 저는 여러분이 앞으로의 디자인 공부를 다음과 같이 생각했으면 합니다.

    DesignerAI UserAI Workflow DesignerAI Creative Director

    AI를 잘 사용하는 것에서 멈추지 말고, AI를 이용해 하나의 창작 시스템을 설계할 수 있는 디자이너로 성장하기 바랍니다.

    마지막으로

    AI 시대의 디자인에서 가장 중요한 것은 어떤 AI를 사용하는가가 아닙니다.
    더 중요한 것은 “내가 어떤 결과를 만들고 싶은가?” 그리고
    “그 결과를 만들기 위해 AI를 어떻게 연결할 것인가?” 입니다.

    좋은 AI를 선택하는 것보다 좋은 Workflow를 만드는 것이 중요합니다. 프롬프트 하나로 좋은 이미지를 만드는 능력도 필요하지만, 그보다 한 단계 더 나아가

    아이디어 → 생성 → 제어 → 편집 → 자동화 → 최종 디자인

    으로 이어지는 전체 과정을 설계할 수 있어야 합니다. 앞으로 여러분이 AI를 사용할 때는 단순히

    “AI에게 이것을 만들어줘.”

    라고 생각하지 말고,

    “이 결과물을 만들기 위해 어떤 Workflow가 필요할까?”

    라고 질문해보기 바랍니다.

    AI는 디자이너를 대신하는 도구가 아니라,
    디자이너의 창작 능력을 확장하는 새로운 제작 환경이 될 것입니다.

    그리고 그 환경을 얼마나 잘 설계하고 활용하는지가 앞으로 디자이너의 중요한 경쟁력이 될 것입니다.


    플랫폼 특징 비교

    플랫폼가장 잘하는 분야핵심 특징
    Comfy전문적인 제작·자동화노드 기반, 모델 자유도, 완전한 워크플로 제어
    Adobe Firefly / Creative CloudAdobe 기반 디자인팀Photoshop·Illustrator·Premiere와 강력한 연동
    RunwayAI 영상 제작영상 생성 + 편집 + 후반작업
    Midjourney컨셉아트높은 이미지 완성도와 빠른 아트디렉션
    Canva쉬운 콘텐츠 제작템플릿·브랜드 관리·협업
    Leonardo게임·캐릭터·에셋Custom Model과 일관성 있는 이미지 제작
    Krea실시간 크리에이티브실시간 생성·이미지/영상/3D 탐색
    Freepik / Magnific업스케일·이미지 보정생성 + Enhance + Generative Upscaling
    ComfyUI Newsletter

    이 순위는 Workflow Depth, Model Flexibility, Output Quality, Control, Team Scalability, Ecosystem Maturity 등 6개 기준으로 평가됐습니다.

    ① Comfy — “AI 제작 공정 자체를 설계한다”

    가장 강력한 부분은 Control입니다. 모델, Seed, Sampler, Conditioning, Mask, LoRA, 업스케일 등의 과정을 모두 노드로 연결하고 저장할 수 있습니다.
    따라서 동일한 제작 방식을 반복하거나 팀원과 공유하기 좋습니다.
    단점은 배워야 할 것이 많다는 것입니다. 모델, Conditioning, Latent, Sampler, Dependency 등을 이해해야 복잡한 Workflow를 제대로 다룰 수 있습니다.

    ② Adobe Firefly — “AI를 기존 디자인 업무에 넣는다”

    Photoshop, Illustrator, Premiere 등 기존 Adobe 환경 안에서 AI를 사용하는 것이 가장 큰 장점입니다.
    따라서 이미 Adobe Creative Cloud를 중심으로 작업하는 디자이너와 조직에게 유리합니다.
    반면 ComfyUI처럼 자유로운 노드 기반 AI Pipeline을 구축할 수는 없습니다.

    ③ Runway — “AI 영상 제작에 집중한다”

    Text/Image → Video뿐 아니라 Masking, Background Removal, Motion Control, Editing 등 영상 제작에 필요한 기능을 하나의 환경에서 제공합니다.
    특히 AI Video Production을 중심으로 한다면 강력한 선택입니다.

    ④ Midjourney — “아이디어를 빠르게 시각화한다”

    Concept Art, Moodboard, Visual Research, Art Direction 등에 매우 적합합니다. 즉,

    아이디어 → 이미지 → 방향성 결정

    단계에서 강합니다.
    반면 폐쇄형 시스템이기 때문에 ComfyUI처럼 모델이나 Processing Pipeline을 세밀하게 통제하기는 어렵습니다.

    ⑤ Canva — “누구나 쉽게 AI 콘텐츠를 만든다”

    전문적인 AI Workflow보다는 템플릿 + 브랜드 관리 + 협업 + AI가 강점입니다.
    따라서 마케팅팀, 비전문 디자이너, SNS 콘텐츠 제작 등에 적합합니다.

    ⑥ Leonardo — “일관된 캐릭터와 에셋을 만든다”

    Custom Model Training을 통해 캐릭터, 게임 에셋, 제품 이미지 등을 일정한 스타일로 반복 제작하는 데 강점이 있습니다.
    Consistency가 중요한 프로젝트에 적합합니다.

    ⑦ Krea — “생각하면서 실시간으로 만든다”

    Krea의 가장 큰 특징은 Real-time Generation입니다.
    이미지를 생성하고 기다리는 방식보다, 입력·드로잉·Reference 등을 변화시키면서 결과가 실시간으로 변화하는 방식입니다.
    특히 빠른 Visual Exploration에 강합니다.

    ⑧ Freepik / Magnific — “이미지를 완성 단계까지 끌어올린다”

    특히 Magnific의 Generative Upscaling이 핵심입니다.
    단순히 해상도를 높이는 것이 아니라 피부, 머리카락, 직물, 건축물 등의 디테일을 생성적으로 보완합니다.
    다만 실제 사진이나 제품처럼 원본의 정확성이 중요한 경우에는 주의해야 합니다.

  • 피그마 학생 교육용 인증 방법

    피그마 학생 교육용 인증 방법

    다음은 피그마 대학생 교육용 인증 방법을 설명합니다. 순서대로 작성하면 교육용 프로페셔널 버전을 사용할 수 있습니다. 대학생의 경우 재학 증명서 캡쳐 이미지를 미리 준비하는 것이 좋습니다.

    1. 피그마 교육 페이지 접속 ( https://www.figma.com/education/higher-education/ )

    2. Get verified 클릭

    3. 회원가입과 로그인 하기( 반드시 교육용 이메일로 회원가입 진행 )

    4. 교육인증을 위한 질의응답(아래 이미지를 참고하세요)

    귀하는 학생, 교육자 또는 관리자인가요? 

    어떤 유형의 기관에 재학 중이거나 근무하시나요?

    K12(고등학생)

    Bootcamp or Online Program(부트캠프, 온라인 프로그램)

    피그마 교육 플랜을 신청하는 이유는 무엇인가요?

    교육 플랜이 필요한 이유를 간단히 작성하면 됩니다. 예를들면 UX/UI 디자인 수업 과제에 사용하기 위해서 라고 작성할 수 있습니다.

    학교 이름은 무엇인가요?

    학교 이름이 목록에 없을 경우 학교 이름을 입력합니다.

    학교 웹사이트를 입력합니다.

    주요 공부하는 분야는 무엇인가요?

    본인의 공부하는 분야를 선택​​합니다.

    시간표, 재학/재직 증명서, 또는 성적 증명서를 업로드 하세요.

    수강 중인 강좌와 URL을 공유해 주세요.

    졸업 예정 날짜졸업 예정 연도를 선택해 주세요.

    제출한 정보와 Figma 교육 플랜의 사용 및 접근은 Figma의 서비스 약관 및 개인정보 보호 정책에 따라 관리됩니다. 이 양식을 제출하고 Figma 교육 플랜을 이용함으로써 사용자는 만 13세 이상임을 확인합니다.

    본인은 제공된 기관에 재학 중이거나 근무 중인 학생, 교육자 또는 관리자임을 확인합니다. 귀하의 자격을 검증하기 위해 Figma가 재학 증명서 등의 자료를 요구할 수 있으며, 자격을 허위로 제공한 경우 발생하는 서비스 요금을 Figma에 납부할 것을 동의합니다.

    참고 이미지

    마무리 단계

    회원가입 및 인증을 정상적으로 마치면 아래와 같은 창이 나타납니다. 바로 ‘Go to Figma’를 클릭~!

    가운데 프로페셔널 플랜을 선택하고~

    피그마 동의를 체크하고 ‘Complete upgrade’ 버튼을 클릭하면 마무리됩니다.

    학교 이메일을 사용하지 않을 경우 아래와 같이 나타납니다. 가능하면 학교 이메일로 가입하는 것을 추천합니다.

  • 크롬에서 닫힌 탭을 다시 여는 방법

    크롬에서 닫힌 탭을 다시 여는 방법

    1. 단축키로 바로 복구 (가장 빠름)

    • Windows: Ctrl + Shift + T
    • Mac: Command + Shift + T → 여러 번 누르면 닫았던 탭이 최근 순서대로 계속 복원됨니다.

    2. 메뉴에서 복구

    1. 크롬 오른쪽 위 점 3개(⋮) 클릭
    2. 기록(History) 선택
    3. 최근에 닫은 탭 / 창 목록에서 원하는 탭 클릭

    3. 탭 그룹 복구

    • 탭 그룹을 닫았다면 → 메뉴(⋮) > 기록 > 탭 그룹 복원 선택하면 한 번에 복구 가능

    목록에 안 보일 때 확인할 것들

    크롬 방문 기록 직접 확인

    주소창에 입력

    chrome://history/

    최근 방문 사이트가 보이면 거기서 다시 열 수 있음

    다른 기기와 동기화된 탭 확인

    주소창에 입력

    chrome://history/syncedTabs
    • DESKTOP 항목 오른쪽 점 3개 클릭
    • 모두 열기 선택하면 한 번에 복원 가능

    구글 활동 기록에서 찾기 (동기화 사용 시)

    https://myactivity.google.com
    • 웹 및 앱 활동이 켜져 있으면 방문 기록 확인 가능
    • 다시 들어가서 필요한 사이트 북마크 해두는 걸 추천

    확장 프로그램 사용

    • Tab Restore 같은 확장 프로그램으로 복구 시도 가능 ⚠ 단, 100% 복원 보장은 없음

    그래도 안 나오면?

    • 크롬 충돌, 강제 종료, 시크릿 모드 사용 시 기록이 안 남을 수 있음
    • 이 경우 복구가 어려울 수 있음

    Note:
    일단 Ctrl + Shift + T여러 번 눌러보기가 1순위!

  • 스크린 해상도 차이점

    스크린 해상도 차이점

    HD, Full HD, 2K, 4K, 8K 및 10K는 TV, 모니터 등 다양한 화면 해상도입니다.

    화면에 표시되는 픽셀 수, 즉 이미지를 형성하는 포인트 수에 따라 다릅니다. 픽셀이 많을수록 디스플레이 품질이 좋아집니다.

    대표적인 화면 해상도 정리

    구분해상도 (가로 × 세로)특징
    HD1280 × 720약 100만 화소, 기본 고화질 (16:9)
    Full HD (FHD)1920 × 1080약 200만 화소, 가장 널리 사용
    2K (DCI)2048 × 1080영화관 표준, 일반 TV/모니터용 아님
    4K UHD3840 × 2160FHD의 4배 픽셀, 가정용 4K
    4K DCI4096 × 2160영화 제작용 4K
    5K5120 × 2880고해상도 모니터 (예: 일부 애플 제품)
    8K UHD7680 × 43204K의 4배, 초고해상도
    10K (UltraWide)10240 × 4320초광폭 디스플레이에서 사용

    화면 “크기(Size)” vs “해상도(Resolution)” 차이

    구분의미
    화면 크기 (Size)실제 물리적 화면 크기 (인치, 대각선 기준)
    해상도 (Resolution)화면에 들어가는 픽셀 수 (가로 × 세로)

    1인치 = 2.54cm

    화면 크기는 대각선 길이 기준

    예: 5인치 화면 → 5 × 2.54 = 12.7cm

    해상도 쉽게 이해하기

    해상도 1280 × 720 의미:

    • 가로 픽셀 1280개
    • 세로 픽셀 720개 → 총 픽셀 수 약 92만 개

    픽셀이 많을수록 더 선명하고 디테일한 화면

    헷갈리는 포인트 정리

    • 2K = 2048 가로 해상도 (영화 산업용 기준) → 우리가 쓰는 FHD(1920)는 엄밀히 말해 2K가 아님
    • 4K TV = 사실 3840 해상도 → 영화용 4K(4096)와 다름
    • 8K = 4K의 4배 픽셀 수

    요약

    화면 크기는 “얼마나 큰 화면인가”, 해상도는 “그 안에 점(픽셀)이 얼마나 촘촘한가”를 의미한다.

    • 크기가 커도 해상도가 낮으면 흐릿하고
    • 크기가 작아도 해상도가 높으면 매우 선명함
  • 맥 바탕화면 클릭 시 이동 문제 해결방법

    맥 바탕화면 클릭 시 이동 문제 해결방법

    바탕화면을 클릭하면 열려 있던 창이 옆으로 사라지는 기능이 기본 활성화되어 있음

    → 위젯 볼 때는 편하지만, 작업 중에는 꽤 불편합니다.

    해결 방법 (기능 끄기)

    1. 시스템 설정 열기

    2. 데스크탑 및 Dock 클릭

    3. 아래로 스크롤 → 데스크탑 및 스테이지 매니저 항목 찾기

    4. “배경화면을 클릭하여 데스크탑 표시” 옵션 변경

    설정 변경

    • 기본값: 항상
    • 변경: 스테이지 매니저만

    이렇게 바꾸면 바탕화면을 클릭해도 현재 작업 중인 창이 옆으로 사라지지 않음

    이 기능이 뭐였냐면?

    Sonoma에서 추가된 기능으로 바탕화면 위젯을 쉽게 보라고 넣은 건데 기존 맥 사용 습관이 있던 사람들에겐 오히려 방해 요소가 됩니다.

  • PHP Composer 설치

    PHP Composer 설치

    맥에서 PHP Composer 설치

    Laravel 프로그램을 개발하려면 php Composer가 필수인데 mac에서 composer 설치하는 방법을 찾아보니 curl을 써서 설치하는 방법이 대부분 입니다. mac에서 설치를 편하게 하자고 하는 패키지가 brew이므로 brew에 composer를 설치하는 방법이 있을 것 같아서 찾아보니 brew를 이용한 설치법이 있더라구요 복잡하게 안하고 한줄로 됩니다.

    brew install composer

    아래의 명령어로 설치된 버전을 확인한다.

    composer -V
    Composer version 2.6.2 2023-09-03 14:09:15
  • 엑셀에서 표의 행(Row)과 열(Column) 바꾸기 (Transpose)

    엑셀에서 표의 행(Row)과 열(Column) 바꾸기 (Transpose)

    행과 열을 서로 바꾸는 걸 전치(Transpose) 라고 합니다.

    Excel에서 행/열 변환 방법

    방법 ① 붙여넣기로 변환 (가장 많이 씀)

    1. 변환할 데이터 범위 선택
    2. Ctrl + C (복사)
    3. 붙여넣을 위치 클릭
    4. 마우스 오른쪽 클릭 → 선택하여 붙여넣기
    5. 전치(Transpose) 체크
    6. 확인

    행과 열이 서로 바뀌어 붙여넣어짐

    방법 ② 함수 사용 (원본과 자동 연동)

    1. 빈 영역 선택
    2. 아래의 수식 입력
    3. 최신 Excel: 그냥 Enter 구버전 Excel: Ctrl + Shift + Enter
    =TRANSPOSE(A1:D5)

    원본 데이터 바뀌면 결과도 같이 변경됨

    Numbers(맥)에서 행/열 변환 방법

    Numbers는 메뉴에 기능이 따로 있음

    1. 변환할 표(Table) 클릭
    2. 상단 메뉴에서 표(Table) 선택
    3. 맨 아래 행과 열 전환 (Transpose Rows and Columns) 클릭

    표 구조가 통째로 뒤집힘

    요약

    프로그램방법
    Excel복사 → 선택하여 붙여넣기 → 전치
    Numbers상단 메뉴 표 → 행과 열 전환

  • 맥에서 hosts 파일 수정 방법

    맥에서 hosts 파일 수정 방법

    hosts 파일은 인터넷에서 사용되는 컴퓨터 네트워크에서 호스트 이름을 IP 주소로 매핑하는 데 사용되는 로컬 운영 체제 파일입니다. 

    이 파일은 일반적으로 윈도우 및 리눅스 운영 체제에서 사용되며, 기본적으로

    윈도우즈는

    C:\Windows\System32\drivers\etc\hosts

    리눅스는

    /etc/hosts

    맥에서는

    /etc/hosts

    경로에 위치합니다.

    호스트 파일은 일반적으로 수동으로 수정되며, 사용자가 원하는 호스트 이름과 해당 IP 주소를 추가하거나 수정하여 원하는 웹 사이트로 연결할 수 있습니다.

    Mac hosts 파일 변경 방법

    Mac 운영 체제에서 호스트 파일을 수정하는 방법은 다음과 같습니다.

    1. 터미널을 엽니다. (Launchpad > 기타 > 터미널)

    2. 터미널 창에 아래와 같이 명령어를 입력합니다.

    아래 명령어로 hosts 파일을 편집툴로 엽니다.

    $ sudo vi /etc/hosts

    파일 내용을 수정 후, ESC를 누르고 “Shift + :“을 누르고 qw 입력 후 enter 를 누르면 저장이 됩니다.

    127.0.0.1       localhost
    255.255.255.255 broadcasthost
    ::1             localhost

    터미널에서 아래 명령으로캐시를 갱신하면, 수정한 호스트 파일이 바로 적용됩니다.

    $ dscacheutil -flushcache
    sudo nano /private/etc/hosts

    3. 비밀번호를 입력합니다. sudo 권한으로 파일을 열기 위해서는 Mac 관리자 계정의 비밀번호가 필요합니다.

    4. 아래와 같이 hosts 파일이 열립니다.

    5. 파일에서 편집을 원하는 부분을 찾습니다. 주석 처리된 줄은 #으로 시작합니다.

    6. 수정이 완료되면 control+o를 누르고 엔터를 눌러 변경 사항을 저장합니다. 

    7. 파일을 종료하려면 control+x를 누릅니다. 

    참고로, hosts 파일을 수정할 때 실수를 방지하기 위해 미리 백업 파일을 만드는 것이 좋습니다. 

    이를 위해 sudo cp /private/etc/hosts /private/etc/hosts.bak 명령어를 입력하여 hosts 파일을 hosts.bak으로 복사할 수 있습니다. 수정 중 문제가 발생하면 복원하기 위해 이 파일을 사용하면 됩니다.

  • 맥 시스템 무결성 보호(SIP) 비활성화 방법

    맥 시스템 무결성 보호(SIP) 비활성화 방법

    MacOS는 가장 최신의 안정적인 시스템 보안을 염두에 두고 설계되었습니다. 공식 Apple 사이트 외부에서 애플리케이션을 쉽게 다운로드하고 설치할 수 없습니다.

    macOS High Sierra 버전 부터는 App Store 외부의 애플리케이션에 대한 설치 및 권한을 제한하는 파일 SIP(시스템 무결성 보호) 기능이 도입되었습니다.

    macOS High Sierra 이상 에서 외부 애플리케이션에 대한 액세스를 제공하려면 SIP 기능을 비활성화해야 합니다. SIP를 비활성화하는 것은 안전하고 위험이 없습니다. 실제로 macOS의 모든 이전 버전은 SIP를 사용하지 않았고 여전히 안전했습니다.

    더 이상 액세스할 필요가 없으면 시스템 무결성 보호를 다시 활성화할 수도 있습니다. 최신 MacOS High Sierra, Mojave 또는 Catalina에서 파일 시스템 보호를 비활성화하는 방법을 알아보도록하겠습니다.

    맥에서 System Integrity Protection(SIP) 비활성화

    맥에서 시스템 무결성 보호 (SIP)를 비활성하려면 복구 모드에 진입해야 한다.

    1. 맥북 재부팅하자마자 ⌘ Command + R를 길게 누릅니다.
    2. 이때 애플 로고, 지구 모양 나타나면 키를 놓습니다. 
    3. 복구 모드에 진입한 후 상단 메뉴의 유틸리티를 눌러 터미널을 클릭합니다.
    4. 터미널에서 아래의 커맨드를 상황에 따라서 입력하시면 됩니다.

    시스템 무결성 보호 비활성화(해제)

    $ csrutil disable 


    시스템 무결성 보호 비활성화(오픈)

    $ csrutil enable 

    M1 비활성화

    Mac 재시동: Apple 부팅 로고가 실제로 나타날 때까지 기다리십시오.

    Apple 부팅 로고가 나타나면 ⌘ Command + R 키를 함께 누르십시오 . Apple이 로드를 마칠 때까지 기다리십시오. 일반적으로 시간이 걸립니다.

    복구 대화 상자가 나타나면 다음 단계는 유틸리티 > 터미널 메뉴로 들어가는 것입니다.

    다음 명령을 입력하여 터미널을 실행합니다.

    $ csrutil disable

    시스템 알림이 나타날 때까지 기다리면 완료됩니다.
    시스템 무결성 보호를 다시 활성화하려면 입력 코드를 변경하기만 하면 됩니다.

    $ csrutil enable

    그런 다음 다시 시작한 후 기본 설정을 열고 보안 및 개인 정보(보안)를 선택합니다.

    어디서나 앱 다운로드가 허용되게 됩니다.

    Mac에서 타사 앱을 허용하는 방법

    1. 다음으로 터미널을 열고 입력하기만 하면 됩니다.
    2. 기본 설정을 열고 보안 및 개인 정보(보안)를 선택합니다.
    3. Allow Apps Downloaded from Anywhere(어디서나 앱 다운로드 허용)
    4. 완료되었습니다.
    sudo spctl --master-disable

    SIP Mac을 비활성화하는 것이 얼마나 쉬운가요? MacOS High Sierra, Mojave 및 Catalina에서 시스템 무결성 보호를 비활성화하는 방법에 관한 내용은 여기까지입니다. 유용하길 바랍니다!

  • 디자인은 너무 간단하다. 그렇기 때문에 매우 복잡하다.

    디자인은 너무 간단하다. 그렇기 때문에 매우 복잡하다.

    Design can be art. Design can be aesthetics. Design is so simple. That’s why it is so complicated.

    디자인은 예술이 될 수 있습니다. 디자인은 미학이 될 수 있습니다. 디자인은 너무 간단합니다. 그렇기 때문에 매우 복잡합니다.

    Paul Rand
  • 키보드 심벌 이름 알아보기

    키보드 심벌 이름 알아보기

    컴퓨터 키보드에는 코딩에 사용되는 문자와 숫자보다 더 많은 기호가 있다. 아래의 표에서는 각 특수 키보드 기호의 이름과 위치를 보여준다.

    키/심벌이름
    `grave, grave accent, backtick, back quote
    ~tilde
    !exclamation mark, exclamation point, bang
    @at, at sign, at symbol
    #pound, hash, number
    $dollar(s)
    %percent, percent sign, parts per 100
    ^carat, hat, circumflex, exponent symbol
    &and, ampersand
    *asterisk
    (open parenthesis, left parenthesis
    )close parenthesis, right parenthesis
    ( )parentheses, round brackets
    hyphen, minus, minus sign, dash
    _underscore
    =equals, equal sign
    +addition, plus sign
    [ ]brackets(각 괄호), square brackets
    [open bracket
    ]close bracket
    { }braces(중괄호), curly brackets
    {open brace
    }close brace
    \backslash, backward slash
    |vertical pipe, pipe
    ;semicolon(세미콜론)
    :colon(콜론)
    apostrophe, prime, single quote
    quotation mark, double quotes
    ,comma
    .period, decimal, dot
    /slash, forward slash
    <>angle brackets
    <less than(미만)
    >greater than(~보다 큰)
    ?question mark
    Keyboard Symbols
  • 모바일 우선 디자인에 대한 실습 가이드

    모바일 우선 디자인에 대한 실습 가이드

    모바일 우선 접근 방식은 말 그대로 가장 작은 화면에 맞게 디자인하고 작업을 진행하는 것이다. 반응형(Responsive) 또는 적응형 디자인(Adaptive design)을 만드는 가장 좋은 전략 중 하나이다.

    • 모바일 우선 접근 방식은 점진적 향상(progressive enhancement)의 주안점이다. 모바일 디자인은 가장 어려운 일인 만큼 먼저 해야 한다는 것이 이념이다. 모바일 디자인 질문에 대한 답을 얻으면 다른 장치를 위한 디자인이 더 쉬워진다. 요약하자면 가장 작은 디자인에는 필수 기능만 있을 것이므로 즉시 UX의 핵심을 디자인한 것이다.
    • 반대 접근 방식은 단계적 저하(graceful degradation)이다. 이것은 처음부터 모든 복잡성을 통합하고 나중에 더 작은 장치를 위해 제거한다. 단계적 저하의 문제는 처음부터 모든 포괄적 디자인을 구축할 때 핵심 요소와 보조 요소가 병합되어 구별 및 분리가 더 어려워진다는 것이다. 전체 철학은 경험을 “축소”하고 있기 때문에 모바일 디자인을 사후 고려 사항으로 취급할 위험이 있다.

    우리는 다른 사람들과 함께 모바일 우선 접근 방식을 통한 점진적 개선을 강력히 권장한다. 이 게시물에서는 팁과 기술을 설명하고 모바일 우선 워크플로를 사용하여 가상의 웹사이트를 구축하는 실습 강의로 마무리한다.

    모바일 우선(Mobile-First) = 콘텐츠 우선(Content-First)

    귀하의 사이트가 모바일 장치에서 좋다면 모든 장치에서 더 잘 해석된다. 하지만 더 중요한 것은 모바일 우선 접근 방식이 콘텐츠 우선 접근 방식이기도 하다는 것이다. 모바일에는 몇 가지 예를 들자면 가장 많은 제한 사항, 화면 크기 및 대역폭이 있으므로 이러한 매개 변수 내에서 디자인하면 무자비하게 콘텐츠의 우선 순위를 지정해야 한다는 것이다.

    모바일 우선 접근 방식은 유기적으로 더 콘텐츠 중심적이며 따라서 사용자 중심적인 디자인으로 이어진다. 사이트의 핵심은 콘텐츠이다. 바로 이것이 사용자가 존재하는 이유이다.

    그러나 한 가지 주의할 점은 모바일 사용자는 때때로 데스크톱 사용자와 다른 콘텐츠가 필요하다는 것이다. 기기별 콘텐츠는 컨텍스트를 고려하여 측정할 수 있다. 즉, 주어진 상황과 주어진 환경에서 사용자가 더 높이 평가할 사항은 무엇인지? 이를 미리 계획하는 가장 좋은 방법은 사용자 시나리오를 만드는 것이다.

    이동하는

    모바일 우선 접근 방식의 또 다른 이점은 작은 화면 중단점(breakpoints)이 콘텐츠 주위에 더 잘 맞을 수 있다는 것이다. 다시 말하지만, 대안은 더 나쁘다. 이미 통통한 디자인을 작은 프레임워크에 짜넣어야 하는 것이다. 그러나 모바일 우선 접근 방식을 사용하면 콘텐츠 주변에 자연스럽게 중단점(breakpoints)이 생성되므로 어색한 편집이 필요하지 않는다.

    모바일 우선 설계 프로세스

    우리는 Figma 에서 디자이너를 돕는 프로세스를 설명할 것이다.

    평소와 같이 와이어프레임은 레이아웃을 가장 효율적으로 구성하기 위해 권장되는 초기 단계이다. 와이어프레이밍이나 프로토타이핑을 할 때 반응형 중단점(breakpoints) 메뉴를 사용하여 가장 작은 것부터 시작하여 다양한 화면 크기로 이동하는 프로세스를 간소화한다.

    UXPin의 반응형 웹사이트 디자인

    이러한 사전 설정은 적절한 화면 크기를 레이아웃하므로 콘텐츠만 염두에 두고 와이어프레임할 수 있다.

    절차는 다음 단계를 따른다.
    1. 콘텐츠 인벤토리(Content Inventory) — 포함하려는 모든 요소가 포함된 스프레드시트 또는 이에 상응하는 문서이다.

    UXPin을 사용한 모바일 퍼스트 디자인

    출처: Maadmob

    2. 시각적 계층 구조(Visual Hierarchy) – 콘텐츠 인벤토리의 요소에 우선 순위를 지정하고 가장 중요한 요소를 눈에 띄게 표시하는 방법을 결정한다.

    3. 가장 작은 중단점(breakpoints)으로 디자인한 다음 확장 — 모바일 와이어프레임을 먼저 구축한 다음 이를 더 큰 중단점(breakpoints)의 모델로 사용한다. 공백이 너무 많이 생길 때까지 화면을 확장한다.

    4. 터치 대상 확대 — 손가락은 픽셀 단위의 정확한 마우스 커서보다 훨씬 넓기 때문에 탭할 더 큰 요소가 필요하다. 이 글을 쓰는 시점에서 Apple은 터치 대상에 대해 44픽셀 정사각형을 권장한다. 하이퍼링크에 충분한 공간을 제공하고 버튼을 약간 확대하고 모든 대화형 요소 주위에 충분한 공간이 있는지 확인하자.

    5. 호버링에 의존하지 말자 — 거의 당연한 이야기지만 디자이너는 종종 인터랙티브 작업에서 호버 및 마우스오버 효과에 의존한다. 모바일 친화적이라고 생각한다면 하지 않는것이 좋다. 아직 손끝에 대한 호버 컨트롤이 없다.

    6. “APP”을 생각하라 — 모바일 사용자는 경험의 움직임과 약간의 제어에 익숙하다. 캔버스 외부 탐색 , 확장 가능한 위젯, AJAX 호출 또는 사용자가 페이지를 새로 고치지 않고도 상호 작용할 수 있는 화면의 기타 요소에 대해 생각해 보자.

    7. 큰 그래픽 피하기 — 가로 사진과 복잡한 그래픽은 화면 너비가 몇 인치에 불과할 때 잘 표시되지 않는다. 휴대용 화면에서 읽을 수 있는 이미지로 모바일 사용자를 수용한다.

    8. 실제 장치에서 테스트 — 웹사이트가 얼마나 유용한지(또는 그렇지 않은지) 스스로 발견하는 것보다 좋은 것은 없다. Desktop/Notebook 컴퓨터에서 벗어나 실제 휴대폰이나 태블릿에 제품을 로드해보자. 페이지를 탭하고, 사이트 탐색이 쉬운지~? 적시에 로드되는지~? 텍스트와 그래픽이 읽기 쉬운지~?

    이것은 단지 기본 개요이다. 프로세스에 대한 전체 가이드를 보려면 반응형 디자인을 위한 무료 콘텐츠 와이어프레임을 다운로드해서 확인해 보자.

    Mobile-First 설계 튜토리얼

    장치마다 화면 크기와 방향에 따라 다른 레이아웃이 필요하다는 점을 감안할 때 사용자를 위해 여러 배열을 디자인하는 것이 좋습니다. 운 좋게도 Figma에서 바로 반응형 또는 적응형 변형을 만들 수 있다.

    예제를 만들고 스마트폰에서 태블릿 및 데스크톱 보기로 콘텐츠를 확장하는 방법을 설명한다. 계속해서 예제를 만들고 아래를 따라해 보자.

    콘텐츠 우선 순위 설정

    “모바일 우선 접근”은 “데스크톱 우선”과 다르다. 더 작게 디자인할 때 잘라내지 않고 점차적으로 더 큰 레이아웃에 정보를 추가한다. 모바일을 생각한다는 것은 정보를 제거한다는 의미가 아니다. 정보를 1차, 2차, 3차 콘텐츠로 분류하는 것을 의미한다.

    이 예에서 우리는 홈 페이지에 회사 이름 및 제품 링크와 같은 특정 요소가 있어야 한다는 것을 알고 있다. 블로그 게시물도 나쁘지 않을 것이다. 그러나 우리가 말했듯이 모든 것이 스마트폰 보기에 맞지는 않으므로 사이트의 목표인 자전거 판매를 달성할 수 있는 항목에 따라 우선 순위를 설정한다.

    1. 최신형 자전거

    2. 베스트 셀러 바이크

    3. “나에게 딱 맞는 라이드 찾기” CTA

    4. 회사명 및 히어로 이미지

    5. 내비게이션

    6. 검색

    7. 두 번째로 많이 팔린 자전거

    8. 상품권

    9. 추천서

    10. 최신 블로그 게시물

    주문한 목록을 기반으로 우리의 작업이 판매를 얻는 디자인 문제를 해결할 것이라는 확신을 가지고 만들 수 있다.

    스마트폰 보기

    사용자는 얼마나 필요할까~?

    모바일 우선을 생각하면 무엇이 정말 중요한지 생각하게 한다. 이 스마트폰 보기에서 가장 많이 팔린 자전거와 최신 모델은 판매로 직접 연결되므로 상품권, 덜 인기 있는 모델, 최신 뉴스와 같은 다른 항목을 내부 페이지에 남겨둘 수 있다. 마지막 클릭 유도문안은 특히 눈에 잘 띄며 손가락을 한 번만 탭하면 쉽게 칠 수 있다.

    태블릿 보기

    태블릿 크기의 보기용으로 디자인할 때 추가 제품(예: “축전기”)과 같은 2차 정보를 더 잘 추가할 수 있다. 또한 페이지 상단의 탐색을 확장하고 실제로 판매로 이어지지 않고 판매를 장려하는 콘텐츠, 즉 고객 평가를 추가할 수 있다.

    더 많은 옵션을 사용할 수 있기 때문에 스마트폰 UI에 무엇을 포함할지 결정하는 것보다 훨씬 더 어려울 수 있다. 2차 요소와 3차 요소의 차이는 모호한 선이고 모든 것을 포함하고 싶은 유혹이 강하다.

    충동에 저항해보자~ 정렬된 콘텐츠 목록을 사용한다. 스마트폰과 마찬가지로 공간은 여전히 ​​제한적이다.

    데스크탑 보기

    마지막으로 데스크탑 보기는 중요하다고 결정한 만큼 많은 정보를 지원할 수 있다. 여기에서 홈 페이지는 적합 여부에 관계없이 적합하다고 생각하는 모든 정보를 수용할 수 있다. 포함된 몇 가지 추가 콘텐츠를 확인해 보자.

    • 상품권
    • 고객 평가
    • 최신 Lightning Bolt 자전거 탐색 블로그 게시물

    장치에 적합한 레이아웃을 직접 디자인하기

    Figma을 사용하는 경우 이러한 보기에 대해 다른 레이아웃을 만드는 것은 상당히 쉽다.

    1. Figma 프로토타입을 연다.
    2. Figma 편집기의 오른쪽 하단에 있는 “새 적응형 버전 추가”를 탭합니다.UXPin 캔버스 설정
    3. 미리 설정된 크기를 선택하거나 고유한 크기를 입력합니다.
      UXPin의 반응형 웹사이트 디자인
    4. 처음부터 모든 것을 다시 만들 필요는 없다. 디자인 요소를 복사할 크기를 선택한다.
      UXPin 앱 디자인 및 프로토타입

    캔버스 위의 다양한 크기를 탭하여 중단점(breakpoints) 사이를 전환하고 필요에 맞게 각각을 조정한다. 모바일 우선 프로토타이핑을 직접 시도하고 싶다면 Figma에서 시작해 보자.

    원문 : A Hands-On Guide to Mobile-First Responsive Design