Seongmi's PORTFOLIO
사용자 경험을 중심으로
UI를 설계하고 구현하는 홍성미입니다.
시각적인 완성도와 함께,
더 편하게 사용할 수 있는 UX에 집중합니다
디자인부터 퍼블리싱까지 함께 아우르며,
오늘도 배우고 성장하고 있습니다.
ABOUT
디테일로 완성하는
안녕하세요, 3년 경력의 웹 퍼블리셔 홍성미입니다.
작은 차이가 더 좋은 경험을 만든다는 믿음으로
UI를 설계하고 구현합니다.
보기 좋은 화면을 넘어, 일관된 UI와 사용자 경험을 위해
구조적인 설계에 집중합니다.
디자인과 퍼블리싱을 함께 다루며,
원활한 협업을 통해 더 나은 방향을 만들어갑니다.
좋아하는 일을 더 잘하기 위해 꾸준히 공부하며,
오늘도 더 나은 화면을 고민하고 있습니다.
자기소개 더보기
WORK EXPERIENCE
- -
- 스탠스UI · UX 디자인 및 웹 퍼블리싱
- -
- 키움교육카페24 기반 쇼핑몰 홈페이지 기획 · 디자인 · 및 운영 전반
EDUCATION
- -
-
인터렉티브 웹디자인
(스마트기기 UIUX 디자인)교육 이수
- -
- 인덕대학교 만화·애니메이션학과 졸업
CERTIFICATONS
- 웹디자인기능사최종합격한국산업인력공단
- 컴퓨터그래픽스운용기능사최종합격한국산업인력공단
- GTQ 포토샵 1급최종합격한국생산성본부(KPC)
- GTQ 일러스트 1급최종합격한국생산성본부(KPC)
SKILLS
- PUBLISHING
-
HTML5, CSS3, SCSS를 기반으로
구조적이고 유지보수하기 쉬운 마크업을 작성합니다. JavaScript와 jQuery를 활용해
인터랙션과 동적인 UI를 구현합니다. 웹 포준과 접근성을 고려한,
사용자 중심의 퍼블리싱을 지향합니다.
- DESIGN
-
Figma를 활용해 UI·UX를 설계하고
화면의 흐름을 구체화합니다. Adobe Photoshop과 Illustrator를 활용해
UI 구현에 필요한 디자인 작업을 진행합니다.
- TOOLS
-
Git을 활용해 코드 버전 관리와
협업을 진행했습니다. Jira, Confluence를 활용해 이슈를 관리하고
팀과 소통했습니다. WebSquare 기반 환경에서
퍼블리싱을 담당했습니다.
NOTES
실무에서 마주한 문제와
퍼블리싱에 필요한 내용을 중심으로 정리한 기록입니다.
급하게 공부했던 내용부터
틈틈이 쌓아온 내용까지,
부족했던 부분을 보완하며,
필요할 때 다시 꺼내볼 수 있도록 정리하고 있습니다.
- [JS] 스케일 여백 계산으로 배경 위 요소 배치하기 ✋“창 크기가 바뀌어도 버튼이 영상의 특정 위치에 고정되게 해 주세요.” 반응형 페이지에서 배경으로 영상이나 이미지가 깔리고, 그 위에 버튼이나 마커 같은 UI 요소가 정확한 위치에 떠 있어야 할 때가 있다. 이때 배경은 `object-fit: cover` 로 비율을 유지한 채 표시되기 때문에, 창 크기에 따라 가로나 세로가 잘리는 경우가 생긴다. 이번 문서에서는 이런 상황에서도 UI 요소가 배경의 특정 지점에 정확히 고정되도록 만드는 방법을 소개한다.
- [JS] 스크롤에 따라 영상 재생 위치 제어하기 ✋“페이지를 스크롤하면, 그에 맞춰 영상이 같이 움직이게 해 주세요.“ 최근에 스크롤에 따라 영상 타임라인이 동기화되는 인터랙션 구현 요청이 있었다. 이번 문서에서는 페이 지를 스크롤할 때마다 영상의 재생 위치를 동기화하는 스크롤 기반 비디오 컨트롤에 대해 소개한다.
- [CSS] hex 컬러에 불투명도 적용하기 ⚡색상에 투명도를 적용하고 싶을 때, RGB로 변환하지 않고 hex코드를 바로 사용할 수 없을까? 우리는 요소의 색상을 지정할 때, Hex 혹은 RGB 컬러를 주로 사용한다. RGB 컬러에 불투명도를 적용할 때에는, rgba(red, green, blue, opacity) 마지막 값인 Opacity를 지정하면 된다. 하지만 Hex컬러는 어떻게 불투명도를 조정할 수 있을까?
- [CSS] Sass를 이용해 효율적으로 스타일 시트 관리하기 ✨Sass는 ‘Syntactically Awesome Style Sheets’의 약자로, '통사적으로 멋진 스타일 시트’를 뜻한다. CSS는 그 자체로도 충분히 훌륭한 스타일 시트 언어이지만, 작업이 고도화될수록 불필요한 선택자의 과용과 연산 기능의 한계, 복잡한 코드로 인한 유지 보수의 어려움을 겪게 된다. Sass는 이러한 CSS의 단점을 보완하고 보다 효율적으로 스타일 시트를 관리하기 위해 만들어진 CSS 전처리기이다.
- [Figma] 동일한 여러 오브젝트를 한 번에 편집하기 Multi-edit ✨이제 여러 프레임, 그룹, 섹션 내의 레이어를 다중 선택하고 동일한 편집을 일괄 적용할 수 있습니다! 2024년 3월, Figma는 여러 객체를 한번에 선택하고 편집할 수 있는 다중 편집(Multi-edit) 기능을 출시했다. 피그마는 이미 Frame, Shape 등 여러 개체를 선택하여 일괄 편집할 수 있는 기능이 존재했지만, 편집 대상 선택이 쉽지 않고, 편집 대상을 선택해도 일부 편집 기능이 제대로 작동하지 않는 불편함이 있었다.
- [CSS] 사용자 지정 속성(변수) 사용하기 ⚡같은 색상을 배경 색으로도, 글자 색으로도 사용하고 싶은데, class 지정보다 더 편한 방법은 없을까? 웹 사이트를 제작할 때, 페이지의 통일성을 위해 같은 값을 반복하여 사용하게 된다. 여러 위치에 공통적으로 적용한 값을 바꿔야 하는 상황이 생겼을 때, 그 값들을 하나씩 찾아서 바꾸려면 시간도 오래 걸 릴 것이고, 실수가 생길 위험도 크다.
- [CSS] 언어별로 다른 폰트 적용하기 unicode-range ✋“한글은 Noto Sans, 영문은 Roboto 폰트로 적용해 주세요.” 만약 이런 요청이 있다면 어떻게 설정해야 할까? 사용할 언어별로 Class를 지정해 줄 수도 있겠지만, unicode-range 속성을 이용하면 클래스를 각각 지정하는 번거로움 없이 폰트를 적용할 수 있다.
CONTACT
찾고 계신가요?
더 궁금한 점이 있으시다면 편하게 연락 주세요.