신규 Effect - Noise, Texture 배우고 iOS 26 Liquid Glass 구현하기 - 피그마 강좌 4-2

피그마 노이즈 효과 기본부터 실전 적용

피그마의 노이즈 효과는 디자인에 미세한 입자감을 더해, 평평한 요소를 더 생동감 있게 만들어줘요. 이 기능이 추가된 건 최근 업데이트로, UI뿐만 아니라 일러스트나 랜딩 페이지 배경에도 유용하죠. 기본적으로 레이어를 선택한 후 이펙트 탭에서 노이즈를 클릭하면 바로 적용돼요. 모드로 세 가지가 있는데, 모노 모드는 단일 톤 노이즈로 깔끔한 배경에 적합하고, 듀오 모드는 두 색상으로 대비를 주며, 멀티 모드는 여러 색으로 복잡한 패턴을 만들어요.

먼저 노이즈 사이즈를 조정해보세요. 기본값 0.5에서 2로 키우면 입자가 커져서 거친 질감이 느껴지죠. 예를 들어, 앱 아이콘 배경에 적용하면 플랫한 느낌이 사라지고 약간의 그란 느낌이 들어요. 덴시티는 밀도를 뜻하는데, 100에서 50으로 낮추면 입자가 희박해져서 은은한 효과가 돼요. 컬러 옵션으로 노이즈 색상을 바꾸면 블렌드 모드와 결합해 더 세밀한 제어가 가능하죠. 비교해보면, 덴시티 100은 빽빽한 눈보라 같고, 50은 가벼운 안개처럼 느껴져요.

실전 팁으로는 일러스트에 적용하는 거예요. 벡터 요소를 불러온 후 노이즈를 듀오 모드로 화이트와 블랙을 섞어 투명도 50%로 주면, 입체감이 살아나요. 여기에 이너 섀도우를 추가해 바깥에 화이트를 더하면 빛이 스며드는 듯한 효과가 나죠. 예시로 랜딩 페이지 상단 헤더에 노이즈를 넣으면, 단순 텍스트가 시각적으로 돋보여요. 만약 복잡한 패턴을 원하면 멀티 모드로 컬러를 3~4개 섞어보세요. 이 때 블렌드 모드를 '오버레이'로 하면 배경과 자연스럽게 어우러져요.

노이즈를 과도하게 쓰면 산만해질 수 있으니, 덴시티를 30~70 사이로 유지하는 게 좋아요. 대안으로는 포토샵의 노이즈 필터를 참고해 피그마에서 비슷하게 흉내내는 거예요. 실제로 작업할 때, 레이어 복사(Cmd+C, Cmd+V)로 효과를 빠르게 퍼뜨리면 효율적이에요. 이렇게 하면 UI 요소 하나로 전체 디자인 퀄리티가 올라가죠. 노이즈 효과를 익히면 피그마 작업이 훨씬 재미있어질 거예요.

텍스처 효과로 자연스러운 디자인 업그레이드

텍스처 효과는 피그마에서 플랫 일러스트를 더 자연스럽고 울퉁불퉁하게 변형해주는 도구예요. 주로 외곽선을 부드럽게 왜곡하거나 질감을 더할 때 쓰이죠. 이 기능의 배경은 실제 물리 기반 렌더링을 모방한 거라, iOS나 안드로이드 앱 아이콘 디자인에 딱 맞아요. 레이어를 선택하고 이펙트 탭 맨 아래 텍스처를 클릭하면 속성이 나와요. 사이즈는 질감 크기를, 레디우스는 변형 반경을 조절하죠.

기본부터 해보자면, 사이즈를 20으로 키우면 요소가 5배쯤 울퉁불퉁해져요. 예를 들어, 고양이 일러스트에 적용하면 평평한 윤곽이 물결처럼 일그러지죠. 레디우스를 10으로 넓히면 변형 범위가 커져서 부드러운 곡선이 되고, 2로 좁히면 세밀한 요철이 생겨요. 비교 수치로, 사이즈 5 vs 20은 매끄러움 vs 거칠음의 차이예요. 이걸 리니어 그라디언트와 노이즈를 함께 쓰면 더 풍부해지죠. 오른쪽 예시처럼 고양이 몸통에 그라디언트(화이트~그레이)와 노이즈(덴시티 60)를 더하면 털 질감이 살아나요.

실전에서 복사 붙여넣기가 핵심이에요. Cmd+Option+C로 효과를 복사해 다른 요소에 V로 붙이면 속성 그대로 적용돼요. 예를 들어, 랜딩 페이지 아이콘 세트에 텍스처를 일괄 적용하면 시간 절약이 돼요. 주의할 점은 과도한 사이즈(50 이상)로 하면 왜곡이 너무 세져서 읽기 어려워지니, 8~15 정도로 유지하세요. 대안으로는 무료 텍스처 팩(예: Unsplash의 패턴 이미지)을 피그마에 임포트해 마스킹하는 방법이에요. 이게 노이즈보다 세밀한 컨트롤을 주죠.

텍스처를 활용하면 일러스트가 단순 스케치에서 프로페셔널 아트로 업그레이드돼요. 특히 모바일 UI에서 버튼이나 아이콘에 쓰면 터치감이 느껴지게 하죠. 여러분도 오늘 한 번 도전해보세요, 결과가 확 달라질 거예요.

iOS 26 리퀴드 글래스 피그마 구현 가이드

iOS 26의 리퀴드 글래스 UI는 반투명 블러, 왜곡 테두리, 은은한 그라데이션 스트로크로 유명하죠. 피그마에서 완벽 재현은 어렵지만, 노이즈와 텍스처를 활용해 80% 비슷하게 만들 수 있어요. 배경으로는 애플이 프로그레시브 블러를 도입한 이유가 스크롤 시 자연스러운 전환 때문이에요. 완성 버전처럼 헤더에 점진적 블러를 적용하면, 위쪽은 선명하고 아래로 갈수록 흐려지죠.

먼저 헤더 레이어를 투명하게 하고, 뒤에 직사각형을 그려 배경 블러를 추가해요. 프로그레시브 모드로 스타트 20, 엔드 0으로 설정하면 블러가 위에서 아래로 세지죠. 폭을 120으로 맞추면 스크롤 시 배경이 부드럽게 블렌딩돼요. 스트로크 부분은 리니어 그라디언트로 화이트 3포인트(양끝 오퍼시티 0, 중앙 100%)를 만들어요. 대각선으로 배치하면 유동적인 느낌이 나죠. 여기에 이너 섀도우 두 개(Y -4/8/25와 4/8/25)와 드롭 섀도우를 더하면 떠 있는 듯한 입체감이 완성돼요.

텍스처로 왜곡을 더하려면 새 직사각형을 만들어 사이즈 100, 레디우스 10으로 설정해요. 오퍼시티 1%로 투명하게 하고 백그라운드 블러 10을 추가하면 외곽이 물결치죠. 이걸 헤더 안으로 보내고 클립 콘텐츠를 체크하면 배경 이동 시 왜곡이 적용돼요. 실전 팁: 블러가 과하면 5로 낮추고, Cmd+Option+C로 효과 복사해 다른 영역(예: 스크롤 뷰)에 붙여요. 주의사항으로는 밝은 배경에선 블러가 날아가 보일 수 있으니, 어두운 톤 아래에 두세요. 대안은 애니메이션 플러그인(예: Figmotion)으로 동적 리퀴드 효과를 더하는 거예요.

이렇게 하면 iOS 26 스타일을 피그마로 빠르게 프로토타입할 수 있어요. 실제 앱 개발 시 이걸 기반으로 하면 디자이너-개발자 소통이 수월하죠. 여러분 디자인에 적용해보고 피드백 주세요!